Update: Facebook Chat it no longer available to add to your website. Facebook have removed this function through their end. You can checkout their guide here.
Facebook launched the Messenger customer chat plugin which allows people to interact with businesses directly on their websites. Facebook Messenger Live Chat can be embedded onto your website via an HTML code. This plugin loads recent chat history between the customer and your business on messenger.com, in the Messenger application, or in the customer chat plugin on your website, which means that you can continue interacting with customers even after they have left your website. It is a great live chat solution for your web pages. To get more information about this plugin, follow this link.
In this support guide, we will walk you through how to easily integrate the Facebook Customer Chat plugin to your website.
Something to Consider: We have recently found that having Facebook Live Chat enabled on your website can affect your Google pagespeed insights score so is something to consider when choosing which Live Chat you want to enable on your website. For other options check out our help guide here.
Set up Facebook Customer Chat
Step 1: Open your Facebook page
You need to have a Facebook page so you can add Facebook Customer Chat. If you don't have a Facebook page, create one here. If you already have one, login and open your Facebook page.
Step 2: Open Messaging under Page Settings
Click the Settings tab on your Facebook page and navigate to the Messaging section where you can start setting up the Messenger for your website.
Step 3: Go to the Add Messenger to your website section
Scroll down the page until you see the Add Messenger to your Website section. Click the Get Started button.
Step 4: Set up Customer chat language & greeting
A dialogue box will appear introducing the Customer chat plugin. It briefly explains what the customer chat plugin does. Click Next.
On the next page, you can change the default language and change the greeting that people will see before deciding to chat on your website. You will see a preview on the right of the page of how it will look like on your website. Click Next once you're done.
Step 5: Set up Customer chat appearance
After clicking Next, another page will be displayed where you can set the appearance (colour), alignment and automatic expand of the customer chat.
*Tip: Choose a colour that would match your brand or website.
Click the Next button once you're finished.
Step 6: Set your website domain names
Add your website domain names. Enter the domain name where you are going to embed the Facebook customer chat plugin. To ensure that it works for every user, make sure to type in both the HTTP:// and HTTPS:// variants of your domain name. Don't forget to click Save.
On Rocketspark you want this domain to be your Primary Domain name. Go to Dashboard -> Domain Names to see what your domain is. And make sure you add www in front of it. For example 'https://www.myprimarydomain.com'.
Step 7: Copy generated code
Facebook will give you an option on how to install the code. You can install the code by yourself or email the instructions to developers (in this case, it would be Rocketspark).
If you have chosen to email instructions to your developers, add recipient to support@rocketspark.com and we will add the plugin on your website for you. Just make sure you also email us to explain what website you're wanting this installed on :)
However, if you have chosen to install the code yourself, it is very easy to do. Just copy the code that was generated on the right side of the page.
Step 8: Log in to your Rocketspark dashboard
Login to your Rocketspark website dashboard. If you are not sure how you can log in to your account, click here.
Step 9: Go to Get Found Online (SEO) page
In the side navigation panel of your dashboard, click the Get Found Online (SEO) menu. If the side navigation panel is not open, click on the hamburger menu (three-line button) on the top left corner of your dashboard.
Step 10: Paste the Facebook Customer Chat snippet code
Scroll down the page, until you see the Additional tracking section. Paste the code in the Custom <body> tracking code text area and make sure you click the Save button.
Step 11: Test it out!
The Facebook chat will only appear on your website when you are logged out. Click Log out at the top right and visit your website on the domain name you have set in Step 6 above.