Rich Messages

What are rich messages?

Beyond simple text answers, rich messages can enhance the user experience with medias and interactive elements.

What are the available rich messages?

Below is a list of the available rich messages:

  • Text messages
  • Quick reply
  • Button card
  • Carousels
  • Drop Down menu
  • Image
  • Video
  • Custom pauses

How can I send rich messages?

There is two ways to send qui replies:

  • Use the rich message block in your scenario and define your messages with the GUI
  • Use the javascript block in your scenario and push JSON objects with the messenger_answer.push() function

Are all rich messages available 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 depending on 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

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 also send text message via the Node.js 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://smartly-image-stage.s3.us-west-2.amazonaws.com/1592325804207.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://smartly-image-stage.s3.us-west-2.amazonaws.com/1592325832396.PNG",
                    "subtitle": "Crazy stuff and adventure",
                    "title": "The red pill"
                }
            ],
            "template_type": "generic"
        },
        "type": "template"
    }
};
messenger_answer.push(message);

callback(output);

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://smartly-image-stage.s3.us-west-2.amazonaws.com/1592320586047.jpg"
        },
        "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);

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.