首页 文章

移动网站上的Facebook Messenger客户聊天插件

提问于
浏览 次
-1

我正在尝试在我的网站上插入自定义聊天插件 . 它工作得很好但在移动设备上看起来不太好 . 我只是希望它有页面宽度，但它看起来像这样：

enter image description here

这是我的HTML代码，它非常简单：

<!DOCTYPE html>
<html>
  <head>
    <title>Otto Bot</title>
  </head>
  <body>
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>(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/es_LA/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

    <!-- Your customer chat code -->
    <div 
      class="fb-customerchat" 
      attribution="setup_tool" 
      page_id="<MY-PAGE-ID>" 
      logged_in_greeting="Hablemos?" 
      logged_out_greeting="Hablemos?"
      minimized='false'>
    </div>
  </body>
</html>

我只是复制并粘贴了我的页面设置中给出的代码 . 我已经尝试过https://developers.facebook.com/docs/messenger-platform/reference/web-plugins/#customer_chat中给出的说明

html css facebook facebook-messenger messenger

1 回答

  • 1

    只需在head部分添加一个viewport元标记：

    <!DOCTYPE html>
<html>
  <head>
    <title>Otto Bot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>(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/es_LA/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

    <!-- Your customer chat code -->
    <div 
      class="fb-customerchat" 
      attribution="setup_tool" 
      page_id="<MY-PAGE-ID>" 
      logged_in_greeting="Hablemos?" 
      logged_out_greeting="Hablemos?"
      minimized='false'>
    </div>
  </body>
</html>
    回复于

相关问题