1. Home
  2. Capture
  3. Send To Messenger Button

Send To Messenger Button

The Send To Messenger Button is an entry-point for people to your chatbot. Clicking on the Send To Messenger button allows them to subscribe to your bot. You embed these button and/or use them with Clever Messenger’s overlays. In this article you discover what’s possible with Send To Messenger Buttons and Clever Messenger’s overlays.

Send To Messenger Button Overview

With the Send To Messenger Button feature you can setup multiple (and various types of) overlays/embeds for your website(s) and pages. It enables you to capture new subscribers and directly send a Flow when people become a subscriber.

Send To Messenger Button Library

You’re adventure starts with the Send To Messenger Library. All your Send to Messenger overlays and/or embeds are stored in the table at Capture > Send to Messenger.

The table will be empty if it’s your first time setting up a Send To Messenger Button. In the next section you’ll get an overview of how the Send to Messenger Library works.

Library Explained

In this section of the article you find what you can expect on the Send to Messenger Library page. Respectively, Name, Actions, Drop-down, Search, Pagination, Bulk Actions and more.

Name

  • This is the Name you give to your widget. It’s recommended to use a Name that helps you to find your Widget back easily.

Actions

  • These are the Actions you can perform on an individual widget, currently: Edit, Rename and Delete.

  • You can change the number of widgets/embed you want to appear per page by clicking the drop down in the right-upper corner. You can choose to show either 10, 25, 50 or 100 records per page.

  • In the right-upper corner you can also use the search field. Search terms are applied to all data in the table.

Next/Previous Page

  • In the bottom right corner you can view the next page or previous page by clicking “next” or “previous”. This allows you to navigate through all your records.

How to perform Bulk Actions?

You can perform Bulk Actions by clicking the check boxes – of the records you want to perform Bulk Actions on – in the first column. From there you perform Bulk Actions like “Delete”, by clicking the Bulk Actions button in the right-upper corner.

Create New

Creating a new Send to Messenger overlay/embed is easy:

  • Simply click on “Create New”.
  • Please see the image below for your reference:

  • You’ll be asked to give your overlay/embed a name
    • Enter a name for your widget and click “OK”.
    • Please see the image below for your reference:

  • After clicking “OK” you’ll be redirected to the Send to Messenger builder.

Setting Up Your Overlay Widget(s)

In this section you discover what you can do with the Overlay Widgets.

Important Tip about the next Section

Note that in the next examples the Slide-in Type is used. This because it holds all the settings you can specify. Meaning that inside the app, some settings are purposely left out in certain Types as they simply don’t apply.

Type

If you’re setting up an Overlay Widget the Type tab is where you choose the type of the widget you want to add to your website(s) and pages.

Currently there are 4 types of Overlay Widgets:

  • Bar
  • Slide-in
  • Modal Window
  • Take-over

Selecting a Type is easy:

  • Simply click on the Type you want to create.

  • The Preview part automatically changes so you can see how it looks
  • The other tabs appear, and you now can go ahead configure your overlay/embed

Editing your Overlay Widget

In this section you discover how you Edit the actual Overlay Widget

The Preview is also where you edit your Headline, Description, and where you add an Image or GIF if you desire to do so.

  • To edit the headline simply click on the headline and start typing.
  • To edit the description simply click on the description and start typing.
  • To add an image simply click on “Add an image” and upload or choose an existing image.

Settings

In this section you discover what you can do on the Settings tab.

Language

The language the Send to Messenger button will be displayed in. This loads the Facebook SDK for your preferred language the button should show.

  • In order to change the language, simply select a language from the drop-down
    • On changing the language, the preview on the right automatically updates.

Tags

The ability to add Tags.

  • Whenever a person clicks on the Send to Messenger button and becomes a subscriber, any Tags applied in this section will be applied to the subscriber.

Additionally to static tags you set inside the builder, you can set a dynamic tag inside your landing page URL as a GET parameter called “clever_tag”.

Example:

  1. You set up a new Send to Messenger button inside Clever Messenger.
  2. You install it on your landing page
    1. e.g https://yourdomain.com
  3. You add the clever_tag GET parameter to your URL
    1. e.g. https://yourdomain.com/?clever_tag=dynamicTag
  4.  All subscribers that opt-in through your landing page will have the dynamic tag set under clever_tag, it’s  automatically added to your subscriber.
Important Tip about Dynamic Clever Tag

You can only add one dynamic tag per URL.

URL parameters to Custom Fields

The ability to add Custom Fields.

  • Whenever a person clicks on the Send to Messenger button and becomes a subscriber, any Custom Fields applied in this section will be applied to the subscriber.

Any field specified in the Custom Fields input inside the builder will be fetched from your URL, and a Custom Field will be automatically created with the value specified in your GET url parameter.

Example: 

  1. You set up a new Send to Messenger button inside Clever Messenger.
  2. In the Custom Field input box you specify the values “email, points”.
  3. You install the widget on your landing page
    1. e.g https://yourdomain.com.
  4. You add the fields you specified as Custom Field(s) as GET parameter to your URL:
    1. e.g. https://yourdomain.com/[email protected]&points=100
  5. All subscribers that opt-in through your landing page will have the Custom Fields “email” set to “[email protected]” and “points” set to 100 inside Clever Messenger inside their respective User Profiles.
