1. This article will help you set up the “Customer Chat” growth tool for your website and convert your visitors into Messenger bot subscribers. Using ManyChat, setting up this tool and expanding your audience is very easy, but the best part is - you don't have to deal with programming issues.
2. This growth tool can be used on any platform that supports a custom section. It's very easy to create: insert the code - customize the widget in ManyChat - activate it.
The next time you need to make any changes to the widget, manage it directly in your ManyChat account. Customize it as needed, disable and re-enable it, or even choose specific pages to display the widget.
3. Create the “Customer Chat” growth tool #
4. Go to the “Growth Tools” tab and click “+ New Growth Tool”.
5. Scroll down and select “Customer Chat” from the widget list.
“6. ”Customer Chat" has 2 tabs:
Opt-in action - The message that users will receive after clicking the button.
Set up 7. - Here you can get the code, authorize the website, and customize some useful settings.
8. Change the name of the “Growth Tool” so you don't miss it in the list, and move to the “Opt-in” message.
9. First - you must create an “Opt-in” message, or you can use an existing message.
10. 1. Click “Edit” to start working in the Builder to create a new “Opt-in Flow”.
11. The process is almost the same for creating any other ManyChat message. But please note that according to the new Facebook rules, a user only becomes a subscriber when they respond to content by clicking a button or sending a manually typed message. Therefore, ManyChat cannot directly subscribe users to the “Opt-in” sequence. Please add at least one button to your “Opt-in message” and operate the button as needed to subscribe to the sequence.
12. Or use the second option:
13. 2. Click “Replace” and then select an existing flow.
14. Be careful! Selecting a flow does not copy it, but simply attaches it to the new point.
15. When you edit the flow, it will change at each attached point. (For example, if used as a message in multiple sequences). To edit separately, copy the flow and attach the copy.
Once you have completed the select join message, you can open the “Settings” tab.
16. Install the code on your website #
Click “Install JavaScript” and add your website here:
Then click “Next” and copy the JS code. You need to place it in the of every page on your website.
17. Click “Done” and then select the visibility settings.
18. By default,19. the overlay widget will be displayed on all websites where the summary is installed.All websites ofAll PagesOn.
you can use it“Show only on these pages”Set up to specify the exact pages where the widget should be displayed.
If using“Hide on these pages”setting, you can also hide the widget so it does not appear on certain pageson.
You can even mix these settings to show the widget only on a specific site while hiding it on certain pages of that site.
It's time to customize the appearance of the customer chat!
Here, you can change the color of the chat bubble to match your website style.
Set greetings for logged-in users and greetings for logged-out users to create a better experience for your customers. You can add a bit of creativity here :)
Next are some settings about when and on what devices the “customer chat” appears. Perhaps you want the widget to be visible only on desktop, or you need a delay before the chat bubble pops up - in this section, you can choose the options that best suit your website.
Note:Don't forget to save changes and enable the widget.
Remove the ManyChat logo from the growth tool and change localization in settings
Pro ManyChat Pro users can remove the logo from their growth tools in account settings:
Now you're ready to grow! Hope this helps!
Note: If you are using the Facebook SDK, make sure to replace sdk.js with sdk/xfbml.customerchat.js - starting January 8, 2019, it is necessary to use this library to render the customer chat plugin on your website.
Additionally, there is currently no [x] button to close the popup:
To close it, you need to click on the chat bubble. You can still close the chat window in the usual way:
