This article will help you to set up the "Customer Chat" Growth Tool for your website and convert your visitors into Messenger bot subscribers. With ManyChat it is extremely easy to set this tool and grow your audience, but the best thing is - you don't have to deal with programming.
This Growth Tool can be used on any platform that supports customizing the <head> section. It is so easy to create: insert the code — customize your Widget in ManyChat — activate it.
Next time you need to make any changes to your Widget, manage it right in ManyChat account. Customize it as you want, disable and enable it back, and even select the particular pages where your Widget shows up.
Creating 'Customer Chat' Growth Tool
Go to "Growth Tools" tab and click '+NewGrowth Tool'.
Scroll down and choose the 'Customer Chat' from the list of your widgets.
'Customer Chat' has 2 tabs:
Opt-In Actions — messages user will receive after they click the button.
Setup — this is where you can get your code, authorize your websites and customize some helpful settings.
Change the name of your Growth Tool, so you don't miss it in the list, and move to the Opt-in message.
First - you have to create an Opt-in message, or you can use existing one.
1. Click 'Edit' to start working in a Builder to create a new Flow for opt-in message.
This process is almost the same for any other ManyChat message creation. But kindly note that by the new Facebook rules, a user becomes subscriber only when they reply something by clicking a button or sending a manually typed message. Due to that, ManyChat can’t subscribe a user to a Sequence on opt-in directly. Please add at least one button to your Opt-In Message and use an action on the button to subscribe to a Sequence, if needed.
Or use 2nd option:
2. Click 'Replace' and choose already existing flow.
Be careful! Selecting a flow doesn’t clone it, just attaches it to a new point.
When you edit the flow, it will change at every point where it is attached. (e.g. if it is used as a message in several Sequences). To edit separately, duplicate the flow and attach the copy.
Once the Opt-in Message is finished, you can open the 'Setup' tab.
Installing code to your Website
Then click 'Next' and copy the JS code. You need to place it into the <head> of every page of your website.
Click 'Finish' and choose your visibility settings.
By default, your overlay widgets are shown on all pages of all websites where your snippet is installed.
You can specify exact pages, where you want your widget to appear using the“Only show on these pages” settings.
You can also hide your widget from appearing on certain pages if you use the"Hide on these pages” settings.
You can even mix these settings to show widgets only on a certain website, but hide it from some pages of that website.
Now it's time to customize the way you Customer Chat will look!
Here you can change the color of the chat bubble to match the style of your website.
Set the Greeting message for logged in user and Greeting message for logged out user, to create a better experience for your customers. You can be a little creative here :)
Next are some setting for when and on what devices your 'Customer Chat' appears. Maybe you want your widget to only be visible on the desktop, or you need a chat bubble to pop-up after some delay - this is the section where you can choose the option that will suit your website best.
NOTE: Do not forget to save changes and enable your widget.
Removing ManyChat logo from the Growth Tools and changing Localization in Settings
Pro ManyChat users can remove the logo from their Growth Tools in the account settings:
And now you are all done and ready to grow! Hope this helps!
NOTE: If you use Facebook SDK, make sure to replace sdk.js with sdk/xfbml.customerchat.js - from January 8, 2019 it's necessary to use this library to render the customer chat plugin on your website.
Also, now there is no [x] button to close the chat window. To close it, you need to click the chat bubble.