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 personalized 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 customize your messenger plugin. On the last step, add your domain name and copy the embed code snippet.


Embed the copied code in Pixpa Studio

  • You can add the embed code to your website with the help of external scripts.
  • See how to embed your code using the external scripts.
  • Make sure you paste the above-copied code under the External Scripts to be included in body section. 


Troubleshooting

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

Go back to the studio and 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 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.
  • Click on the “+ add a new app” green button on the right top.
  • You would see a popup, add a display name as a messenger and add your contact email id. Now click on create app id button.
  • On the next page, you would see your App id (numeric number) on the left top.

Can't find what you're looking for?

Get in touch with a Pixpa Expert.