Load FB messenger widget on click

index.html

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script defer>
    function loadMessenger() {
        window.fbAsyncInit = function() {
            FB.init({
                xfbml            : true,
                version          : 'v7.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/xfbml.customerchat.js';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        document.getElementById('server_trigger').innerText = 'Loading...';

        setTimeout(function() {
            window.FB.CustomerChat.showDialog();
            window.FB.Event.subscribe('customerchat.dialogShow', function() {
                document.getElementById('server_trigger').classList.add('hidden');
            });
        }, 500);
    }
</script>

<!-- Your Chat Plugin code -->
<div class="fb-customerchat"
     attribution=setup_tool
     page_id="page_id"
     theme_color="#000000"
     logged_in_greeting="Greetings!"
     logged_out_greeting="Greetings!">
</div>

<button onclick="loadMessenger()"
        type="button"
        id="server_trigger"
        class="fixed bottom-0 right-0 mb-4 mr-4 bg-plant-light text-black p-4 rounded-full inline-block font-bold">
    Need help?
</button>