Help Centre

Support > Designing and Building Your Website > Adding Your Content

How To Add Facebook Live Chat To Your Website

Facebook Live Chat Widget Example

How To Obtain Your Facebook Messenger Code

How To Add Your Facebook Messenger Code To Your Website

Offering your customers more ways to contact you has become increasingly important when selling online. A great way to communicate with visitors to your website in recent times is to offer a live chat feature on your website.

Facebook now offers a free integration of their messenger platform for you to use on your website. This can be completely managed through your Facebook account, meaning that you can respond to enquiries wherever you are. 

The process to get this plugin setup is simple and you can change your colours and introductory message to style the live chat box to suit your website.

This feature is still being beta tested by Facebook, you may experience some issues while it is still in development. 

It is not possible to activate this feature through Facebook’s mobile app. This plugin should be installed using a desktop. 

Some Adblockers prevent the Facebook Live Chat icon from displaying on the page. You may have to switch adblockers on your browser off  temporarily while you install the feature on your website. 

How To Obtain Your Facebook Messenger Code

  1. Go to your Facebook Page (This cannot be set up through your personal Facebook Profile - you must have a Business Page).

  2. Click “Settings” on the top right of the page.

  3. Select “Messenger Platform” from the left-hand menu.

  4. Jump to the “Customer Chat Plugin” section.

Facebook Messenger Platform Settings

  1. Begin the setup process.

  2. Adjust the setup to your preferences through steps 1. and 2.

  3. In step 3, add your website domain name to the box on the left before copying your code.

  4. Copy the code on the right to your clipboard.

Facebook Messenger Plugin Code


How To Add Your Facebook Messenger Code To Your Website

  1. Log into your Create Account.

  2. Select "Content" on the Top Menu.

  3. Click "HTML Fragments" from the left-hand menu.

  4. Click on the "New HTML Fragment" button at the top of the screen.

  5. Give the HTML Fragment a description for reference (e.g. Facebook Messenger Widget).

  6. Paste your HTML code into the large "HTML Code" box.

  7. To stop the Live Chat opening on each new page a user visits, you need to add a line of code to Facebook's. Include:
    This should be placed where indicated in the screenshot below:

    How to stop Facebook Customer Chat Plugin from opening on every page

  8. In the “Type” section, select the “manual” option.

  9. Click “Add HTML Fragment” to save your code.

  10. Next, click “Site Footer” from the left-hand menu.

  11. Add your HTML Fragment to the “Custom Footer Content” by clicking the HTML icon on the toolbar, selecting your HTML Fragment from the drop-down list and clicking the “Save Changes” button when done.

Adding A HTML Fragment To Your Site Footer

  1. Publish your site for the changes to take effect on your live website.


More Questions?

If you have any further questions, please get in touch and we will be happy to help.

Get in Touch