Question

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

这就是我想要做的事情：

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

背景

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

之前的尝试：

通过定位#fb-root并应用display: none;或display: block;来隐藏和显示小部件。这样工作没问题，但仍然非常hacky并且没有解决何时触发隐藏和显示的问题（通常在按钮点击＆＃34;现在聊天＆＃34;，但我也希望小部件在关闭时隐藏/最小化）。
尝试同时加载两个小部件，但是第一个加载了一个小部件，即使第二个小部件加载了，由于我的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客户聊天插件进行角力！

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

1 个答案: