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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.