How to add a Live Chat support button to your page

What is Live Chat?

Live chat is an online communication method, in which two people engage in a conversation via a messaging platform such as Messenger, or Google chat. Sent messages can include pictures, URLs, and files to boost productivity.

For any business, having live chat support is crucial, since not only does it allow you to reduce response time and increase customer satisfaction by solving their problems faster, but also gives you an edge over your competitors who do not have live chat.

In EcomSolid, the Facebook Messenger Live Chat add-on allows you to connect your Facebook Page’s inbox to your Shopify store, and let customers directly message you via Facebook Messenger right from your store when browsing through pages. The add-on’s key features are:

• Customers can continue the conversation via Facebook Messenger at any time, without having to re-open your website, since Facebook is required as the contact account.
• Helps increase response time and customer satisfaction: You can respond to inquiries in real-time, on any device.
• The add-on is built with responsive design in mind: Fully customizable with flexible repositioning.

We’ll go through the installation steps in the next sections.

Add the Facebook Messenger Live Chat add-on to your page

Step 1: Go to the EcomSolid Dashboard and enter the Theme Editor

Step 2: On the left sidebar in the Editor, select “Add Add-on”

Step 3: Search for “Facebook Messenger Live Chat”, hit “Add”.

Facebook Messenger Live Chat is a global add-on, and therefore it will work on your entire store instead of on separated pages.

Configure the add-on

You can access the add-on at any time by clicking on the Messenger icon in the Editor, or locate the add-on under the Add-Ons tab on the left sidebar.

Content tab

Page ID

This is where you enter your Facebook Page ID. When customers reach you, the incoming message will be sent to this page, allowing you to reply under your store’s name.

To set up Page ID correctly, follow the instructions below:

Whitelist your domain
Navigate to your Facebook Page > Setting > Advanced Messaging as admin/moderator. Under the Whitelisted domains section, type in both the HTTP:// and HTTPS:// variants of your domain to ensure it works for 100% of users. Then hit "Save".

Get your Page ID
Exit the Settings panel and click on the About tab on the left sidebar, under the Page section.

Scroll all the way down to the bottom of the page. Here, you can copy the Page ID under the More Info section, and paste it in the Page ID field in the EcomSolid Editor.

Greeting Message

Edit your automated greeting message in this field. This will be your first message to customers.

Auto Display

This option allows you to automatically popup the greeting message chat box right after page load.

The Auto Display option supports responsive design, meaning you can enable the chatbox to automatically open on suitable widescreen (Desktop, and Laptop), and at the same time minimize on mobile screens (Tablet and Mobile view) for a better shopping experience.

Design tab

The Design tab allows you to adjust the appearance of the Messenger icon.

Chat icon

Position: Choose to have the Messenger icon on the left or right bottom corner.

Margin

Left/Right (depending on current set position): Adjust the side margin in pixels using the slider or the box.

Bottom: Adjust the bottom margin in pixels using the slider or the box.

Theme Color

Pick a color for the Messenger icon using hex color code. You can also adjust the transparency

At any point, if you want to revert back to the original design, just hit the reset icon in the corresponding section.

When everything is in place, hit “Update Live” > “Yes, Update” to bring the changes to your front store!

For any further assistance you need, please contact our EcomSolid Support Team. We’re available via email or live chat.