Skip to main content

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 = "http://ift.tt/2cEl5fI;;
        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.

Labels:

Comments

Post a Comment

Popular posts from this blog

101+ Pretty Good Blogging Tips, Tools and Shortcuts

When you first start a blog it all seems simple. The deeper you go, however, the more complicated it becomes. Bloggers have to know about design, content creation, SEO, servers, security and so much more. Sometimes it can all feel pretty overwhelming. Today’s post is an enormous list of actionable tips that you can bookmark (just hit Control and D) and refer back to when you’re having one of those days where you’re just not sure what to do next. I’ve tried to break them up into rough categories but there will be some overlap so make sure you have a read of the sections that you think might not interest you. Let’s go! Content Creation Producing helpful content is the backbone of any successful blog or website. Here are some tips to ensure you get the most out of everything that you produce. Generate your idea You need a blogging strategy before you write anything. First think about reader feedback, a problem your industry is having or something your audience is interested ...
Post a Comment
Read more

4 Life Changing Podcasts About Freelancing You Should Check Out

One of the most challenging aspects of being a full-time freelancer is finding other people that can relate to your experiences. Not being able to share problems about your work or rely on anyone as a mentor can take a toll on you. It’s a lonely lifestyle if you don’t know anyone else in the same boat. Other than co-working, options are limited to hear from others in the lifestyle. Freelancing podcasts are – for me – one of the best ways to learn from other people that have to deal with the same problems. After all, it doesn’t matter what field you freelance in; you still have to deal with problematic clients , time management issues, and more. In this article, I’ll show you my four favorite freelancing podcasts about working on your own. I’ll share my favorite episodes and tell you what to expect from each one. It’s time to put your headphones on! 1. Smart Passive Income Smart Passive Income is a lot more than just a blog. It offers online resources for everything from affil...
Post a Comment
Read more

What to Do When Your Child Says They Want to Be a Blogger

How would you react if you son or daughter said that they wanted to be a blogger when they grew up? For many parents, it’s unfamiliar territory. The other day I had a fascinating comment over on my Facebook page from someone who was concerned that their grandchild wanted to become a blogger. It was an interesting moment for me because, like many of you reading this, my family wasn’t always supportive or understanding of my chosen blogging career path. I realized that a lot of parents or grandparents might be a bit confused about this issue so I decided to do a post with my own thoughts based on my own experiences, and I’d love you own input in the comments below. Let’s take a look. Can blogging really be a legitimate career for my kid? If you’ve found this article because you’re a parent who is searching Google for some answers about how to deal with this “problem” then I should re-assure you that blogging is now a very legitimate career. You might want to go back and read thi...
Post a Comment
Read more