Rich Messages | Dialogflow

In the Response section, you can add tabs for some of our supported integrations. This allows you to define default or integration-specific responses. In each tab, you can add up to 10 of the same or different message types. The DEFAULT tab and the integration tabs offer different message types. The integration tabs allow you to add images, cards, and quick replies.

To add integration tabs, either enable the respective integrations on the Integrations page or click on the + sign next to the DEFAULT tab. To add message elements, click the ADD MESSAGE CONTENT button.

Your agent’s response can consist of up to 10 sequential messages, you can reordered in the UI. If you create intents via the /intents endpoint, the order of messages will correspond to the messages array elements order.

Types of Responses

You can see example code for these message types in our message objects reference.

Text

Text responses are available in all platforms. Your agent can send up to 10 sequential text messages in response to a user input (assuming no other message types are defined in the intent).

To add a new line in the UI, press Shift+Enter. If you create intents via the API, use \n in the intent object.

You can reference parameter values as described here.

Image

The image message type lets your agent send images in integrations for Facebook Messenger, Kik, LINE, Skype, Slack, Telegram, and Viber.

All you need to do is to store the image and provide the public URL in the response for the agent.

Card

Cards consist of an image, a card title, a card subtitle, and interactive buttons (for sending user queries or opening links). These elements can be combined depending on the platform's requirements:

Facebook Messenger

Cards correspond to a simplified Facebook Messenger generic template (bubble).

If you have several cards in the same intent, they will displayed in a horizontal scrollable carousel.

To add a new button, place the cursor in the button title field and press Enter.

Buttons can be the following types:

Title only (if tapped, the title text is sent as a user query)
Title with a URL to open
Title with text postback (when tapped, the text is sent as a user query)

Requirements/Limitations:

Facebook Messenger integration cards can contain the same elements as a generic template except item_url.
Interactive button functions are limited to opening a URL or sending a query from the user.
The title field cannot be empty.
Either image URL or the button title is required.
Button number is limited to 3.
Title, subtitle, and button title have an 80 character limit.
The image ratio is 1.91:1.

Kik

Cards are not natively supported in Kik, so they are sent as separate elements: image with title, subtitle as a text message, and buttons.

For buttons, only a URL is supported as a postback – in this case, it is displayed as an image with linked URL. If you leave the postback field blank, when such a button is tapped, the button title is sent as a user query to the agent.

LINE

Templates are used to create cards with the Line integration.

Title, subtitle, and at least one button are mandatory.

Skype

A HeroCard is used for cards with Skype.

Title or subtitle or an image is required for a card.

Slack

There are no mandatory fields for cards in Slack – any combination of elements can be used.

Buttons with a URL and with a text postback are supported. Buttons with a URL are displayed as hyperlinks.

Either the image URL field or the title field is mandatory.

Buttons with a URL and with a text postback are supported. When tapped, a button with a URL will open a web page, whereas a button with text will send the text as a user query.

Viber

In the 'Card' element, you can send a picture with a title and a subtitle accompanied by up to 3 buttons. None of these 'Card' elements are mandatory in the Viber integration, so you can use them individually.

For images, provide a public URL to a JPEG picture file up to 1MB in size.

Postback for buttons can be defined either as text or a URL.

For text, the button name will appear in the chat as a request from the user, whereas the postback text is sent to the bot and is not visible.
For a URL, the link will be open in a separate window and the URL will be sent in the chat as request from the user. More information about buttons logic can be found in the Viber REST API documentation.

Quick Replies

Quick replies are displayed in messengers as clickable buttons with pre-defined user responses. When clicked, the button text is sent to the agent as a user query.

The following sections explain how to set up Quick Replies on each platform.

Requirements/Limitations:

One Quick reply element per intent.
Maximum of 10 replies.
20 character limit per reply.

Facebook Messenger

Quick replies are supported in Facebook Messenger integrations and correspond to a text version of Facebook Messenger quick replies.

When a user clicks one of the buttons, all buttons are dismissed. This prevents the issue where users could click buttons that are attached to old messages in a conversation.

Kik

Quick replies are supported in Kik integrations and correspond to a text version of Suggested response keyboards in Kik with a reduced number of replies and characters.

If you want to use a full version, you can do it through the Custom payload.

When a user clicks one of the buttons, all buttons are dismissed. This prevents the issue where users could click buttons that are attached to old messages in a conversation.

LINE

Templates are used to create quick replies with the Line integration.

Button is a mandatory field.

