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）;

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);
        }

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

2 个答案: