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 buttons and/or use them with Clepher’s overlays. In this article, you discover what’s possible with Send To Messenger Buttons and Clepher’s overlays.

Here's a short video on how the Send To Messenger Button works:

We hope the video sheds some light on the Send to Messenger feature. If that went a bit too fast for your taste, please see the rest of the article about the Send to Messenger Button Features.

Send To Messenger Button Features

With the Send To Messenger Button feature, you can set up 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.

Open

Send To Messenger Button Overview

Your 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. 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. 

Open

1. 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.

2. Actions

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

3. Drop Down Menu

• 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.

4. Search

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

5. 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.

Duplicate Feature Explained

The duplicate feature allows you to automatically duplicate the widget of your choice. It also adds "Copy of" in front of the name of your original widget. This indicates it's is a copy of the original. You can obviously use Action > Rename to name it to whatever you like. You may also perform this action in Customer Chat and Checkbox widgets. Clepher is the only chatbot builder and marketing suite allowing for multiple Capture Tools (Growth Tools if you will) on one singular page!

Open

How to perform Bulk Actions?

• You can perform Bulk Actions by clicking the checkboxes – 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.

Open

Create New

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

• Simply click on “Create New”.

Open

• You’ll be asked to give your overlay/embed a name

• Enter a name for your widget and click “Confirm”.

Open

• After clicking “Confirm” 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.

Types

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. By default the Type tab opens and the Top Bar is already activated. 

Open

Currently, there are 4 types of Overlay Widgets:

• Bar

• Slide-in

• Modal Window

• Take-over

And, 1 types of Embeddable Widget:

• Embeddable Button

Selecting a Type is easy:

• Simply click on the Type you want to create.

Open

• The Preview part automatically changes so you can see how it looks like.

Editing your Overlay Widget

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

Open

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.

Open

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

• 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 “Clepher_tag”.

Example:

1. You set up a new Send to Messenger button inside Clepher.

2. You install it on your landing page

   1. e.g https://yourdomain.com

3. You add the Clepher_tag GET parameter to your URL

   1. e.g. https://yourdomain.com/?Clepher_tag=dynamicTag

4.  All subscribers that opt-in through your landing page will have the dynamic tag set under Clepher_tag, it ’s automatically added to your subscriber.

URL parameters to Custom Fields

• 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 Clepher.

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=hello@yourdomain.com&points=100

5. All subscribers that opt-in through your landing page will have the Custom Fields “email” set to “hello@yourdomain.com” and “points” set to 100 inside Clepher inside their respective User Profiles.

Display

In the first drop-down, called ‘Widget Displays’: you can select when you want the widget to display on your pages. There are 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 of seconds

In the second drop-down, called ‘Show to the same visitor again’: you choose what the behavior should be for repeat visitors. There are 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 are 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 which device type you want your widget to appear. There are 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.

Open

Layout

Under Layout, you have 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 Colour

• Headline Text Colour

• Description Text Colour

Send Button

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

Button Colours:

• 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.

Open

Flows after submission

This is the 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 the 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 a different page

  • This basically functions as a redirect. When the Send to Messenger button is clicked, it forwards them to the URL you specify.

Layout

If you’ve chosen to go with “Update the widget”, you have 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 Colour

• Headline Text Colour

• Description Text Colour

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 Colour

• Text Colour

• 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 a 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 almost done with your widget, now it’s simply time to install it on your website(s) and pages.

Open

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>

Domain Whitelisting

In order to use these types of widgets and/or embeds on your website(s) and pages, you need to Whitelist Your Domain. This makes sure these types 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.