How to Add Facebook Messenger Live Chat Widget on Your Website

how to add facebook messenger live chat in website

How to Add Facebook Live Chat Widget in Website

With more than a billion monthly users, Facebook Messenger enables business owners, brand accounts to have realtime one to one chat conversations with customers and even visitors who are interested in your product.

With Facebook Facebook Messenger, Live Chat support visitors have more easy and effective access to your product and they can ask any pre-sale questions related to your business. This improves your business opportunities and you will know what customers are looking for.

The major problem with embedded Facebook Messenger Live Chat Widget is that visitors will have to leave your website to type a message. It would be nice if facebook implemented it that way. But yet it an effective way to bring customers to your website.

How to Embed Facebook Chat Widget in Website

Embedding a Facebook chat widget on the website is very easy. all you need to do is copy and paste a simple code generated by facebook on your website.

How to set it up
First thing You must have a Facebook Page. If you don’t have an account Create a Facebook Page for Business or website Here.

2. When the Facebook page is created, a unique Facebook Page ID will be generated along with it.

How do I find my Facebook Page ID?

To find your Page ID follow the simple tips:

  • From News Feed, click on Pages in the left side menu.
  • Choose your Page name to go to your Page.
  • Click on about in the left column. If you don’t see About in the left column, click See More.
  • Scroll down to find your Page ID under More Info.

Also Read: How to Add WhatsApp Live Chat Widget to Website

Method 1: Setting Up the Plugin Facebook Messenger Live Chat Widget

Using the Setup Tool: 

For Page Admins, the Facebook Messenger Platform provides an easy setup tool for customizing their customer chat plugin. To use the setup tool, follow the steps:

  • Go to Page Settings > Messenger Platform
  • Go to the ‘Customer Chat Plugin’ section, click the ‘Set Up’ Button.
  • The Facebook setup tool provides a simple UI for customizing the Facebook Messenger Live Chat message, theme color, displayed response time, and also setting the whitelisted domains for the plugin.

how to install facebook live chat in website


Method 2: Setup Using Developer Steps

To set up Facebook Messenger Live Chat Widget using “Developer steps” Follow the simple guide to create a customized Facebook Chat widget on the webpage.

Whitelist the domain of your website

For security reasons, the plugin will only render when loaded on a domain that you have whitelisted. Refer to whitelisted_domains reference to learn how to whitelist your domain programmatically.

Note: Domain Name and HTTPS Required

To set up Facebook Messenger Live Chat Widget using “Developer steps”  Your Domains must meet the following requirements to be whitelisted:

  • Served over HTTPS
  • Use a fully qualified domain name, such as IP addresses and localhost are not supported for whitelisting.

How To whitelist a domain

To whitelist, a domain on Facebook do the following procedure.

  • Open your Facebook and click on Settings at the top of your Page
  • Click Messenger Platform on the left
  • Edit whitelisted domains for your page in the Whitelisted Domains section

Include the plugin on your webpage

To set up Facebook Messenger Live Chat Widget using “Developer steps” add the plugin to your webpage, include a div with the following attributes in your HTML:

<div class="fb-customerchat"

By default, the greeting message will be shown on mobile and desktop. You can customise welcome message dialog behavior, chat color theme word style and many other functions.

Customizing the Plugin

how to add facebook live chat in website add facebook live chat in website

To include the customer chat plugin on your webpage, you can either use the setup tool or setup using developer steps.

When you install Facebook Messenger Live Chat in your Website a Messenger widget will appear in the corner of your webpage. When any visitor clicks on the Facebook Messenger icon, a chat window of your Facebook Business page pops up. Now any visitor or customer who visits the website can message you in private.


For More Technology updates like us on Facebook Facebook hope you find the detailed information How to Add Facebook Messenger Live Chat Widget on Your Website.  If you are looking for anything particular, write in the comment section, we will get back to you with the information.


Share your knowledge with comments