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

<div class="fb-customerchat" 
    page_id="<PAGE_ID>" 
    minimized="true"
    greeting_dialog_display="hide">
</div>

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