How to Customize Facebook Customer Chat Plugin (beta)

Question

I know the Customer Chat Plugin is only in beta mode, but I would love to use it if I can. After looking over the docs , I can't seem to find a way to customize the functionality of the chat widget.

Here's what I want to do:

• Show and hide the widget programmatically (javascript)
• Tap into close event of widget to hide the whole widget instead of just minimizing the chat window.
• Toggle between more than one widget

Background:

Website is a marketplace of sellers, and I want to be able to give them all a personal chat feature that connects consumers with the sellers.

Previous attempts:

• Hide and show widget by targeting #fb-root and applying display: none; or display: block; . This works okay, but still really hacky and doesn't solve problem of knowing when to trigger hiding and showing (usually on a button click "chat now", but I also want the widget to hide when closed/minimized).
• Tried loading two widgets at same time, but one the first one ever loads, and even if the second one did load, I wouldn't have the ability to only target one at a time due to my id DOM selector.

index.html (inside head):

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : 'first-app-id',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.12'
        });
    };
    (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>

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId            : 'second-app-id',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.12'
        });
    };
    (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>

index.html (inside body):

<div class="fb-customerchat"
     page_id="first-page-id"
     logged_in_greeting="Hello, my name is Kevin :)"
     logged_out_greeting="Hey, you are not logged in! You should log in.">
</div>
<div class="fb-customerchat"
     page_id="second-page-id"
     logged_in_greeting="Hello, my name is Kevin again :)"
     logged_out_greeting="Hey, you are not logged in! You should log in.">
</div>

Any suggestions, tips, or hacks are greatly appreciated.

UPDATE:

I have confirmed that toggling between more than one widget is impossible at this point. However, it should be possible to do the other two things. Because it's just a beta release, custom event handling and such is not supported. I will wait for the official release.

Answer 1

This may not have been available at the time you posted your question, however the Facebook Customer Chat SDK should help accomplish what you are after.

To load the Customer Chat SDK instead of the standard SDK update the following line:

js.src = "https://connect.facebook.net/en_US/sdk.js";

to

js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";

To show and hide the widget then add the following in your JS:

FB.CustomerChat.show(shouldShowDialog: boolean);
FB.CustomerChat.hide();

You can also subscribe to event, so to hide the whole widget you could try the following:

FB.Event.subscribe('customerchat.dialogHide',
    FB.CustomerChat.hide();
);

See the FB developer docs for the full details: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk/

Hope that helps. I have been wrestling with the Facebook Customer Chat Plugin for the last couple of days!