This article will help you set up “overlay widgets” for your website and convert visitors into Messenger bot subscribers.
ManyChat provides a set of tools for increasing your audience, and the great thing is that you don't have to deal with programming - after inserting the code into your website, you can manage all overlay growth tools directly from your ManyChat account.
Overview #
Such widgets can be used on any platform that supports a custom section. They overlay the actual website content, so there’s no need to manually integrate them into the page content. It's that simple: 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.
To set up a new widget, go toGrowth Tools > Create New Growth Tool,and then select one of the following overlay widgets:
#
Each widget setup has 4 tabs:
#
Initial state - Set the appearance of the widget.
Submission state - Set the appearance after the visitor submits the button.
Opt-in action - Set the message that visitors will receive after interaction.
Set up - Authorize your website and copy the Widget code.
Appearance settings are also available for each “overlay” widget. They allow you to manage the widget's behavior on the website:
“When to show” - Allows you to set the conditions for displaying to visitors: immediately, scroll %, exit intent, after seconds, or even when scrolling to an element with a target ID.
Afterthe widgetis shown again to the same user - Allows you to hide the widget from the same visitor within the same time period.
If closed manually by the user, then show after - If you allow visitors to close this widget, you can set a delay time after which it will appear again.
Bar #
The bar widget appears at the top of the page, with an editable title and button title (if you choose the “ With checkbox ” button type). You can allow visitors to hide it (allow hiding bar) and manage its appearance settings:
It looks like this:
After visitors click the button, the widget will display as submitted. You can set the appearance of the “submitted status” on the second tab. This will ensure your visitors successfully interact with the widget and receive further instructions through “ Show new messages”options (or you can use the “ redirect to URL” option to redirect them to a specific URL):
Therefore, after your visitors interact with the Bar Widget, they will receive the following message and can check their Messenger with just one click. It looks like this:
Slide-in #
After the required time, this widget will slide in from the page edge. For this type of Widget, you can uploadImageand choose its position, enable/disabledescription,then selectslide placement.
The slide-in submitted status can also includeTitle、instructionswithImage. Here, you can changethe background color.Create some emphasis.
Modal #
The settings for this widget are the same as the “slide-in widget,” but it appears above the central shadow area of the page. It's hard to miss.
Modal window widget submission status.
Page takeover #
This widget completely covers your page content. Your visitors will never miss it, but use it cautiously to avoid annoying your customers—make sure they can close it and then rediscover your wonderful content.
Page takeover submission status with different background colors.
Choose engagement actions #
Here, you create a message for your widget that a user will receive after clicking the widget button. You can edit the existing message in the Bot content or replace it with another message (for example, a welcome message or opt-in message from other growth tools).
You can also add subscribers to a specific sequence by simply selecting one under the “opt-in message” settings.
set up #
Step A: Authorize your website. Insert your website domain and click add, it will appear in the “Authorized Websites” list.
Note: A maximum of 10 websites can be authorized per page, which will appear in the website list of each new growth tool.
Step B: Copy the code and paste it into the section of your website (in the same location as where you insert the Google Analytics script).
For example, if you are using WordPress, you can use “ Insert header and footer”Plugin to manage the
Step C: Use the “visibility settings” to select the webpage on which to display the widget.
After copying the code and adding it to your website, you can manage all widgets for authorized websites in ManyChat—add new widgets, switch between widget types, replace content, and activate or deactivate them as needed.
Remove the ManyChat logo from the growth tool
Pro ManyChat Pro users can remove the logo from their growth tools in account settings:
There is significant growth!
