Working with Facebook - Customer Chat Plugin

In our Chatbots & social messaging quick start guide we detail working with Facebook's send to messenger plugin. It is also possible to work with the customer chat plugin.

Prerequisites: web SDK integration

Integrating Facebook's customer chat plugin requires that you configure your web application in your Xtremepush project and that you complete the integration of the Xtremepush SDK in your website.

Customer chat plugin integration

Review the Facebook messenger Docs for embedding a plug-in and opting-in users. You can find these in the discovery and re-engagement section.

Follow the Facebook messenger docs for embedding the customer chat plugin on your site to opt-in users for messaging. You will need to modify the plugin embed code to allow syncing of opted in users to Xtremepush. To be able to connect the user to Xtremepush and enable you to message them on FB Messenger via your FB messenger channel you need to grab the Xtremepush ID and set the plugin's ref attribute to be equal to the Xtremepush ID.

See highlighted line below where we use the Xtremepush SDK method to get the device ID. Setting this attribute is key, since once it is set, the Xtremepush ID will be available in your chatbot when the user opts in.

var fbPluginElements = document.querySelectorAll(".fb-send-to-messenger[page_id='XXXXXXXXXXX']");
 if (fbPluginElements) {
 for (i = 0; i < fbPluginElements.length; i++) {
 fbPluginElements[i].setAttribute('ref', xtremepush('get','device_info').id );
 }
 }

Once the user ID is pushed to your chatbot as part of the opt-in then you can easily sync your user with the chatbot. If you have your own purpose built chatbot follow integration guide within the quick start guide. If you use a platform like chatfuel you can also integrate it by adding a JSON API block to your chatbot flow. Review our dedicated guide on integrating chatfuel for more details.