Add Live Chat with Facebook Messenger

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 (make one here: 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, and follow the next steps:

1. Click the About tab below your Page's cover photo, then click Page transparency.
2. Click See all, then click Go to Ad Library.
3. Find view_all_page_id= in the address bar of your browser. Your Page ID is the number immediately following this.

 

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!