Add Facebook Messenger to your website

The Facebook Messenger customer chat plugin allows you to integrate Messenger directly into your business website. Customers can interact with your business at any time with the same personalised experience they get in Messenger. Know more.


To add FB messenger plugin, follow these steps:

  • Go to your FB Page > Settings section > Messenger Platform
  • In the ‘Customer Chat Plugin’ section, click the ‘Set Up‘ Button.


In the next step, you would see a popup window from where you can customise your messenger plugin. On the last step, add your domain name and copy the embed code snippet.


Embed the copied code in Pixpa Studio

  • Go to Pixpa studio settings page.
  • Paste the above copied code in external script <body> section.
  • Click on save button. That’s it.

 

That’s it. FB chat plugin is added now. Go to the website and review the same.


Troubleshooting

Sometimes Facebook Messenger chat button does not initialize on some website directly. We have to intialize it in the messenger code itself.

Go back to studio and add the add the following code on top of the messenger code under <script> tag.

window.fbAsyncInit = function() {
    FB.init({
      appId            : 'XXXXXX',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v3.2'
    });
  };

The final messenger code would be look like this. That’s it. You would see the messenger icon on your website now.


(Optional) Please follow the steps to create an APP ID. If you do not add any app ID then also FB chat box would work.

  • Login with your FB account here – https://developers.facebook.com/apps
  • Click on “+ add a new app” green button on right top.
  • You would see a popup, add a display name as messenger and add your contact email id. Now click on create app id button.
  • In the next page, You would see your App id (numeric number) on left top.