Builder > Rich messages

What are the available rich messages for my channel?

Depending on the channel your are using, you have the opportunity to use different type of rich messages.
Below is the compatibility table that will help you to pick the right messages for your targeted channel.

Rich message

Webchat

Messenger

Twitter

WhatsApp

RingCentral ED

Text

yes

yes

yes

yes

yes

Quick replies

yes

yes

yes

yes (up to 10 elements)

yes

URL buttons

yes

yes

yes

yes

yes

Phone buttons

yes

yes

yes

yes

yes

Email buttons

yes

no

no

no

no

Carousels

yes

yes

no

no

yes

Drop down menus

yes

no

no

yes (up to 10 elements)

no

Images

yes

yes

no

yes

yes

Videos

yes

yes

no

yes

yes

Documents

yes

yes

no

yes

no

Location

yes

no

no

yes

no

How can I send rich messages?

There is two ways to send rich messages:
1 - Use the "Bot shows" block in your dialog tree and create your riche messages with the GUI
2 - Use the "Bot does" block in your dialog tree and push JSON objects with the messenger_answer.push() function

537537

The simplest way, use our Rich message block

500500

More sophisticated way, create your messages using code

The details for each approach / message type is available below.

Text messages

This is the simplest message you can send.
Here is how it looks like in the webchat.

460460

The simplest way to send rich messages is to use the Bot Shows block in your dialog flow

Then you can define one or several text messages by clicking on the + Text Card button of the Rich message block.

859859

You can then copy the following code in the javascript editor

927927
var message = {
    "text": "Hello"
};
messenger_answer.push(message);

callback(output);

Quick replies

Quick message are a great way to allow one click interactions with the user on guided conversations.
Here is how it looks like on a webchat.

463463

You can attach quick messages to a text after clicking on the + Quick Replies of the Rich message object.

10201020

You can also push quick replies via the Node.js block using the following syntax.

var message = {
    "quick_replies": [
        {
            "payload": "I take the blue pill",
            "title": "I take the blue pill",
            "content_type": "text"
        },
        {
            "payload": "I take the red pill",
            "title": "I take the red pill",
            "content_type": "text"
        }
    ],
    "text": "What will you decide Neo?"
};
messenger_answer.push(message);

callback(output);

📘

Keep your quick replies short

If you plan to deploy your bot in Facebook Messenger, keep in mind that the quick reply limit is set by Facebook to 50 characters max, longer titles will be truncated.

Button cards

Buttons are a great way to offer website access or phone call initiation, with a single click, within your bot's conversations.

Here is a button card example:

419419

In order to create this kinf of message, you can use the Rich message block
and select + Buttons Card

920920

There is 3 kind of buttons:

  • URL buttons: Will open a new tab with the specified url
  • Phone buttons: On a mobile phone, will open the phone app with the specified phone
  • Quick reply button: Will send the message specified in the payload of the button to the bot

You can easily configure the buttons with the Rich Message block:

837837 836836

📘

What if I want to use a special number with no country code?

then the solution is to use an url button with the following syntax: tel:+123456789

836836

You can also send button cards programatically with the following syntax in a node.js block:

var message = {
    "attachment": {
        "type": "template",
        "payload": {
            "template_type": "button",
            "text": "How would you like to contact us?",
            "buttons": [
                {
                    "type": "web_url",
                    "title": "Live chat",
                    "url": "www.matrix.com/chat",
                    "webview_height_ratio": "full"
                },
                {
                    "type": "phone_number",
                    "title": "Phone call",
                    "payload": "+231123456789"
                },
                {
                    "type": "postback",
                    "title": "Back to menu",
                    "payload": "Back to menu"
                }
            ]
        }
    }
};
messenger_answer.push(message);

callback(output);

Carousels

Quick replies is a visually appealing option to present the different use cases your bot is able to handle.

376376

To easily create carousels with the Rich message block, click on the + Carousel Card

837837

Then you can customize the different components of your carousel.

837837

You can also push carousels programatically using the following syntax:

var message =   {
    "attachment": {
        "payload": {
            "elements": [
                {
                    "default_action": {
                        "fallback_url": "facebook.com",
                        "webview_height_ratio": "tall",
                        "messenger_extensions": true,
                        "url": "",
                        "type": "web_url"
                    },
                    "buttons": [
                        {
                            "payload": "I want the blue one",
                            "title": "Get this",
                            "type": "postback"
                        }
                    ],
                    "image_url": "https://media.smartly.ai/image/1646753575348594d22103c8b910007d3eaa4etesbLdMFruSlBDOGaVO.png",
                    "subtitle": "A safe and boring life",
                    "title": "The blue pill"
                },
                {
                    "default_action": {
                        "fallback_url": "facebook.com",
                        "webview_height_ratio": "tall",
                        "messenger_extensions": true,
                        "url": "",
                        "type": "web_url"
                    },
                    "buttons": [
                        {
                            "payload": "I want the red one",
                            "title": "Get this",
                            "type": "postback"
                        }
                    ],
                    "image_url": "https://media.smartly.ai/image/1646753575348594d22103c8b910007d3eaa4etesbLdMFruSlBDOGaVO.png",
                    "subtitle": "Crazy stuff and adventure",
                    "title": "The red pill"
                }
            ],
            "template_type": "generic"
        },
        "type": "template"
    }
};
messenger_answer.push(message);

callback(output);

You can add up to 10 elements in a carousels.

