ManyChat

Embeddable Widgets

Button and Box Growth Tools. What are they? How to set them up on your website to increase your subscribers base?


Honestly, they are my favorite among Growth Tool widgets — they can be embedded almost everywhere and convert your website/blog/store visitors into your Facebook Messenger subscribers.

How Do They Work?

Create the Button or the Box widget, set up its style to match your website appearance and place it wherever you want. Use an engaging headline to make your visitors interact with it and redirect them to Messenger. You can deliver a special message to start a conversation with your audience which would subscribe them to your bot and any Sequence you choose.


Button Growth Tool inside a blog post.


How Can They Be Used? Just an Example

Imagine you have an upcoming event which is announced on your website or blog. You can insert one of the embeddable widgets in your post that will redirect the visitors right to your bot and start a conversations with them. You can segment and track your participants, send them announcements, instructions, and reminders about this event. As soon as they become your bot subscribers, you will be able to communicate with them (you can send them Broadcasts, subscribe them to Sequences and invite them to join relevant events in the future).


Button and Box Widgets. What is the Difference?

When using the Button Growth Tool, you will be able to customize its size, color and checkbox position (if you use the Checkbox option, you will be able to edit the Button text). Using a Box widget allows you to place the Button in a customizable container, add a Headline, Description and even an Image. 

Button and Box Widgets

How To Set Them Up?

Button and Box Growth Tools have 4 tabs:




Initial State  this is how users see your widget for the first time.
Submitted State — widget's appearance after a user clicks the button. It can display a custom message or redirect the user to another URL.
Opt-In Actions — messages the user receives after they click the button.
Setup — provides the widget code for your website.


Initial State

Set up your widget here. You'll be able to see a preview during the process. I will not dig into the details, like customizing the Button colors and its size, it's pretty obvious. But here is something you need to know about Button Type:

  • With Checkbox option allows you to create a custom button text (Send to Messenger checkbox appears below) and choose a Button color. 
  • Send to Messenger removes the checkbox, but in this case, it's not possible to edit the button's title. You can pick one of two Button colors for that option — Blue and White.

NOTE: When somebody clicks the button and gets the opt-in message from the bot, they have to reply to this message or click a reply button/quick reply in order to become a subscriber!



Box widget has more options, it allows you to customize the container and its contents: Headline, Description, Image.



Submitted State

Here you can set up your widget's appearance after a user clicked the button. This will make them sure they are on the right way. You can also provide additional information in the Box widget: announcement, reminder or further instructions.

Submitted state of Button and Box widgets


For both of these widgets, you can set up a Redirect to URL option that will send your subscribers to your website or any other URL you provide.


Opt-In Actions

Customize a message that will be sent to every user who clicked the button. You can create a Messages Flow with Buttons and Quick Replies and subscribe your audience to a particular Sequence.


  


Setup

Follow these 3 steps to install the Growth Tool on your website. Go to Setup Tab and do the following:


1. Authorize your website. 

Insert your website URL in Add New Website field, you'll be able to see all of them in Authorized Websites list.



2. Install ManyChat Snippet. 

This code allows ManyChat to display opt-in forms on your website and track subscribers' activity.



Copy the code to a clipboard and place it into the <head> of every page of your website. If you have a Wordpress site, you can install Insert Headers and Footers Plugin that allow you to manage your <head> scripts.



3. Embed your Widget.

Embed the code (you will find it right in your Setup Tab) into your page where you want the widget to appear.


Removing ManyChat logo from Box Growth Tool

Pro ManyChat users can remove the logo from their Growth Tools in the account settings:


Easy To Go!

Whether you use a corporate website or a personal blog, promotion landing page or any website constructor, you'll be able to insert the Button or Box widgets and convert your website visitors into your bot subscribers with just one click.

And here is how it works.


Good luck!