How to Add Facebook Live Chat to Your Shop

Facebook's Messenger is a powerful tool that in 2017 was used by 1.3 billion people! And now Facebook have added a 'Live Chat' function that you can install on your website. 

On Facebook's developer  section they state that:

"The customer chat plugin automatically loads recent chat history between the person and your business, meaning recent interactions with your business on messenger.com, in the Messenger app, or in the customer chat plugin on your website will be visible. 

This helps create a single experience for your customers, and enables you to continue the conversation even after they have left your webpage. No need to capture their information to follow up, just use the same conversation in Messenger."

We've previously mentioned the need for a live chat function on your online shop cannot be under-estimated; with 53% of customers saying they'd prefer to use online chat before calling a company for support. So, now we know we need it let's get on and start adding it.

Note: if people wish to chat with you they will be asked to login in to their Facebook account first. If they are on incognito mode or do not have a Facebook account then they will be unable to use this function. 


Step 1 - Initial Setup

Head over to your Shop's admin section and navigate to Settings > Facebook Chat and you'll see the screen shown below. 

PushCommerce Facebook Chat Section

As you can see PushCommerce needs your Facebook Page ID and you'll need to 'Whitelist' your domain with Facebook. These both ensure that you're talking to the right people at the right time on the right shop front. 


Step 2 - Facebook Page ID

Most Facebook pages will be able to find their Page ID really easily. Simply open a new tab and head over to Facebook, then select your page from the right hand-side of the screen. If you look at the URL of the page you will see an address similar to this:

Facebook Page ID

The numbers after the hyphen is your Facebook Page ID. 

It's worth noting that some Page's will only have their Page Name showing in both places. In which case you can find your Page ID by going to the 'About' section of your page and scrolling down. 

Facebook page about section

Simply copy and paste your ID number in to the relevant field in your Shop's admin area


Step 3 - Whitelisting Your Domain

Whitelisting is a jargon way of saying that we trust the website we're working on. In this instance we're telling Facebook that we're okay with this domain having access to our Messenger feature. 

This part requires Page Admin rights in order to Whitelist domains due to Facebook's user settings. 

Head back to Facebook and then select 'Settings' and 'Messenger Platform'. The 3rd section is listed as 'Whitelist Domains' and all we need to do is copy and paste your domain in to the box (if it isn't already there). 

Facebook whitelist domain box

Remember to hit that 'Save' button and we can move on to the next step. 


Step 4 - Customising the Chat Box

As we know branding s everything so to ensure you're remaining true to your brand we've added a colour picker function and custom welcome messages. 

Customising PushCommerce Chat

The colour picker will effect the colour of the Messenger icon to customers and also the background of your messages to your customer. You can select the colour from the colour picker or by entering the Hex code. 

Finally we need to add some custom Welcome messages. Note that the 'Logged Out Greeting' will have a message underneath it asking the customer to login to Facebook to enable Chat. The 'Logged In Greeting' will have the customer's name as per the example below from Facebook's support page. 

Facebook Chat Support Page

Once you're happy with the colour and messages hit the green 'Save' button and head to your shop front to give it a test run. 


If you're unsure about any of these steps feel free to get in touch with your Account Manager or the PushCommerce Support Team on our Live Chat or  email