How to Add Facebook Messenger Chat to Your Website

Add facebook Chat to Any Site

Many websites are using Facebook Messanger chat system on their website these days because it is quick and user-friendly and gives you the option to get connected to your audience easily.

If you wish to know how to add the Facebook Messanger chat system to your website, we will go through the process in this article step-by-step and add it to the Begindot site.

Why Should You Add the Facebook Chat to Your Site? 

Before we proceed with the process of adding the chat system to your website, I’m sure many users will have the question “why to add it at all”

Well, there are many advantages of adding the chat option to your website.

  1. It will help you to get in touch with your user quickly
  2. It is a free chat option unlike many other premium live chat options
  3. The system is familiar to general users
  4. It allows you to send rich media content such as image, gif, videos
  5. If you are managing a product site, the chat option will make your site look active and friendly

If you don’t want to use the facebook Messanger chat option to your website and looking for other options, we have published this article about the live chat WordPress plugins, that will be helpful for you.

Adding The Facebook Customer Chat Plugin to Your Site

The Customer Chat Plugin offered by Facebook is in the beta version currently, so you might face issues at times.

The process of adding the plugin is simple, and Facebook offered clear instruction about the process of adding the plugin to the site.

You can find the details on this page.

Facebook Customer Chat Plugin


Add Facebook Messenger Chat To Your Website.

Go to the Facebook fan page of the website where you wish to add the chat option. For example, if we need to add the chat box to Begindot, we will have to go to the Begindot fan page.

Step 1. Go to settings and then to Messenger Platform of your Facebook fan page.

facebook Chat Plugin Settings


Step 2. In the next step, you will have to whitelist the domains where you want to add the chat system. Scroll down the page, you will see an option to add the domain to whitelist it.

You have to paste the complete URL of the domain, make sure to add both HTTPS and HTTP version of the URL so that all of your users can see the chat option.

Whitelist the domain


Step 3. Go through the Customer Chat Plugin setup process. Scroll down a little more, you will see the option to set up the plugin.


Customer Chat Plugin Setup



Step 4. In the next step, you will have the option to customize the message that you wish to show by default to all your visitors.


Chat Message



Step 5. In the next step, you will have the option to customize the look and feel of the chat box. You can select from unlimited color options if you wish to match the color with your website color image.


Customize the Look and Feel


Step 6. In the next step, you will get the code that you need to add to your website. You will have to add the code after the opening <body> tag


facebook Chat Code


How to Add Facebook Customer Chat Plugin Code to Your Site?

If you are good with handling code, you will not need this instruction. You can simply edit your sile and add the code.

The newbie users who are not good with managing code can use the Insert Headers and Footers WordPress plugin.

You can simply copy the code and paste it in the footer box in the plugin options.

Header and Footer Code plugin


Final Word

Sometimes the chat box doesn’t show up even after completing the steps. You can go ahead and clear your browser cache and check again.

If you are working on your Facebook marketing, this Facebook Auto Poster can be of great help.

Hope this tutorial is helpful for you. Do let us know your thoughts by using the comment form below.


Featured Image Credit: Freepik

Join Software Buyers & Sellers

Get top software information and best deals right on your inbox.

HubSpot CRM Sidebar
Popular on Begindot.
An all-in-one employee management HR... is a leading project management and CRM solution,...
Smartsheet is a modern project...
Salesforce is one of the...

Promo Box*

Popular EOR Solutions

EOR (Employer of Record) helps businesses hire global workforce and make human resource-related processes easier.