How to add a Facebook Messenger chat button to your website - Step-by-step guide

Customers that visit your website want to reach out to you. Are you making that easy enough?

What about customers that want to chat with you on Facebook Messenger?

Don't lose your precious customers, but make it easy for them to reach out to you.

Add Facebook Messenger to your website

So, now you want to add Facebook Messenger as an option. But how?

There are three methods:

1. Open Facebook Messenger using a link (simple)

2. Get Facebook Messenger chats using Boei (simple)

3. Adding the Facebook Messenger script to your website (advanced)

1. Facebook Messenger using a link

For this to work, you need to create a button on your website.

To open Facebook Messenger, you can use the following link format.

http://m.me/<reference>

You can replace <reference> with a page ID, or with a username.

2. Facebook Messenger using Boei

Boei lets your customers chat with you via their favorite channels like Facebook Messenger, WhatsApp, Viber, Slack, Telegram, and many other chat channels.

When you set up Facebook Messenger, Boei will look like this:

In Boei, you can create a new (so-called) helper for Facebook Messenger. Here you can fill in your Page ID or Facebook username.

Next to Facebook Messenger, you can also add many other channels (like WhatsApp chat or Telegram, see here). Or even an embedded contact form and newsletter subscription.

Boei is super easy to install btw, see the documentation.

Also, Boei is super lightweight and does not need to use the Facebook Javascript library.

3. Adding the Facebook Messenger script to your website

Facebook has developed a widget that allows people to chat with businesses on their websites and in Messenger.

This is how it will look like:

To install Facebook's widget on your website, you follow these steps.

1. Get your Facebook Page ID

2. Whitelist your domain name

3. Embed the Facebook SDK and plugin scripts

4. Set up notifications

Further info and options can be found on this Facebook page

When using the chat widget from Facebook, you should be aware of a few things:

• You need to have a Facebook business account / page. You cannot use a personal account.

• Facebook requires its Javascript framework to be loaded. This is quite heavy and may slow your website down (a bit).

• Some browsers / Ad blockers are blocking Facebook's javascript which may disable the chat completely.

1. Get your Facebook Page ID

First, you’ll need to retrieve your Facebook page ID. You can do this by navigating to your page, clicking on the About tab, and scrolling to the bottom of the page. There, you will see your page ID (It should be a number).

Alternatively, you can type the name of your Facebook page into FindMyFbId and find your numerical Facebook page ID.

2. Whitelist your domain name

You need to whitelist your domain(s), which is a security measure.

1. Click Settings at the top of your Page

2. Click Advance Messaging on the left

3. Edit whitelisted domains for your page in the Whitelisted Domains section

Ensure to add in https:// and http:// variations. Don't forget to hit the save button.

3. Embed the Facebook SDK and plugin scripts

Add the Facebook Javascript SDK and the Customer chat plugin.

Here you need to fill in your Facebook Page ID, that you got from step 1.

4. Set up notifications

It is useful to get notifications when users are trying to chat with you.

Set up notifications of FB Messenger or download the desktop app or the mobile app from the Appstore.

Done 😀

Hope this helps. Happy chatting!

PS. Boei integrates with multiple chat options and chatbots such as Live Agent, Quriobot, and Intercom. At some moment, we may develop a similar integration with Facebook Messenger, allowing them to interact with the Facebook Chat Widget. Vote for this idea if you want this.