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

Question

我知道Customer Chat插件只处于测试模式，但如果可以，我很乐意使用它。在查看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>

任何建议，提示或黑客都非常感谢。

更新：

我已经确认此时不可能在多个小部件之间切换。但是，应该可以做另外两件事。因为它只是一个测试版，所以不支持自定义事件处理等。我将等待官方发布。

Answer 1

在您发布问题时可能尚未提供此功能，但Facebook Customer Chat SDK应该可以帮助您完成所需的工作。

要加载Customer Chat 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客户聊天插件摔跤！