Drop down menus

Drop down menus are a very convenient way to deal with a big range of fixed options that you your to pick from.
Drop down menus are only available on our webchat channel.
Here is how Drop down menus looks like in a desktop:

14281428

And the same on mobile:

11531153

As you can see on mobile, the options are quite big and easy to pick with a finger.
You can send drop down menus programatically using th following syntax in a node.js block:

messenger_answer.push({
  "attachment": {
    "type": "template",
    "payload": {
    "template_type": "selector",
    "text": "Select a partner from the list below:",
    "default_option": "--",
    "options": [{
      "title": "Facebook Manager",
      "payload": "Facebook Manager"
      }, {
      "title": "Google Marketing Platform",
      "payload": "Google Marketing Platform"
      }, {
      "title": "Display&Video 360",
      "payload": "Display&Video 360"
      }, {
      "title": "Google Ads",
      "payload": "Google Ads"
      }, {
      "title": "Giphy",
      "payload": "Giphy"
      }, {
      "title": "Pinterest",
      "payload": "Pinterest"
      }, {
      "title": "Spotify",
      "payload": "Spotify"
      }, {
      "title": "Shazam",
      "payload": "Shazam"
      }, {
      "title": "Vice",
      "payload": "Vice"
      }]
    }
    }
});

callback(output);

Images

Images can be a very good way to illustrate some conversational scenarios.

454454

Open a rich message and click on the + Image Card

927927

Then select an image in your computer or copy paste an image url in the path file.
The image will be uploaded to Smartly.ai servers.

10161016

You can also send images programatically using the following syntax in a Node.js block.

var message = {
    "attachment": {
        "payload": {
            "url": "https://media.smartly.ai/image/1646753575348594d22103c8b910007d3eaa4etesbLdMFruSlBDOGaVO.png"
        },
        "type": "image"
    }
};
messenger_answer.push(message);

callback(output);

Videos

Similarly, you can send videos to present a product, a service or some useful instructions to your users.

461461 10181018

The programatical option to push videos is to respect the following syntax.

var message = {
    "attachment": {
        "payload": {
            "url": "https://smartly-video-stage.s3.us-west-2.amazonaws.com/1592321204325"
        },
        "type": "video"
    }
};
messenger_answer.push(message);

callback(output);

🚧

Size limit

For videos hosted in the bot platform, the file size is limited to 25 Mo
For videos hosted outside the bot platform, the file size is limited to 100 Mo

Documents

Your bot can send files to your users
To do so, simply upload your file via the dedicated button in the bot shows

🚧

Size limit

For documents hosted in the bot platform, the file size is limited to 10 Mo
For documents hosted outside the bot platform, the file size is limited to 10 Mo

Documents are currently supported by the following channels:

  • webchat
  • messenger
  • whatsapp
21572157

Audio records

Audio messages are sent to the users who can listen to the content via an integrated audio player
Here is how audio is rendered in user channels

To set an audio message, the simplest way is via the rich message editor

21742174

You can also define audio messages programatically using the following json format

🚧

Size limit

For audio recordings hosted in the bot platform, the file size is limited to 10 Mo
For audio recordings hosted outside the bot platform, the file size is limited to 10 Mo

Locations

21612161

Email buttons

416416
var message = {
    "attachment": {
        "payload": {
            "text": "You can contact us via email",
            "buttons": [
                {
                    "webview_height_ratio": "full",
                    "url": "[email protected]",
                    "title": "Send an email",
                    "type": "mailto"
                }
            ],
            "template_type": "button"
        },
        "type": "template"
    }
};



messenger_answer.push(message);

callback(output);

Sending multiple messages

Yes, to so, simply prepare multiple messages that you will then send individually with the messenger_answer_push() function.

var message = {
    "text": "Hello"
};
messenger_answer.push(message);

message = {
    "attachment": {
        "payload": {
            "url": "https://smartly-video-stage.s3.us-west-2.amazonaws.com/1592321204325"
        },
        "type": "video"
    }
};
messenger_answer.push(message);

message = {
    "quick_replies": [
        {
            "payload": "I take the blue pill",
            "title": "I take the blue pill",
            "content_type": "text"
        },
        {
            "payload": "I take the red pill",
            "title": "I take the red pill",
            "content_type": "text"
        }
    ],
    "text": "What will you decide Neo?"
};
messenger_answer.push(message);

callback(output);

Adding pauses between messages

Sometimes, It can be handy to send multiple messages as a bot answer.
While doing so, the platform can wait for a while before sending the next message, so that your user can have the time to read the previous one.

📘

By default, the delay is set to 1 second.

But you have the ability to define custom pauses that will override this default setting.
Read below to learn about Custom pauses

Adding a custom pause, can be simply by:

  • by clicking on + Custom pause within the "Bot Show"
  • positionning the + Custom pause object between the two messages where you want to have a delay that is different than the default one
  • defining how many second you want to wait
    and hit save obviously
17041704

📘

Pause range in bot answers

Each custom pause is defined in seconds, ranging from 1 to 30 seconds.

It is also possible to add custom pauses programatically using the following format:

var text_message = { 
            "text": "Hello there"
        };
        
var pause = {
            "type": "pause",
            "value": 5000
        };

messenger_answer.push(text_message);
messenger_answer.push(pause);
messenger_answer.push(text_message);

Note that, if you go with the programmatic way, the delay should be defined in milliseconds.