延迟加载 facebook 客户聊天插件 - 我可以强制打开聊天对话吗？

Question

我正在尝试延迟加载 facebook 客户聊天插件，以避免对每个页面加载的性能造成影响。

我的想法是，与其在客户可能想要与聊天互动的机会的每个页面上都包含 FB sdk，我可以只拥有一个用户单击的聊天图标，然后加载 sdk。

对我来说似乎很有意义。

加载 javascript 时有一点延迟，但没关系，我在聊天图标上放了一些脉动动画，让用户知道发生了什么事。

问题是如果他们已经在某个时候关闭了一个聊天对话，它就不会重新打开：

来自https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin：

默认情况下，问候对话框将显示在桌面上并在移动设备上最小化。用户还可以单击以显示或最小化对话框。在页面会话期间（包括页面重新加载），此状态会缓存在浏览器上。

那第一部分是好的-我可以设置greeting_dialog_display到'show'非常容易。但是如果他们已经关闭了前一页上的聊天窗口，那么该状态的缓存就会成为一个问题；他们点击了我的假聊天图标，SDK 加载...然后什么也没有发生——他们必须再次点击该图标才能打开聊天窗口。根本不是很好的用户体验。

我能做些什么来解决这个问题吗？我已经使用 devtools 查看了幕后的代码，但坦率地说，我无法理解它，即使可以，我也不确定我是否可以与它进行交互，因为聊天的主体小部件似乎在 iframe 中？

这是我的代码，并不是大部分与问题非常相关：

HTML/JS：

<img id="fake-chat" onclick="loadRealChat();" src="/img/facebook-chat.svg">

<div class="fb-customerchat" page_id="293008574697" greeting_dialog_display="show"></div>

<script>
    function loadRealChat() {
    _('fake-chat').style.animation='pulse 0.5s linear 6';

    _('fake-chat').insertAdjacentHTML('afterend', '<div class="fb-customerchat" page_id="PAGE_ID" greeting_dialog_display="hide"></div>');

    window.fbAsyncInit = function() {
        FB.init({
            appId            : 'APP_ID',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v3.0'
        });
    };

    (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>

CSS：

#fake-chat{cursor:        pointer;
           box-shadow:    rgba(0, 0, 0, 0.15) 0px 3px 12px;
           border-radius: 50%;
           position:      fixed;
           bottom:        24px;
           right:         24px}

@keyframes pulse {
      0% { transform: scale(1); }
     25% { transform: scale(1.1); }
     50% { transform: scale(1); }
     75% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

作为奖励，如果我能在 facebook 聊天完成加载并出现的那一刻准确地停止动画会很好 - 有什么想法吗？

谢谢！

Answer 1

您可以在开始时禁用 xfbml（设置 xfbml: false）。然后您可以使用以下命令触发 Messenger 聊天加载：

FB.CustomerChat.show(shouldShowDialog: boolean);