Facebook chat on your website

We have used several chat clients like LuckyOrange, Drift, Chatlio, and tawk.to for our client’s websites. Recently though what we’ve been doing is dropping those clients and utilizing Facebook Messenger. The price is right, free, and gives the same chat functionality. It also makes it easy for us, as social media managers, to respond to our client’s customer’s even faster. I am going to cover in detail how you can do this (or ask us and we’ll do it for you for our Business Improvement Plan customers).

1. Log into Facebook
2. Go to your Facebook page
3. Click on Settings
4. Click on “Messenger Platform”
5. Under “Whitelisted Domains” remove the same domains and add your website domains. If you support both www and non-www then put both in their.
6. Click Setup
   1. Click Next
   2. Set the “Welcome text” (or leave “as is”)
   3. Click Next
   4. Set the Response Time of how often you respond
   5. Set any custom colors (make it match your company brand standards)
   6. Click Next
   7. Copy the code or choose “Email instructions to your developers” and enter the person’s email address.
   8. Click Finish
   9. Click Done

Custom Settings

As with anything on the internet when built well you have options available to you. You don’t have a ton of options like other packages but what you get is decent. These are:

• theme_color – Optional. The color to use as a theme for the plugin, including the background color of the customer chat plugin icon and the background color of any messages sent by users. Supports any hexadecimal color code with a leading number sign (e.g. #0084FF), except white. We highly recommend you choose a color that has a high contrast to white.
• logged_in_greeting – Optional. The greeting text that will be displayed if the user is currently logged in to Facebook. Maximum 80 characters.
• logged_out_greeting – Optional. The greeting text that will be displayed if the user is currently not logged in to Facebook. Maximum 80 characters.
• greeting_dialog_display – Optional. Sets how the greeting dialog will be displayed. The following values are supported:
  • show: The greeting dialog is shown and remains open on desktop and mobile after the number of seconds set by the greeting_dialog_delay attribute.
  • hide: The greeting dialog is hidden until a user clicks on the plugin on desktop and mobile.
  • fade: The greeting dialog is shown briefly after the number of seconds set by the greeting_dialog_delay attribute, then fades away and is hidden on desktop. The dialog is hidden on mobile.
• The plugin setting defaults to show on desktop and hide on mobile.
• greeting_dialog_delay – Optional. Sets the number of seconds of delay before the greeting dialog is shown after the plugin is loaded. This can be used to customize when you want the greeting dialog to appear.
• minimized - Deprecation Notice – This attribute is now deprecated. Please use greeting_dialog_display to customize your plugin instead. The greeting_dialog_delay attribute will take precedence of the minimized attribute.
• ref – Optional. You may pass an optional ref parameter if you wish to include additional context to be passed back in the webhook event. This can be used for many purposes, such as tracking which page the user started the conversation on, directing the user to specific content or features available within the bot, or tying a Messenger user to a session or account on the website.

Notes

• The chat bot requires HTTPS (SSL / TLS) which you should have already and if you don’t then you should get it immediately.
• Cons over specific chat programs
  • Just chat, no bells and whistles like heat maps, screen sharing, etc.
  • It will add roughly 1-to-2-seconds to your webpage load time
  • Being this is a Facebook product you could see competitor ads eventually in this
  • You only have limited control over the look-and-feel
  • Requires you have a Facebook Business Page (which isn’t a problem for most companies)
• Pros
  • You can add third-party chat programs which will allow you to add some cool value. Examples, include:
    • Answer specific questions like “Do you take reservations”, “What is today’s special”, etc.
    • These types of items do cost additional not only in monthly fees but overall setup.
  • You can add some level of custom responses within the default messenger
  • The messages tie directly in with your Facebook Page message box
  • If you have Facebook Messenger on your phone you can quickly reply
  • Consolidates your chat into Facebook for both Facebook and your website
  • Is already familiar with many of your visitors
  • You can add to multiple domains to a centralize Inbox (typically you wouldn’t do that but you could if you have said a regular website page and another that was an eCommerce page for the same company)
  • Works even if someone has a popup blocker on (at least today)