延迟加载 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 (set xfbml: false)。 然后，您可以使用以下方法触发 Messenger 聊天加载：

FB.CustomerChat.show(shouldShowDialog: boolean);

Answer 2

我的解决方案是这样的，我将 cookie 设置为 30 分钟，如果 cookie 处于活动状态，则在第一个按钮单击此处后为每个页面加载聊天是代码。

HTML/CSS

      <div class="fake-button"><img src="messenger-icon.svg"></div>
      .animate > img {
       animation: pulse 1s linear 4;
      }
      @keyframes pulse {
      0% { transform: scale(1); }
      25% { transform: scale(1.1); }
      50% { transform: scale(1); }
      75% { transform: scale(0.9); }
      100% { transform: scale(1); }
      }

和JS代码

 $(window).load(function () {
            if (getCookie('fb-chat')) {
                FB.XFBML.parse();
            }
        });
$('.fake-button').on('click', function () {
            $(this).addClass('animate');
            FB.XFBML.parse();
            setCookie('fb-chat', true, 0.0216);
        }) .on("animationend", function(){
            FB.CustomerChat.showDialog();
            $(this).removeClass('animate');
        });
        window.fbAsyncInit = function() {
            FB.init({
                xfbml            : false,
                version          : 'v3.2'
            });
        };
        (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/xfbml.customerchat.js';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        function getCookie(name) {
            var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
            return v ? v[2] : null;
        }

        function setCookie(name, value, days) {
            var d = new Date;
            d.setTime(d.getTime() + 24*60*60*1000*days);
            document.cookie = name + "=" + value + ";path=/;expires=" + 
        d.toGMTString();
        }
        function deleteCookie(name) {
            setCookie(name, '', -1);
        }