How to Add Facebook Chat/Messenger in Blogger Website

Thinking about adding live chat to your blogger website to help it grow?

Live chat support systems are a really important part of any website. They help connect with your customers in real-time, which can boost trust and, you know, revenue.

There are some add-on plugins out there, like Zendesk, Freshdesk, and Zoho Chat. But, uh, these aren't free – you'll have to pay to use them on your site.

But don't get too bummed out! There are some free alternatives you can totally use on your website without spending a dime.

We're putting together a series of 'how-to' articles where we'll show you how to quickly install these kinds of widgets. In this one, we'll walk you through adding Facebook chat to your Blogger website so you can live chat with your customers and viewers.

To get this widget working, you'll need a Facebook Page, and your viewers will need a regular Facebook profile. Luckily, most people online have a Facebook profile, so that's not really an issue.

Business owners need a Facebook Page. If you've already got one, awesome! If not, you can create one pretty easily. This widget works on both desktop and mobile views on your website, and it's designed to be responsive, so it should look good everywhere.

How it works

When a visitor clicks on the Facebook Messenger icon on your website, a pop-up window opens. They can type their message and hit enter to send it. If you're online, you'll see the message in your Facebook Messenger section and can start chatting with them right away.

If you're offline, you'll still get a notification on Facebook and via email. You can even set up pre-recorded messages. When a visitor starts chatting, Messenger can automatically reply instantly, which is pretty neat for managing initial inquiries.

How to Embed Facebook Messenger Chat widget in Blogger

Step 1. Log into your Facebook page and select the settings option, as shown in the image.

Step 2. After clicking the settings option, the Facebook Page settings window will open. You'll see many options available; select 'Messenger Platform' on the right side, as shown in the image.

(Image: Screenshot of Facebook Page settings with 'Messenger Platform' highlighted)

First of all, you need to whitelist your domain. It's an important part; without whitelisting, you couldn't use the Messenger Chat widget on your website.

To whitelist your domain, you need an SSL certificate. This means it works on HTTPS sites, not HTTP. Blogger offers free SSL certificates, so you don't need to worry about that.

Step 3. To whitelist your domain, select Messenger Platform, and you will see all options related to Messenger. Scroll down a bit, and you will see the 'Whitelisted Domains' option.

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

(Image: Screenshot showing the 'Whitelisted Domains' section with an input field)

Step 4. After whitelisting the domain, scroll down a bit more, and you will see the Customer Chat Plugin option. Click the 'Set Up' button, as shown in the image.

(Image: Screenshot showing the 'Customer Chat Plugin' option with the 'Set Up' button)

Step 5. When you click the 'Set Up' button, a new pop-up window opens. In the first part of this pop-up window, you can change the greeting message or use the default message, then click the 'Next' button. In the second part, you can customize the color for the Facebook Messenger Chat widget and click 'Next.'

(Image: Screenshot of the pop-up window for setting up the Customer Chat Plugin, showing greeting message and color customization options)

Step 6. In the third and final part of the pop-up window, you will see some JavaScript code. Select and copy all the JavaScript code, then click 'Finish.' Paste this code into a document on your computer, as we will use it later on our website to embed the Facebook Messenger Chat widget.

(Image: Screenshot showing the JavaScript code snippet and the 'Finish' button)

The first part of this tutorial is finished. Now, let's move to the next part, where we will add the JavaScript code that you copied earlier from Facebook into Blogger.

Embed Facebook Messenger Code in Blogger

First of all, log in into your Blogger Platform.

Step 1. Navigate to the 'Layout' option in Blogger. After clicking, the Layout window will open, corresponding to your Blogger theme. In the Layout section, we will add a Blogger gadget widget. To do this, click on the 'Add a Gadget' option, typically found in the sidebar or footer widget area, depending on your theme.

(Image: Screenshot of Blogger's Layout section with 'Add a Gadget' highlighted)

Step 2. A new pop-up window will open when you click on 'Add a Gadget.' Select the 'HTML/JavaScript' option.

(Image: Screenshot of the pop-up window for adding a gadget, with 'HTML/JavaScript' selected)

Step 3. After selecting 'HTML/JavaScript,' you will see a new pop-up window open. In this window, you can add custom HTML or JavaScript code to increase functionality on your Blogger website. In this case, we will add the Facebook Messenger chat widget code, which you copied earlier when setting up the Customer Chat Plugin in Facebook. Paste that code into the text area and click 'Save.'

(Image: Screenshot of the HTML/JavaScript gadget window with the pasted Facebook Messenger chat widget code)

Step 4. Finally, click 'Save,' and you're done! Your Blogger website will now have the Facebook Messenger Chat widget embedded. Visit your website and check how it's working!

Conclusion

The Facebook Chat widget helps your online business communicate with your viewers in real-time and increases your branding and trust towards your visitors. This is a great way to connect without spending money on other real-time communication apps like Zendesk or Zoho Chat.