This article will help you to set up the Overlay Widgets for your website and convert your visitors into Messenger bot contacts.
ManyChat offers a set of tools for growing your audience and the cool thing is you don't have to deal with programming — once you insert the code on your website, you can manage all your Overlay Growth Tools right in your ManyChat account.
Overview
This type of Widgets can be used on any platform that supports customizing the
section. They overlay the actual website content so there is no need to integrate them manually into the page content. So easy: 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.
To set up a new Widget go to Growth Tools>Create New Growth Tool and select one of the following Overlay Widgets:
Each Widget setup has 4 tabs:
Initial State — set up your Widget appearance.
Submitted State — set up what it will looks like after your visitor submits the Button.
Opt-In Actions — set up the Message your visitors will get after they interact.
Setup — authorize your websites and copy the Widget code.
Appearance settings are also available for every Overlay Widget. They allow you to manage the Widget behavior on your website:
When Does It Display — allows you to set the condition when it's displayed to your visitors: Immediately, % scrolled, Exit Intent, seconds have passed or even when scrolling to an element with target ID.
Show Widget To The Same User Again After — allows you to hide the Widget from the same visitor for a desired period of time.
If Manually Closed By A User, Show After — if you allow your visitors closing this Widget, you can set up a delay after which it will appear again.
Bar
The Bar Widget appears at the top of your page with an editable Headline and Button Title (in case you choose "With checkbox" Button type). You can allow your visitors to hide it (Allow to hide bar) and manage its appearance settings:
This is what it looks like:
After your visitor clicks the Button, the Widget is displayed as submitted. You can set up the Submitted State appearance on the second tab. This will ensure your visitor successfully interacts with the Widget and gets further instructions with Show New Message option (or you can redirect them to a specific URL with Redirect to URL option):
So after your visitor interacts with Bar Widget, they get the following Message and can go check their Messenger with just one click. That is how it looks like:
Slide-In
This Widget slides in from the page border after a desired period of time. For this type of Widget, you can upload an Image and choose its position, enable/disable a Description and select the Slide In Placement.
Slide-In Submitted State can also contain Headline, Description and Image. Here you can change Background Color to create some accents.
Modal
This Widget has the same settings as Slide-In Widget, but it appears in the center of your page above the shadowed content. It's difficult to miss it.
Modal Widget Submitted State.
Page Takeover
This Widget completely overlays your page content. Your visitors will never miss it, but use it carefully, do not annoy your customers — make sure they can close it and get back to exploring your awesome content.
Page Takeover Submitted State with different Background Color.
Opt-In Actions
Here you create a Message for your Widget, the one user gets after they click the widget button. You can Edit an existing Message or Replace it with another one from your Bot Content (ex. Welcome Message or Opt-In Message from the other Growth Tool).
You can also add your contact to a particular Sequence, just select one below the Opt-In Message setup.
Setup
Step A: authorize your website. Insert your website domain and click Add, it will appear in the Authorized Websites list.
Note: you can authorize up to 10 websites per one Page, they will appear in the websites list for every new Growth Tool.
Step B: copy the code and paste it in
For example, if you are on WordPress, you can manage your
Step C: Choose web pages on which you want the widget to appear by using Visibility Settings.
Once you've copied that code and added it to your site, you can manage all the Widgets for your Authorized Websites in ManyChat — add new Widgets, switch between Widget types, replace the content, activate and deactivate them whenever you want.
Removing ManyChat logo from the Growth Tools
Pro ManyChat users can remove the logo from their Growth Tools in the account settings:
Have a great growth!