DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Nicole Yang
Nicole Yang

Posted on

How to customize FB messenger on the website

I have been trying to hide the customer chat plugin's greeting dialog on the initial page load. I've set greeting_dialog_display="hide" and it works, but only works the first time the page is loaded.

Since I also need to customize the position of the messenger, I add a customized class name on it by using javascript.

But if I let the dialog show (open the messenger) and refresh the page or open on a new tab, the dialog won't hide after the page load. And the customized class name won't be added, either.

window.fbAsyncInit = function() {
    FB.init({
        appId: "MY_APPID",
        autoLogAppEvents: true,
        xfbml: true,
        version: "v6.0",
    });

    FB.CustomerChat.hideDialog();
};

(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");
Enter fullscreen mode Exit fullscreen mode
<div class="fb-customerchat" 
    page_id="<PAGE_ID>" 
    minimized="true"
    greeting_dialog_display="hide">
</div>
Enter fullscreen mode Exit fullscreen mode

I've tried putting FB.CustomerChat.hideDialog(); after FB initiated, but it still doesn't work.

I also tried using window.addEventListener('load', function() {}), but it works delay since the internet speed.

BTW, I also post this question on Stack Overflow, but I still haven't got the answer. πŸ˜₯

Top comments (0)

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.