Facebook Messenger is the easiest way to embed Live Chat to your site! These chats are connected to your visitor's Facebook Messenger account, so they'll always have access to it. Here's what your visitors will see on your site:
You'll need:
- A Pro Strikingly account
- A Strikingly site connected to a custom domain with HTTPS (learn how here)
- A Facebook Page (how to make one: https://www.facebook.com/pages/create)
- A Facebook App ID (how to get one: https://developers.facebook.com/docs/apps/register)
Got all that? Great, let's get to it!
1. Get your Facebook App ID.
This is a long number. For example, Strikingly's own App ID is 138736958550286. You will see your App ID on this page: https://developers.facebook.com/apps/
2. Get your Facebook Page ID.
This is another long number. For example, Strikingly's Page ID is 211998345516663. To find your Page ID, go to your Facebook Page, go to the "About" tab, and scroll to the bottom.
3. In your Facebook Page Admin Settings, go to "Messenger Platform", and add your domain to the whitelist (must use https!).
Click save when you're done! Here's what it looks like:
4. Add Custom Code to your Strikingly site.
Paste the following code into Settings > Advanced > Custom Code > Footer Code. Make sure to REPLACE the red bolded parts with your own Facebook App ID and Facebook Page ID!
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(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'));
</script>
<div class="fb-customerchat"
messenger_app_id="YOUR_APP_ID"
page_id="YOU_PAGE_ID"
ref="test">
</div>
5. Publish your site. You should see the Messenger Live Chat Widget in the corner!