Important Tip about Custom Fields

You can have one (or more fields) as Custom Fields. If more than one, they should be separated by commas. E.g. “email, points, carrots, beans”

Display

In the first drop-down, called ‘Widget Displays’: you can select when you want the widget to display on your pages. There’s a couple of options allowing you to control how you want to display your widget.

  • Immediately
  • Exit-intent
  • When Scrolled (%)
  • When Scrolled to Element (CSS Selector)
  • After a number seconds

In the second drop-down, called ‘Show to same visitor again’: you choose what the behavior should be for repeat visitors. There’s a couple of options allowing you to control how you want to display your widget for repeat visitors.

  • At every visit
  • Never
  • After hours have passed
  • After days have passed

In the third drop-down, called ‘After a visitor closed the widget, show again’: you choose what the behavior should be for visitors who chose to close the widget. There’s a couple of options allowing you to control how you want to display your widget for visitors that have closed the widget at an earlier visit.

  • At every visit
  • Never
  • After hours have passed
  • After days have passed

In the section called ‘Display widget on’: you choose on which device type you want your to widget appear. There’s a couple of options to choose from.

  • Mobile and desktop
  • Desktop only
  • Mobile only

Looks

In this section you discover what you can do on the Looks tab.

Lay-out

Under Lay-out you’ve the option to choose where the image (if you’d like to add one) is going to appear.

There are a couple of options to choose from:

  • Image above headline
  • Image above description
  • Image below description

Colors

This is where you further customize the look and feel of your overlay/embed.

There are a couple of colors you can change:

  • Background Color
  • Headline Text Color
  • Description Text Color

Send Button

This is where you specify how the Send to Messenger button inside your overlay/embed looks like. You can choose between 2 colors and 3 button sizes:

Button Colors:

  • Blue
  • White

Button Sizes:

  • Standard
  • Large
  • Extra Large

On selecting a button color and/or button size from the drop-down(s) the preview on the right will automatically get updated.

Submitted

In this section you discover what you can do on the Submitted tab.

Flows after submission

This is Flow or Message you want to send out after a person has clicked the button (and became a subscriber while doing so).

  • When you’ve selected a Flow or Message, click “Open Preview” to preview the Flow or Message you’ve selected.

After button is clicked

Here you choose what needs to happen after clicking on the Send to Messenger button.

  • Update the widget
    • This basically allows you to show a ‘Thank You’ Message. It updates the widget with your new message indicating a successful subscription.
  • Go to different page
    • This basically functions as a redirect. When the Send to Messenger button is clicked, it forward them to the URL you specify.

Lay-out

If you’ve chosen to go with “Update the widget”, you’ve the option to choose where the image (if you’d like to add one) is going to appear on the Submitted state.

There are a couple of options to choose from:

  • Image above headline
  • Image above description
  • Image below description

You can also choose the enable or disable the description.

Colors

If you’ve chosen to go with “Update the widget”, this is where you further customize the look and feel of your overlay/embed on the Submitted state.

There are a couple of colors you can change:

  • Background Color
  • Headline Text Color
  • Description Text Color

View button (when “Update widget” is selected)

When “Update Widget” is selected you can also customize the View Button

There are a couple of things you can change:

  • Background Color
  • Text Color
  • Button Text

The button redirects to your chatbot on Messenger. It’s hard-coded to your m.me link

Redirect (when “Go to a different page” is selected)

When “Go to different page” is selected you can specify the URL you want to send visitors to after they’ve clicked the Send to Messenger button

There are a couple of things you can specify:

  • Specify the actual URL
    • Make sure you include http(s)!
  • Specify if you want it to open in a new tab or the current tab

Install

In this section you discover what you can do on the Install tab.

You’re about done with your widget, now it’s simply time to install it on your website(s) and pages.

Code Snippet

After you’re satisfied with your creation, or at any time you want to Save progress, you simply click “Save” in the upper-right corner. After you’ve clicked on “Save”, you’ll see a new field in the Install tab which holds the snippet of code that will display your widget.

  • Simply copy the snippet of code and place it anywhere on the page you want to show it on, preferably right before the closing body tag – e.g. </body>
Did you know?

You can have multiple Send To Messenger overlays/embeds on your website(s) and pages. Also, this works really well with other Clever Messenger widgets. E.g. If you want to have a Checkbox Plugin AND Customer Chat along side your overlays and embeds, you can!

Domain Whitelisting

In order to use these type of widgets and/or embeds on your website(s) and pages, you need to Whitelist Your Domain. This makes sure these type of overlays and/or embeds are only functioning on the Domains you choose. You may even see it as a security precaution, making sure you’re in total control of where you want to display these widgets and/or embeds.

The Domain Whitelisting feature can be found under Configure > Domain Whitelisting. Read the article on Domain Whitelisting here.

How to Access Send to Messenger

You access Send to Messenger overlays/embed on Page Level. You click on the Capture Icon (magnet) and a drop-down appears. Click on Send to Messenger to navigate to the Send To Messenger Library.


This concludes the article “Send To Messenger Button”, a brief summary of what you can find on the Send To Messenger Button Page. As new Send To Messenger features come available, we’ll update this article accordingly.

Updated on June 21, 2018

Was this article helpful?

Related Articles