Skype

A HeroCard is used for quick replies with Skype.

Slack

Quick replies are supported in one-click Slack integrations and correspond to a text version of Slack interactive buttons.

Quick replies in one-click Telegram integrations correspond to keyboard buttons in Telegram.

When a user clicks one of the buttons, the buttons are dismissed. This prevents the issue where users could click buttons that are attached to old messages in a conversation.

Viber

Quick replies correspond to the text version of Viber Keyboards. You can add up to 10 quick replies.

Custom Payload

You can send custom payloads in the JSON format provided in the platforms documentation.

To send a custom payload to Facebook Messenger, Kik, Slack, and Telegram one-click integrations, use the following format:

{
  "facebook": { 
  },
  "kik": {
  },
  "line": {
  },
  "skype": {
  },
  "slack": {
  },
  "telegram": {
  }
  "viber": {
  }
}

You can also send a custom payload to self-developed integrations. It won’t be processed by Dialogflow, so you'll need to handle it in your own business logic.

See the integration's developer docs for more information:

Facebook

Audio in one-click Facebook Messenger integration

The following example sends a playable audio link from your agent to a one-click Facebook Messenger integration:

{
  "facebook": {
    "attachment": {
      "type": "audio",
      "payload": {
        "url": "https://example.com/audio/test.mp3"
      }
    }
  }
}

Video in one-click Facebook Messenger integration

The following example sends a playable video from your agent to a Facebook Messenger integration:

{
  "facebook": {
    "attachment": {
      "type": "video",
      "payload": {
        "url": "https://examples.dialogflow.com/RichMessagesFiles/studebaker_1950.mp4"
      }
    }
  }
}

Files in one-click Facebook Messenger integration

The following example sends a file from your agent to a Facebook Messenger integration:

{
  "facebook": {
    "attachment": {
      "type": "file",
      "payload": {
        "url": "https://examples.dialogflow.com/RichMessagesFiles/LoremIpsum.pdf"
      }
    }
  }
}

Kik

Gifs in one-click Kik integration

The following payload example sends animated gifs:

{
  "kik": {
    "type": "video",
    "videoUrl": "https://raw.githubusercontent.com/svet4/images/master/img/create-an-intent.gif",
    "autoplay": true
  }
}

For more information, see Kik documentation.

Videos in one-click Kik integrations

Your Kik bots can send playable videos.

The Kik mobile client requires that all videos are in mp4 format with h264 video and aac audio. If you provide a video with different specifications, it will be transcoded, which greatly increases the time required to send your messages. For more, please read Kik documentation.

The following example sends a playable video from your Kik bot to a Kik mobile client:

{
  "kik": {
    "type": "video",
    "videoUrl": "https://examples.dialogflow.com/RichMessagesFiles/studebaker_1950.mp4",
    "autoplay": true
  }
}

LINE

Templates can be used for custom payloads, using this code:

{
  "type": "template",
  "altText": "this is a buttons template",
  "template": {
    "type": "buttons",
    "thumbnailImageUrl": "https://example.com/bot/images/image.jpg",
    "title": "Menu",
    "text": "Please select",
    "actions": [
      {
        "type": "postback",
        "label": "Buy",
        "data": "action=buy&itemid=123"
      },
      {
        "type": "postback",
        "label": "Add to cart",
        "data": "action=add&itemid=123"
      },
      {
        "type": "uri",
        "label": "View detail",
        "uri": "http://example.com/page/123"
      }
    ]
  }
}

Skype

Refer to the Bot Framework documentation on Messages and Activities.

Slack

Formatted text in one-click Slack integration

Your Slack bots can send formatted text, as the following example shows:

{
  "slack": {
    "text": "This is an example of *bold*, _italic_, and `code`."
  }
}

Formatted text and hyperlinks in one-click Telegram integration

Your Telegram bots can send formatted text and hyperlinks.

The following example sends formatted text with a hyperlink using the Markdown parsing mode:

{
  "telegram": {
    "text": "You can read about *entities* [here](/docs/concept-entities).",
    "parse_mode": "Markdown"
  }
}

See the Telegram documentation for reference.

Inline Keyboard Buttons

The following example shows how you can define Inline Keyboard buttons in the Custom payload element.

