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() {
        appId: "MY_APPID",
        autoLogAppEvents: true,
        xfbml: true,
        version: "v6.0",


(function(d, s, id) {
    var js,
        fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); = id;
    js.src = "";
    fjs.parentNode.insertBefore(js, fjs);     
})(document, "script", "facebook-jssdk");
<div class="fb-customerchat" 

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. 😥

Discussion (0)