Messenger platform's customer chat plugin allows you to integrate your Messenger directly into your website allowing your customers to shop then and there.

This can be enabled as: Growth tools -> Messenger chat plugin



The shop on Messenger plugin enables your customers to shop your #hashtags within Messenger, without leaving your website. This helps create a single experience for your customers and enables the checkout even if they have left your webpage.

Installing plugin would be a two step process.

Step 1: Enter the website URL where you want to install the widget.



Step 2: Place the code shown in the box before the </body> tag



Once placed, the Messenger plugin would be installed on the website. Click here to convert your Facebook Messenger into a checkout cart.

Messenger chat plugin integration using Google Tag Manager (GTM)

To integrate Messenger plugin using Google Tag Manager, the following code should be used in Google Tag Manager, instead of code generated in step 2.

<!-- FACEBOOK MESSENGER CHAT BOX -->
<script>
// We create the DIV dynamically to work correctly with Tag Manager
var chatDiv = document.createElement('div');
chatDiv.className = 'fb-customerchat';
chatDiv.setAttribute('page_id', 'Your Page ID'); // Facebook Page ID goes here
document.body.appendChild(chatDiv);

(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#xfbml=1&version=v2.12&autoLogAppEvents=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

The 'page id' in the code should be replaced with 'your page id' and the code should be pasted as follows: Google tag manager -> Add a new tag -> Tag configuration -> Custom HTML



Messenger chat plugin and web-bot widget should not be used together as it will overlap on the screen.