Oct 22, 2020

Add FB Messenger to Your Website

Facebook launched its Messenger customer chat plugin last August 4, 2020 allowing business owners to interact seamlessly with their customers both on their website and on the Messenger app, regardless of their browser, device, or Facebook login status. To help boost your online marketing efforts, this article will discuss how you can add the FB Messenger chat plugin to your business website.

How the Facebook Messenger Live Chat Works

One of the most convenient ways to quickly communicate with your site visitors is through instant messaging. To do this, a web developer can integrate the Facebook Messenger Live Chat on your business website. The live chat box automatically appears within the browser window. It provides site visitors with a means to chat with the site owner by typing in their concerns into the chat box.

To optimize the experience, you should consider getting notifications on your devices every time a customer sends you a message. You can do this through Facebook Messenger marketing by downloading the Messenger App on your phone and ensuring that you provide your customers with an immediate response.

Setting Up the Chat Plugin

Before we begin discussing the instructions on how to add FB Messenger to your website, it is assumed that you have already created a Facebook Page for your business.

In terms of Facebook marketing in the Philippines, one great way for business owners to maximize business potential is through Facebook’s social media shops. Thus, setting up the Messenger live chat box on your website will only push your marketing efforts further.

Get Started

First, head on to the Page setting and click on Messaging. Then, scroll down to the Add Messenger to your website section and click on Get Started.

Click Get Started

Set Language, Greeting, Guest Mode

Then, you can set up the chat plugin by choosing your preferred language and customizing your greeting. More importantly, you can choose to let people chat with your business through the chat plugin without the need to log into Messenger. In this way, you give them the option to chat with you using their Messenger account or as a Guest.

Add FB Messenger to Your Website Set Language Greeting Guest Mode

Set Language, Greeting, and Guest Mode

Customize Colors

Also, you can customize the colors of your chat box to go well with your web design and branding.

Customize Chat Box Color

Add Web Domain

Lastly, you should add the website domain/s where you want to display your chat plugin. It will then provide you with a code snippet that you can insert directly after the opening <body> tag on each page that you want the chat plugin to appear.

Add Web Domain

Adding the Chat Box to Your Website

Retrieve Facebook Page ID

First, you will need to retrieve your Facebook Page ID. To do so, head on to your Facebook page and click on the About tab.

Click About Page

Then, scroll to the bottom of the page and locate your page ID.

Add FB Messenger to Your Website Retrieve Facebook Page ID

Retrieve FB Page ID

Whitelist Domain

The next step on how to add FB Messenger to your website is to whitelist your domain name on your Facebook page settings. To do this, hit on the Settings tab, and under Page Settings, click on Advanced Messages.

Click Page Settings

Scroll down, and you will see a section titled Whitelisted Domains. Here, type in both the https:// and https:// versions of your domain to guarantee that it will work for all users. Lastly, click on the Save button.

Whitelist Domains

Embed a Snippet of Code in Website

The final step is to embed a small snippet of code into your website where you want to display the live chat box.

As you can observe in the sample below, you need to place the code just before the closing </body> tag of your webpage. Take note that you have to replace the Facebook Page ID with your own.

Add FB Messenger to Your Website Insert Snippet of Code into Website

Insert Code Snippet to Website

Note: The code shown above is custom. Thus, users may have to wait approximately 4.5 seconds after the page loads to avoid reducing website speed.

In the screenshot below taken from a web development company in the Philippines, their FB Messenger code is already built into their WordPress website. The feature allows for easier configurations. This is especially heplful when it comes to setting up logged in and logged out greetings for their customers.

Syntactics WordPress Website Messenger Plugin

Tips from a Web Development Company in the Philippines to Maximize FB Messenger Live Chat Box

Open the Live Chat Box by Default

Suppose you wish to automatically open the Messenger live chat box for your site visitors every time they access your website. In that case, you can do so by replacing minimized=“true” with minimized=“false” in the code snippet.

Add FB Messenger to Your Website Open Live Chat Box by Default

Code to Open Live Chat Box by Default

Opening the live chat box by default will help encourage your site visitors to make inquiries. It will also help you collect comments and suggestions regarding the products and services that you are offering.

Add a Personalized Welcome Message

On your live chat box, you can choose to set a greeting message with the site visitor’s first name to drive customer engagements. When a new site visitor starts a conversation on the chat box, a messaging_postbacks webhook event reference will be sent to your webhook. On the other hand, when a site visitor continues to type in on an existing thread, a messaging_referrals webhook event reference will be sent to your webhook.

Give Customers Context

As your customer notices the chat box on your website, you should hook them into starting a conversation there and continuing it on Messenger. Let them know that they can continue talking to you on the messaging app even if they leave the website. Also, inform them through your live chat box if ever you are out of the office. Then, tell them that you will reach them through Messenger as soon as you are available.

Image Source: Freepik

Add FB Messenger to your Website

Provide your customers with a convenient way to communicate with your business with the use of the Facebook Chat plugin for WordPress. With the messaging plugin integrated into your website, you can instantly respond to any concerns regarding your products and services. You can also give answers to queries from potential clients. Lastly, you can provide site visitors with relevant and useful information.

We hope that, after reading this article, we have encouraged you to add FB Messenger to your business website. Please let us know in the comments section if you wish to do so. Then, tell us about your experience! However, you can always talk to WordPress Web Developers about adding the functionality.

About Adam Tan

Adam is a charming geek who loves his family's Siberian Husky, enjoys the occasional night out with friends and, most of all, lives and breathes new trends and updates about the web and its technicalities. If you want to stay updated with changes or new trends on the web or learn about the technicalities that are involved, he's your guy. He's capable of writing cheesy stuff as well, but he'd rather stick with the manly stuff.

Find more about me on: