If you are based in Auckland you may qualify for the Activate Auckland Fund towards advice or a new website >>

How To Add Facebook Messenger To Your Website

Did you know that Facebook Messenger is expected to grow to 2.4 billion users by 2021?

You can now integrate your Messenger experience directly into your website.

The Messenger Customer Chat plugin allows you to have a live conversation with your site visitors. This allows your website visitors and customers to interact with your business anytime with the same personalized, rich-media experience they get in Facebook Messenger.

The plugin is very easy to use. It is one of the few free tools available and has the benefit of being simple and easy to install on WordPress. 

Besides being a low-cost live chat plugin, it is a fantastic tool for improving conversions on your website. All messages appear in your Facebook messenger system. You will be able to access them and respond to them easily.

 

How To Install The Facebook Customer Chat Plugin (from Facebook’s help desk)

To add the customer chat plugin on your website, you can either use the setup tool or set it up using the developer steps.

Option 1: Setup Tool

For Page Admins, the Page settings provide an easy setup tool for customizing your customer chat plugin. To use the setup tool, do the following:

  1. Go to Page Settings > Advanced Messaging
  2. In the ‘Customer Chat Plugin’ section, click the ‘Setup’ button.
  3. Customize the greeting message, theme colour, displayed response time, and whitelist the domain of your website.
  4. On completion, the setup tool automatically generates the code snippets that you can copy and paste to add the customer chat plugin on your webpage.


Option 2: Developer Steps

To include the customer chat plugin on your webpage, do the following:

  1. Whitelist the domain of your website
    For security reasons, the plugin will only render when loaded on a domain that you have whitelisted.
    Domains must meet the following requirements to be whitelisted:
    – Served over HTTPS
    – Use a fully qualified domain name, such as https://www.messenger.com/. IP addresses and localhost are not supported for whitelisting.

     

  2. Include the plugin on your webpage
    To add the plugin to your webpage, include a div with the following attributes in your HTML:
    <div class=”fb-customerchat” page_id=”<PAGE_ID>”></div>
    By default, the greeting dialogue will be shown on desktop and mobile.
    To customise the greeting dialogue behaviour, you can use the greeting_dialog_display and ‘greeting_dialog_delay’ attributes.

     

  3. Optional. Handle the messaging_postbacks event for new conversations
    If your bot has the ‘get started’ button set up and a user starts a conversation via the plugin by clicking the ‘get started button’, we will send a ‘messaging_postbacks webhook event’ to your webhook.
    If the ref attribute is set in the include for the customer chat plugin, it will be included in the postback event.

    Optional. Handle the messaging_referrals event for existing conversations
    For existing conversations, if the ref attribute is set in the include for the customer chat plugin, a messaging_referrals webhook event will be sent to your webhook when the conversation is continued via the plugin.
    The ref can be any string and can be used for a variety of purposes. For example, you could use it to keep track of which customers have engaged with your business via the plugin.

 

Here are the reasons why a Facebook Messenger widget is better than live chat

  1. If the website visitor or user is already logged in to their Facebook account, they will be able to start chatting with your bot right away. If they are not logged in, a default welcome message will be displayed, and they will be prompted to log in or create a new Facebook account.
  2. If your Page has age or country restrictions set in Page settings, the customer chat plugin will not render for users who are not logged into their Facebook account when they visit your website.
  3. All your conversations are saved in Facebook Inbox. The greeting dialogue state is cached on the browser and persists even when the browser is closed and reopened. You can pick up a conversation with a user who chatted with you even if they left your website. This plugin will always default to the last state the user left the plugin based on the browser cache.
  4. The greeting dialogue will be shown on desktop and mobile. Users may click the close button to minimize the dialogue or you can override the request default with your own display preferences.
  5. You can detect the message’s origin. It may be necessary to determine whether a user is engaging with your business using the customer chat plugin. 
  6. You can use Facebook Messenger Plugin as a new communication channel with your audience.

 

Having trouble getting the plugin to show properly? Try these tips below

  1. If you see a console error like “Refused to display *** in a frame because an ancestor violates the following Content Security Policy directive: ***”, check that the domain of the page in which the plugin is being rendered on has been whitelisted. Also, make sure you didn’t set the Referrer-Policy header to no-referrer.
  2. The Firefox Facebook Container Add-On prevents the plugin from showing up. Remove the add on if you want the plugin to render.
  3. Firefox desktop private browsers (version 63 and above) and Firefox mobile browsers block content tracking by default which will prevent the plugin from rendering. Turn off content blocking (click the grey shield in the search bar) to see the plugin render.
  4. Do your research or read the recent reviews and support threads. Facebook may have unannounced changes and may break third-party plugins.

If you would like help to install this plugin, reach out and the friendly team at Virtual Innovation will give you a hand.

 

Book a FREE Consultation

Is your website not living up to the dream?

You’re not alone. But if you don’t change anything – nothing will change.
If you have even the slightest interest in improving – lock in a 15-Minute
clarity call with Stephen to see how we can help.

5 Things To Remember When Writing A Blog Post

Today, we will be talking about things that will help you get sales digitally. We're going to be looking at conversion rates on websites, the things you need on websites, articles, blogs, content and podcasting. Many different things that you can do to grow your...

Content Planning for Social Media, Blogs & Newsletters – How to do it

Have you ever felt overwhelmed with marketing? You are not alone. There is a lot you could do with content marketing, but people usually…

Explainer Videos = Earning More $$$

How to stay on budget, on time and actually get people to use the software! Are you thinking about developing a custom piece of software? Where do you start?

Creating Inclusive Websites That Get Results

Stephen was recently asked by the team at Digital Boost to do a LinkedIn Live. In this talk, Stephen focuses on the need to plan for the diversity that comes to a website. It is not too long, but well worth making a coffee and having a watch. If you would like someone...

Simple Structure For Social Media Videos

Have time on your hands at the moment? Thinking about starting to create content for your audience? More than ever 3 key things are happening: People have more time to think & create (as we are stuck at home) Social media use is up a ridiculous amount as people...

Top 3 Advantages To Use Mailchimp

MailChimp is a smart email marketing tool for start-ups and small businesses that want to enhance their presence and effectively reach their clients and prospective customers.  It is a winning platform that combines valuable price, unbeatable user-friendly features,...

Issac Newton, Social Isolation & Genius

The world is a bit mad at the moment, people are still in a bit of shock about how the world will look in 12 months but I wanted to share a story that I gave me some hope. Who knows what will be discovered with people having so much time and space to think, dream and...

Otter: The AI-Powered Work Assistant You Need

Are you looking for a way to make meetings more productive and efficient? Recording and transcribing audio meetings or interviews is a huge pain point for sales teams, marketers, recruiters and anyone who needs to capture their conversations. Some applications are...

Best Booking System Full Stop – GetTimely.com

>> Click Here To Get A Free Trial In the new year, we will be doing a full blog post on the benefits of GetTimely. We get the question of should I build my booking system into my website or not. Our answer is no. Websites should link to your system, but not be...

5 Tips To Remember When Creating A Lead Magnet

Why Lead Magnets Still Work in 2021 The first question you may ask is what is a lead magnet? The answer is... Lead Magnets are like asking if you can buy someone a drink on a first date. The person looking at you goes 'Ok there is not too much commitment in that and...