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 DM

RingCentral

API

Text

yes

yes

yes

yes

yes

Quick replies

yes

yes

yes

yes

yes

URL buttons

yes

yes

yes

yes

yes

Phone buttons

yes

yes

yes

yes

yes

Email buttons

yes

no

no

no

yes

Carousels

yes

yes

no

yes

yes

Drop down menus

yes

no

no

no

yes

Images

yes

yes

no

yes

yes

Videos

yes

yes

no

yes

yes

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

The simplest way, use our Rich message blockThe simplest way, use our Rich message block

The simplest way, use our Rich message block

More sophisticated way, create your messages using codeMore sophisticated way, create your messages using code

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.

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.

You can then copy the following code in the javascript editor

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.

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

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:

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

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:

📘

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

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.

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

Then you can customize the different components of your carousel.

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:

And the same on mobile:

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.

Open a rich message and click on the + Image Card

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.

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.

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);

🚧

Maximum size for your videos

The solution can host videos of any size up to 25 Mo

Email buttons

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

📘

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.