如何自定义 Facebook 客户聊天插件（测试版）答案

【问题标题】：How to Customize Facebook Customer Chat Plugin (beta)如何自定义 Facebook 客户聊天插件（测试版）
【发布时间】：2018-03-14 20:18:59
【问题描述】：

我知道客户聊天插件仅处于测试模式，但如果可以的话，我很想使用它。查看docs 后，我似乎找不到自定义聊天小部件功能的方法。

这是我想做的：

以编程方式显示和隐藏小部件 (javascript)
点击小部件的关闭事件可隐藏整个小部件，而不仅仅是最小化聊天窗口。
在多个小部件之间切换

背景：

网站是卖家的市场，我希望能够为他们提供个人聊天功能，将消费者与卖家联系起来。

之前的尝试：

通过定位#fb-root 并应用display: none; 或display: block; 来隐藏和显示小部件。这工作正常，但仍然非常hacky，并不能解决知道何时触发隐藏和显示的问题（通常在按钮上单击“立即聊天”，但我也希望小部件在关闭/最小化时隐藏）。
尝试同时加载两个小部件，但第一个加载了一个，即使第二个加载了，由于我的 id DOM 选择器，我无法一次只定位一个。

index.html（头部内部）：

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : 'first-app-id',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.12'
        });
    };
    (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.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : 'second-app-id',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.12'
        });
    };
    (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.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

index.html（内部）：

<div class="fb-customerchat"
     page_id="first-page-id"
     logged_in_greeting="Hello, my name is Kevin :)"
     logged_out_greeting="Hey, you are not logged in! You should log in.">
</div>
<div class="fb-customerchat"
     page_id="second-page-id"
     logged_in_greeting="Hello, my name is Kevin again :)"
     logged_out_greeting="Hey, you are not logged in! You should log in.">
</div>

非常感谢任何建议、提示或技巧。

更新：

我已经确认，此时在多个小部件之间切换是不可能的。但是，应该可以做其他两件事。因为它只是一个 beta 版本，所以不支持自定义事件处理等。我会等待正式发布。

【问题讨论】：

您不能在一个页面上运行具有多个应用 id 的 JS SDK。而且我怀疑聊天插件的设计是否考虑了这样的用例。另外，Facebook 的政策禁止您以任何方式（除了官方配置选项/参数）弄乱他们社交插件的外观或功能 - 所以您希望显示/隐藏它们而不显示最小化版本很可能甚至不允许开始。

标签： facebook facebook-messenger facebook-customer-chat

【解决方案1】：

这可能在您发布问题时不可用，但是 Facebook 客户聊天 SDK 应该可以帮助您完成您所追求的目标。

要加载客户聊天 SDK 而不是标准 SDK，请更新以下行：

js.src = "https://connect.facebook.net/en_US/sdk.js";

到

js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";

要显示和隐藏小部件，然后在您的 JS 中添加以下内容：

FB.CustomerChat.show(shouldShowDialog: boolean);
FB.CustomerChat.hide();

您也可以订阅事件，因此要隐藏整个小部件，您可以尝试以下操作：

FB.Event.subscribe('customerchat.dialogHide',
    FB.CustomerChat.hide();
);

请参阅 FB 开发者文档了解完整详情：https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk/

希望对您有所帮助。过去几天我一直在与 Facebook 客户聊天插件搏斗！

【讨论】：