Как переместить мессенджер бота справа налево на пользовательском сайте? - PullRequest
Новая
       12

Как переместить мессенджер бота справа налево на пользовательском сайте?

0 голосов
/ 16 марта 2019

У меня есть этот код для моего чата.По умолчанию на моем веб-сайте отображается по умолчанию .Но я хочу это в левой нижней части .Я не могу это сделать.Кто-нибудь может дать мне код?

Мой код: 

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v3.2'
    });
  };

  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="384557738790994">
</div>

Ответы [ 2 ]

0 голосов
/ 16 марта 2019 

 .bottom-left {
          position: fixed;
          bottom: 0;
          left: 0;
        }

        .alert {
          border: 2px solid red;
          background: white;
          font-weight: bold;
          padding: 1em;
        }
        <div class="bottom-left alert">
          Look at me!
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>

        <p>Sed vel dolor lectus. Nulla sed blandit lacus. </p>

        <p>Donec sagittis, dolor sed fermentum dapibus, justo ipsum porttitor purus, sed fermentum mi nulla non lorem.</p>

Это решит вашу проблему

0 голосов
/ 16 марта 2019

Лучший способ - использовать класс fb-customerchat для стилизации окна чата.

Вы бы поместили стили в ваш файл CSS, или если у вас их нет внутри элемента style. 

<style>
 .fb-customerchat { 
     position: absolute;
     left: 0;
     bottom: 0;
 };
</style>

вверху вашего html файла.

В зависимости от иерархии стилей, которые уже существуют, вам может понадобиться использовать left: 0 !important;.

...