See our other products: ChatBot.com – bot platform | KnowledgeBase – help center for website | LiveChat – award winning live chat software

Facebook widget with chat.io

One of chat.io great advantages is the ability to stay in touch with your customers after they leave your website.

How’s that possible?

Thanks to our integration with Facebook Messenger, of course!

The whole idea is simple: with a few simple steps you can create your own Facebook Messenger chat widget and reply to all Facebook messages from chat.io.

Once you connect your chat.io account with Facebook, your customers will receive your messages through Facebook Messenger. The great thing is that even if they respond to your message via Messenger, you will see their message in your chat.io app.

Thanks to that, you can build relationships with customers who have already left your website. You also save time by gathering all customer messages in chat.io. Simple as that!

null


But this integration is not just about chatting. When you chat with customers using Messenger, you can take advantage of the most important chat.io features. Canned responses will allow you to respond in a flash (especially that they can learn from your chats and suggest right responses when you’re chatting).

Thanks to chat routing, your chats will be automatically transferred to an agent that is currently less busy than you. Finally, chat.io reporting can help you to spot the areas you can improve and optimize it, so your customers are even more satisfied.

Also, remember that you don’t have to be tied up to your PC! Once you install chat.io on your mobile or iPad, you will always receive a notification when your customer contacts you.

Need more reasons to use chat.io? Check out our features!

How to install Facebook Customer Chat

  1. Install Facebook widget on your website

As with chat.io - you would need to install Facebook widget code before the tag on your website. To make that code work though, you need to get your app ID and page ID.

a. Getting app ID

b. Getting Facebook Page ID

  • Open your FB Page and right-click on its profile picture then copy its link.

null

  • Copy it to any notebook and extract number visible betweenfacebook.comand/photos. That’s it!

null

c. In the code below:

  • * * replacein the code below with the ID you get from photo,
    • replaceyour-app-idin the code below with the ID from developers account.

Now, you can paste the changed code to your website’s HTML, before the tag.

<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.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-customerchat"
  page_id="<PAGE_ID>"
  ref="<OPTIONAL_WEBHOOK_PARAM>"
  minimized="<true|false>">
</div>

source

d. Whitelist your domain to connect your Facebook Page to your website. Go to your Page Settings > Messenger Platform > Whitelisted Domains

It’s done! Refresh your website and enjoy your FB chat widget!

2. Connect FB with chat.io

Now the second part! Let’s connect FB to chat.io.

  1. Open your chat.io accountand go toFacebook Messenger settings.

null

  1. Sign up with your FB account to select a page to connect to chat.io.

All done! From now on, you can handle all chats from Messenger in your chat.io app!

comments powered by Disqus