How to Embed Facebook Messenger Chat widget in blogger and Website

In today’s online business live chat support system are the most important part of our website. It will connect with our customer in a real time and increases our trust and revenue. There is some Add-on plug-in in the market like Zendesk, Freshdesk and Zoho Chat but all these are not free you can pay to use this plugin on your website. But don’t be disappointed, there is some free alternative you can use these plugin on your website without spending a single penny.

In this article, we will show you how you can embed Facebook Messenger chat widget in your website and blogger for the live chat with your customer and viewer. To embed this widget you need a Facebook Page and your viewer need a normal Facebook profile. Most of the online users have a Facebook profile so you don’t worry. The business owner needs a Facebook page if you have then good if you not have then you can create Facebook Page easily. These widget work on both Desktop and mobile views on your website.

How it works 

When a visitor clicks on Facebook messenger icon on your website a pop up open. Visitor type message and hit enter to send. If you are online you can see the message in Facebook messenger section and start a conversation with your visitor. If you offline you can get the notification on Facebook and your email. You can also Pre-record your message when the visitor starts chatting Messenger automatically replies instantly in your favor.

How to Embed Facebook Messenger Chat widget in blogger

Step 1. Log into your Facebook page and select the setting option as per show in the image.

Step 2. After click on setting option, Facebook Page setting window open and you can see lot’s of an option are available but you can select on Messenger Platform in the right side show in the image.

facebook chat widget

First of all, you need to whitelist your domain it’s an important part without whitelisted you couldn’t use Messenger Chat widget in your website. To whitelisted your domain you have an SSL certificate. Means its work on https sites not in HTTP. In blogger, you can get free SSL certificate so you don’t worry.

Step 3. To whitelisted your domain select Messenger Platform and you can see all the option related to Messenger. Scroll a little bit and you see the option Whitelisted Domains.

Add your Domain in the input field and click on save button. You can add more than one website in the whitelisted domains field.

facebook chat widget

Step 4. After Whitelisted Domain scroll little bit more and you can see Customer Chat Plugin option click on Set Up button as you see in the image.

facebook chat widget

Step 5. When you click on set up button a new pop up window open. The first part of this popup window you can change Greeting message or you can use the default message after that click on Next button. In the second part, you can customized color for Facebook Messenger Chat widget and click Next.

facebook chat widget

Step 6. In the third part and last part of the popup window, you can see some JavaScript code select and copy all the JavaScript code and click Finish. Paste this code in your computer because we use this code later in our website to Embed Facebook Messenger Chat widget.

facebook chat widget

The first part of this tutorial is finished, now go to the next part. In this part, we add JavaScript code earlier copy in Facebook in blogger.

Also Read : How to add contact us page in blogger

Embed Facebook Messenger Code in Blogger

First of all, log in into your Blogger Platform.

Step 1. Navigate to Layout option in a blogger. After clicking theme Layout window is open according to your blogger theme. In Layout, we add a blogger gadget widget for this click on Add a Gadget option in sidebar right or in footer widget according to your theme.

facebook chat widget

Step 2. A new popup window open when you click on Add a Gadget. Select HTML/JavaScript option.

facebook chat widget

Step 3. After select HTML/JavaScript you see new popup window open. In this window, you can add customized HTML or JavaScript code to increase functionality in your blogger website, but in these case, we add Facebook Messenger chat widget code. Which we copy earlier when we set up Customer Chat Plugin in Facebook. Paste that code in the text area and click on save button.

facebook chat widget

Step 4. Finally, click on save arrangement and voila you did it. Now in your blogger website, Facebook Messenger Chat widget will be embedded, visit your website and check it’ work.


Facebook Chat widget help your online business to communicate with your viewer in real time and increase your branding and trust toward your visitor. Without spending money on another realtime communication app like zendesk and Zoho Chat.

Must Read

I've loved ❤ technology and always curious about new tech innovation. I've been a technology writer and passionate blogger for last 3 year and write How to guide to help people become a tech-savvy.

13 thoughts on “How to Embed Facebook Messenger Chat widget in blogger and Website”

    • I think you cannot added your domain( to whitelisted in Facebook page setting.Third party domain are only accessible through whitelisted in Facebook for security reason. Follow step 3 to configure and added your domain in whitelisted.


Leave a Comment