{
  "telegram": {
    "text": "Pick a color",
    "reply_markup": {
      "inline_keyboard": [
        [
          {
            "text": "Red",
            "callback_data": "Red"
          }
        ],
        [
          {
            "text": "Green",
            "callback_data": "Green"
          }
        ],
        [
          {
            "text": "Yellow",
            "callback_data": "Yellow"
          }
        ],
        [
          {
            "text": "Blue",
            "callback_data": "Blue"
          }
        ],
        [
          {
            "text": "Pink",
            "callback_data": "Pink"
          }
        ]
      ]
    }
  }
}

Viber

Text

Instead of defining a text response in the 'Text response' element of the 'Response' section, you can do it in the 'Custom payload' element.

It may look like this:

{  
  "viber": {  
    "type": "text",  
    "text": "This text is being sent via Custom Payload"  
  }  
}

Picture

Instead of setting a picture URL in the 'Image' element of the "Response' section, you can do it in the 'Custom payload' element.

Here's an example of how you can send a picture with text via custom payload:

{  
  "viber": {  
    "type": "picture",  
    "text": "New Year picture",  
    "media": "https://examples.dialogflow.com/RichMessagesFiles/new_year_1MB.jpg"  
  }  
}

Maximum picture size is 1MB. Only JPEG format is supported. Other image formats as well as animated GIFs can be sent as URL messages or file messages.

The "text" field value is a string of up to 120 characters long. It can have an empty value, but the field is mandatory.

You can also include an optional "thumbnail" field that contains public URL to the reduced size image of up to 100kb size. Recommended size is 400x400. Only JPEG format is supported.

Video

Your Viber bot can send videos. Here's an example of how the 'Custom payload' element may look for sending a video:

{  
  "viber": {  
    "type": "video",  
    "media": "https://examples.dialogflow.com/RichMessagesFiles/studebaker_1950.mp4",  
    "size": 1728614,  
    "duration": 20  
  }  
}

Note the all the fields – "type", "media", "size", and "duration" – are mandatory. Maximum video file size is 50MB. Only MP4 and H264 are supported. Maximum duration of the video is 180 seconds.

You can also add a "thumbnail" field with a URL of a reduced size image (JPEG). Maximum size of the thumbnail is 100kb. Recommended dimensions are 400x400 pixels.

File

Your Viber bot can send files. Here's an example of how the 'Custom payload' element may look for sending a file:

{  
  "viber": {  
    "type": "file",  
    "media": "https://examples.dialogflow.com/RichMessagesFiles/LoremIpsum.pdf",  
    "size": 27780,  
    "file_name": "LoremIpsum.pdf"  
  }  
}

Note the all the fields – "type", "media", "size", and "file_name" – are mandatory. Maximum file size is 50MB. See the list of [unsupported file formats](https://developers.viber.com/api/rest-bot-api/index.html#forbiddenFileFormats). The "size" field has a numeric value and indicates the file size in bytes. The file name can be up to 256 characters including the file extension.

Stickers

Your bot can reply with stickers. Sticker IDs can be found [here](https://developers.viber.com/tools/sticker-ids/index.html).

Here's an example of how the custom payload can be defined to send a sticker:

{  
  "viber": {  
    "type": "sticker",  
    "sticker_id": 40123  
  }  
}

Location

Your bot can send a message that will be displayed as a map, showing a specific location. Here's an example:

{  
  "viber": {  
    "type": "location",  
    "location": {  
        "lat": "37.7898",  
        "lon": "-122.3942"  
    }  
  }  
}

Contact

Your bot can send contacts (name and phone number). See an example below:

{  
  "viber": {  
    "type": "contact",  
    "contact": {  
      "name": "Alex",  
      "phone_number": "+972511123123"  
    }  
  }  
}

The "name" field value can be up to 28 characters long. The "phone_number" field value can be up to 18 characters long.

Keyboards (buttons)

Using the 'Custom payload' element, you can send custom keyboards (buttons) with any of the other message types available for sending via 'Custom payload'.

The keyboard JSON object defines different visual and logic attributes (background color, number of buttons etc). For more information, see [https://developers.viber.com/tools/keyboards/index.html](https://developers.viber.com/tools/keyboards/index.html).

See a sample keyboard example below.

{  
  "viber": {  
    "type": "contact",  
    "contact": {  
      "name": "Alex",  
      "phone_number": "+972511123123"  
    },  
    "keyboard": {  
        "Type": "keyboard",  
        "DefaultHeight": true,  
        "Buttons": [{  
            "ActionType": "reply",  
            "ActionBody": "reply to PA",  
            "Text": "Key text",  
            "TextSize": "regular"  
        }]  
    }  
  }  
}