如何在自定义网站中从右到左移动messenger bot？

Question

我的聊天机器人有这个代码。它在我的网站上默认显示在右下角。但我希望它在左下方。我无法做到。谁能给我代码？

我的代码：

<!-- 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>

Answer 1

最好的方法是使用fb-customerchat类来设置聊天框的样式。

您可以将样式放入css文件中，或者如果在style元素中没有样式。

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

在你的html文件的顶部。

根据已存在的样式的层次结构，您可能需要使用left: 0 !important;。

Answer 2

 .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>

这将解决您的问题