• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Social Media Examiner

Your Guide to the Social Media Jungle

  • 🔥 Free Newsletter
  • ⭐ FREE Web3 Course
  • 🗓️ Our Events
    • Social Media Marketing World (Mar 13-15)
    • Other Industry Events
  • 💡 Society
  • ⚙️ Tools
  • 🎙️ Podcasts
    • Social Media Marketing Podcast
    • Social Media Marketing Talk Show
    • Web3 Business Podcast
    • Our YouTube Channel
  • 🎯 Partner With Us
    • Podcast Sponsorship
    • Email Sponsorship
      • Email Newsletter
      • Dedicated Email Blast
    • Event Sponsorship
      • Social Media Marketing World
    • Tools Sponsorship
  • 👋 About Us
    • Our Story
    • Articles
      • Web3
      • Instagram Marketing
      • Facebook Marketing
      • YouTube Marketing
      • LinkedIn Marketing
      • TikTok Marketing
      • Expert Interviews
  • Search
  • Social Media Marketing World10th annual. Biggest industry event. Sale ends soon!IMPROVE YOUR MARKETING

    How to Add Facebook Customer Chat to Your Website

    by Dana Tran / May 10, 2018

    social media how toWant a better way to connect with prospects and customers?

    Did you know that Facebook Messenger makes it easy to embed a live customer chat widget on your site?

    The Messenger Customer Chat plugin allows you to have a live conversation with site visitors.

    In this article, you'll learn how to add a Facebook Messenger customer chat widget to your site.

    How to Add Facebook Customer Chat to Your Website by Dana Tran on Social Media Examiner.
    How to Add Facebook Customer Chat to Your Website by Dana Tran on Social Media Examiner.

    Why Use Messenger's Customer Chat on Your Website?

    A customer live chat is a small floating icon that usually appears in the bottom-right corner of a website. Like traditional live chat software, you can install a Messenger customer chat plugin on your website.

    This plugin makes it easy for any website visitors with a Messenger account to have a live conversation with a human, leave a message, and interact with your Messenger bot.

    Messenger customer chat plugin example

    Facebook doesn't charge you anything to install this customer chat widget. You don't even need to have a Messenger bot. The only requirement is a Facebook page.

    Before we talk about how to set up a Messenger live chat feature with the help of ManyChat and Chatfuel, let's look at a few reasons why you should have a live chat on your site.

    Manage Conversations Via Your Page's Inbox

    Any messages sent through the Messenger chat widget on your website will automatically appear in your Facebook page Inbox.

    Facebook page Inbox Messenger

    You can also read and reply to visitors' messages on your mobile device through the free Facebook Page Manager app, which is available on the App Store and Google Play.

    The Conference You've Been Waiting For

    As a small business marketer, you can probably only pick one or two events to attend each year. Get back into the game with an unbeatable conference experience and expert training at Social Media Marketing World in sunny San Diego, California—from your friends at Social Media Examiner.

    🔥🔥 As a valued reader, you can save $300 if you act now! Sale Ends Wednesday!

    CLICK HERE TO LEARN MORE

    Enhance Customer Service

    According to Facebook, 53% of people are more likely to shop with a business they can message directly. With your traditional live chat, you can only carry out the chat conversation on a specific site. With Messenger chat, though, you can start a conversation on desktop and then continue it on your mobile device with Messenger at a later date or time.

    Provide Instant Automated Answers

    The Messenger Chat widget allows visitors to ask questions directly on your website and you can carry on conversations with potential leads in real time.

    Facebook Messenger chat conversation

    If you don't have a support team working around the clock to reply to customer questions, build a Messenger bot to power your Messenger chat widget and answer basic FAQs.

    To help convert visitors into leads, you can give people the option to subscribe to your Messenger or email newsletter, deliver lead magnets, or provide links to additional useful content while they wait for a human response.

    Messenger customer chat plugin Mari Smith

    Now let's look at how to set up a Messenger customer chat feature with Chatfuel and ManyChat.

    #1: Set Up Messenger Chat on Your Website Using Chatfuel

    Even though it's not required, it's more effective to have a Messenger bot send users a greeting when they start a live chat through the Messenger customer chat plugin.

    So let's start by creating this greeting message in Chatfuel. If you haven't previously used this tool, check out this video for details on how to sign up and build a simple bot with Chatfuel.

    After you log in, click the Automate tab. Then click on the + sign to create a new block.

    ChatFuel create new block

    To keep things organized, click the title of the block and rename it “Live Chat.” Under Add a Card, click the + sign.

    ChatFuel change block name

    In the pop-up window, click Live Chat to add the live chat plugin.

    ChatFuel plugins

    This plugin will temporarily disable your bot's Artificial Intelligence feature when you're having a live conversation with a user. Whenever there's a new chat session, you'll also get a push notification alert from your Messenger bot.

    Now modify the default start message (“You started chat session with our operator”). Type in something like “Welcome {{first name}}! How can I help you?” Adding curly brackets after “first name” tells the bot to include the user's first name in your welcome message. Facebook will automatically provide this information, so you don't need to ask the user to complete a form or fill out this basic detail.

    ChatFuel customize welcome message

    You can also review and modify the start message description and stop message. For this tutorial, we'll just go with the defaults.

    Now click the Link icon at the top of the page, next to the name of the block.

    ChatFuel link icon

    In the window that appears, toggle the Block Link option on. Then enter a ref link and be sure to remember what you typed in. Then click the orange Done button.

    ChatFuel Block Link option

    Now that you've created the greeting message, the next step is to generate the code for the Messenger chat plugin.

    Click the Grow Tab in the left sidebar. On the Growth Tools page, find Customer Chat Plugin for Your Website and click Enable below it.

    ChatFuel enable customer chat plugin

    In the pop-up window, enter the URL for the website where you plan to install this Messenger chat plugin. Then enter the ref parameter you added above. When a user starts a live chat with your Messenger chat plugin, your bot will send users this message block containing the live chat plugin.

    ChatFuel configure customer chat plugin

    The code for this chat plugin is automatically generated for you, so click Copy to copy it to your clipboard. You'll then paste this code into the Header section of your WordPress site; see section #3 below for details.

    Advanced Hack: Customize Your Messenger Chat Widget

    Did you know that you can add a few lines to this code to further enhance your Messenger chat widget? Here's what the plugin you just created will look like:

    ChatFuel Messenger chat plugin example

    By adding some code, you can customize the chat plugin to:

    • Change the theme color to match your brand.
    • Show a different greeting for people logged into Facebook vs. those not logged into Facebook.

    To make these changes, paste the code generated from Chatfuel into a notepad or text editor. Look for the snippet of code in yellow below.

    ChatFuel Messenger chat plugin code

    Within this snippet, add the three bolded lines below:

    ChatFuel Messenger chat plugin code

    Replace #FFFFFF with the hex code of the color you want to use for the theme. (You can find hex color codes with a tool like ColorHexa.) Replace “Greeting Message” to modify the two greetings.

    For example, suppose you want to change the default Facebook blue color theme to green and change the default greeting message from “Hi! How can we help you?” to a call to action for your business. Here's the code you might add to your chat:

    ChatFuel Messenger chat plugin code

    The chat widget would now look like this:

    ChatFuel Messenger chat plugin customize

    #2: Set Up Messenger Chat on Your Website Using ManyChat

    To set up a Messenger live chat feature with ManyChat, log in and click the Growth Tools tab in the left sidebar. If you haven't previously used this tool, check out this video for details on how to sign up and build a simple bot with ManyChat.

    ManyChat Growth Tools tab

    Next, click the New Growth Tool button at the top of the page.

    Tools Resource Guide

    Looking for something to make your life easier?

    Discover the tools we recommend to drive engagement, save you time, and boost sales across your entire marketing funnel or business.

    Whether you need help planning content, organizing social posts, or developing your strategy, you’ll find something for every situation.

    FIND YOUR NEXT FAVORITE TOOL

    ManyChat New Growth Tool button

    In the window that slides out, click Customer Chat.

    ManyChat Customer Chat growth tool

    To keep things organized, rename this growth tool to “Live Chat” and then click the blue Save button.

    ManyChat rename growth tool

    Next, click Edit to edit the opt-in message. This is the message that users will receive when they click the chat widget to start a new chat conversation.

    ManyChat edit opt-in message

    Change the opt-in message text to something like “Hi! Thanks for dropping by. Did you have a question?”

    ManyChat edit opt-in message

    Click Publish at the top of the page and then click Live Chat to go back to growth tool.

    ManyChat Publish button

    Now click the blue Next button and decide where you want the chat widget to display. Leave these fields empty if you want the chat widget to appear on every page on your site.

    ManyChat Visibility settings

    If you want to change the color of the widget, enter a hex code or choose a color from the palette. Notice how the chat widget and the color of the user's message bubble change in the preview on the right.

    ManyChat select color

    ManyChat also lets you modify the greeting message for users who are logged into Facebook and for those who are logged out of Facebook.

    ManyChat greeting for logged in users

    Next, choose whether the chat widget should be displayed on mobile and/or desktop. Also, select how the customer chat widget should behave when a person sees it for the first time on your website.

    ManyChat Show on These Devices

    Now that you're done configuring the changes, toggle your widget from Draft to Active at the top-right corner of the page.

    ManyChat activate widget

    To install the Messenger chat widget on your website, click the blue Install JavaScript Snippet button.

    ManyChat Install JavaScript Snippet button

    Enter the website URL where you'll be installing this chat plugin and click Add. Then click Next.

    ManyChat Authorize Website

    ManyChat will automatically generate the code you need to paste into your website. Click Copy Code to Clipboard.

    ManyChat Copy Code to Clipboard

    #3: Install the Code on Your WordPress Site

    After you set up a Messenger chat feature using Chatfuel or ManyChat, the final step is to install the code on your website. If you use WordPress, navigate to your dashboard and click Plugins in the left-hand menu.

    WordPress Insert Heads and Footers plugin

    Then click the Add New button at the top of the page.

    WordPress Insert Heads and Footers plugin

    In the search box, search for the free Insert Headers and Footers plugin.

    WordPress Insert Heads and Footers plugin

    Click the button to install the plugin and then click it again to activate the plugin.

    WordPress Insert Heads and Footers plugin

    From the left sidebar, click Settings and choose Insert Headers and Footers.

    WordPress Insert Heads and Footers plugin

    Finally, paste the Messenger chat code into your script header and click Save.

    WordPress Insert Heads and Footers plugin

    If you refresh the page, you should now see the Messenger chat plugin appear on your site.

    Tip: If you use Leadpages, follow these steps to embed the widget:

    • Add the Leadpages URL to the list of authorized websites (ManyChat) or website domains (Chatfuel).
    • Then paste the HTML code into the head section tracking code box inside Leadpages.

    LeadPages Head Section Tracking Code

    Other Helpful Resources

    Chatfuel Customer Chat

    If you're building a Messenger bot using Chatfuel, you can also quickly install the chat widget on your WordPress site with the help of the Chatfuel Customer Chat plugin.

    Install the Facebook Customer Chat WordPress plugin.

    Chatfuel and Master of Code (a tech firm that has built Messenger chatbots for the likes of World Surfing League, Online News Association, and other global brands) developed this plugin. You can download this free plugin and find the installation instructions on this WordPress page.

    Messenger Inbox

    To reply to users who have messaged your business, you can either use the Inbox link on your Facebook page or download the official Facebook Pages Manager app on iOS or Android.

    Use the Inbox tab on your Facebook page to respond to messages.

    If you're using ManyChat, you can also reply to users from the Live Chat tab. ManyChat doesn't have an app but their live chat page looks great on a mobile device.

    Reply to users from the Live Chat tab in ManyChat.

    Customer Chat Plugin Documentation

    To learn more about customizing the customer chat plugin (if you're a little more tech-savvy), check out the official Facebook documentation for details.

    Conclusion

    By offering your website visitors a convenient way to communicate with your business through the Messenger live chat plugin, you'll be able to:

    • Quickly address any concerns about your product or service.
    • Answer questions from potential buyers and clients.
    • Provide visitors with more relevant and helpful information.

    You'll also be doing this on Messenger, a free platform that's currently used by over 1.3 billion people, with over 2 billion messages sent between people and businesses each month.

    What do you think? Do you have a Messenger bot? Are you thinking about installing the Messenger live chat plugin on your website? Please share your thoughts in the comments below.

    Get Your FREE Course: Web3 for Beginners

    Web 3 for Beginners

    Curious about Web3, but don't know where to start or who to trust?

    Introducing Web3 for Beginners, a course taught by Michael Stelzner, the founder of Social Media Examiner.

    Learn the basics of Web3 and apply it to your business with this FREE comprehensive course.


    CLICK HERE TO GET FREE ACCESS

    Tags: Facebook, Facebook Chat, Facebook Tools

    About the authorDana Tran

    Dana Tran is the co-founder of CodelessBot.com, a collection of plugins and templates designed to help non-techies enhance their existing Messenger Bot without any coding.
    Other posts by Dana Tran »

    Get Social Media Examiner’s Future Articles in Your Inbox!

    Get our latest articles delivered to your email inbox and get the FREE Social Media Marketing Industry Report (39 pages, 50+ charts)!

    Industry Report Cover

    Worth Exploring:

    Facebook

    Marketing Help Explore More →

    Instagram

    Marketing Help Explore More →

    YouTube

    Marketing Help Explore More →

    Linkedin

    Marketing Help Explore More →

    Web3

    Marketing Help Explore More →

    Social Media Marketing Industry Report

    Get Free Report →

    Social Marketing Trends

    The data you've been missing!

    Need a new plan? Find out how thousands of marketers plan to change their social marketing activities in our 14th annual Social Media Marketing Industry Report. This 39-page report reveals what marketers have planned for their organic social activities, video marketing, social ads, and more. Get this free report now and never miss another great article from Social Media Examiner.

    Enter your email to get
    our free report:


    Footer

    Your Guide to the Social Media Jungle
    Copyright © 2023 Social Media Examiner®
    All Rights Reserved. Terms of Use | Privacy Policy.

    Helpful Links

    • About us
    • Our content via email
    • Our podcasts
    • Our YouTube channel
    • Our live show
    • Our industry report
    • Sponsorship opportunities
    • RSS
    • Accessibility