How to enable the new Facebook Messenger chat plugin on Shopify [Tutorial]
Let’s go straight to the point. You just need to follow the steps below to put the new gorgeous Facebook Messenger chat plugin on your Shopify store without using any crappy app. So grab a coffee and follow my tutorial.
Tutorial
This tutorial is quite simple, but can be a bit annoying for those who do not like code. At the end of this post I share some ways to get help from experts.
1. First, make sure if the Messenger sales channel is enabled on the store. If it’s not, learn how to enable it here
2. Go to the Facebook page you own/admin > “About” > “Page Info.”
Now, at the very bottom, you can find the “Facebook Page ID”.
It’ll look something like this – “137527299736”
3. Goto to your Shopify theme editor and paste the snippet code below on your theme.liquid file right after the tag <body>. Remember to put your Facebook Page ID in the red text below
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1163199097047119',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.2'
});
FB.CustomerChat.show(true);
};
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js"></script>
<div class="fb-customerchat"
page_id="ATTENTION_PAGE_ID_GOES_HERE">
</div>
4. Save your theme.liquid file;
5. Finally, whitelist your store domain on your Fanpage settings.
- Click Settings at the top of your Page;
- Click Messenger Platform on the left;
- Edit whitelisted store domains for your page in the Whitelisted Domains section.
Great job! Now the new chat plugin are working on your store. 😎
The Benefits
- Get the Facebook Messenger inside an app without being switched to other apps helps to keep the user on your sales channel;
- The desktop version of the chat plugin is a game changer because they also do not interrupt browsing with new tabs;
- The chat UX / UI has been improved;
- The plugin is FREE and integrated with your Messenger app;
Take a look at the plugin running on a Shopify mobile app (PWA) and running on Safari Desktop:
Conclusion
The Messenger plugin is still on beta, and some glitches may happen. Remember to get the help of a professional at StoreTasker if you don’t feel comfortable running this tutorial. Also, you can install our Shopify PWA and we’ll be happy to help you.
Comments
2 Comments
Thank you for this! I’ve used it in two different stores so far.
You’re welcome. What’re you thoughts about this new version? Is this improve your conversions?
Leave a Comment