How to Embed the Facebook Customer Chat Widget in your Website

Looking for a simple and free alternative to popular live chat software like Intercom or Zendesk chat? Well, the new customer chat widget from Facebook Messenger is here and anyone can embed these widgets on their website to engage with visitors in real time.

Facebook Customer Chat widget, if you are new, lets people chat with businesses without leaving the website. The widget works on both desktop computers and mobile phones. The business owner needs a Facebook Page and all the visitor needs is a regular Facebook account.

There’s no learning curve or complex installation. The visitor clicks the Facebook icon on your web page, type their message and you (the business owner) get an instant notification on your Facebook Page. If you are online, you can carry on the conversation with the visitor on the Facebook website or inside the Facebook Pages Manager app on your phone.

If you would like to give Facebook Customer Chat a try, go to Digital Inspiration, wait for the page to load and click the Facebook messenger icon in the lower right corner to start a conversation.

How to Embed Facebook Customer Chat

Facebook Chat App

Step 1: To get started, go to developers.facebook.com and click the “Add a new app” button to create a new Facebook app.

Step 2: Give your app a name and click the Create button to get your own App ID. It is simple sequence of digits like 1839871239373637.

Step 3: Go to your Facebook Page, click the Settings tab, choose Messenger Platform, Whitelisted domain, enter the full URL of your website and click Save. You can also enter multiple domains if you wish to embed the same widget on multiple websites.

facebook whitelist domain

Step 4: Get the Facebook Page ID of the specific page that you wish to connect with the customer chat widget. All customer interactions will show in the inbox of this page.

Step 5: We are almost done. Open your website template and copy-paste the following code in the footer of your template. You need to replace the App_ID from Step 2 and Facebook Page_ID from Step 4.

<div class="fb-customerchat" page_id="PAGE_ID"></div>

    <script>

      window.fbAsyncInit = function() {
        FB.init({
          appId            : 'APP_ID',
          autoLogAppEvents : true,
          xfbml            : true,
          version          : 'v2.11'
        });
      };

      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

    </script>

That’s it. Your Facebook Chat widget is now live on your website. If you are not seeing the Facebook messenger logo on your pages yet, clear the cache and make sure the website domain is listed in the domain that you have whitelisted in step 3.

Greeetings and Out-of-office Messages

With Facebook Messenger Chat, you can set a welcome greeting that will show up instantly as soon as a visitor initiates a conversation. Similarly, you can set up an away message that will be displayed when you are unable to join the live chat.

To configure these messages, go to your Facebook Page, Settings, Messaging and update the Response Assistant section.

Note for Adblock Users

Please do note that the widget is served via Facebook. Thus, if you are using any adblock add-on that blocks social plugins from loading, the chat widget may not show up for you.

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

0

Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.