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

  • Go to the studio settings menu page, then click on the External Scripts in the settings menu bar.
  • After clicking on it, paste the above-copied code in External Script <body> Section as shown in the image below.
  • Click on the Save button. That’s it.


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


Sometimes Facebook Messenger chat button does not initialize on some website 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() {
      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 “+ 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.