延遲加載 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);
        }