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

Question

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

这是我想做的：

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

背景：

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

先前的尝试：

• 通过定位#fb-root并应用display: none;隐藏和显示窗口小部件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版本，所以不支持自定义事件处理等。 我将等待正式发布。

Answer 1

在您发布问题时可能尚不可用，但是Facebook Customer Chat 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客户聊天插件进行角力！