Tiles
With tiles, your bot can display rich data to a user and get button click responses.
Feature overview:
- Show one or more tiles
- Use row or column layout
- Display an image or icon at the top of the tile
- Include title and/or description text
- Display tabular data (e.g. price, availability, size, etc.)
- Add multiple buttons (action, text, or URL buttons)
Compatibility notes (Zendesk Sunshine Conversations)
- Only row layout is supported
- Tabular data is not supported
- Quick replies are not supported
Basic usage
Here's how to show two tiles with images and buttons:
triggers:
- keyword: tile_basic
steps:
- say: Here are the currently available rewards...
- tiles:
- title: Super Nintendo Entertainment System
description: 100,000 points
image:
url: https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/SNES-Mod1-Console-Set.jpg/800px-SNES-Mod1-Console-Set.jpg
buttons:
- text: Order
result: nintendo
- title: Sega Genesis
description: 75,000 points
image:
url: https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Sega-Genesis-Mk2-6button.jpg/800px-Sega-Genesis-Mk2-6button.jpg
buttons:
- text: Order
result: sega
- say: Great! Your first (@ flow.result ) is on the way!


Button groups
Another use for tiles is to show a group of buttons. Here two examples with radio buttons and action buttons:
triggers:
- keyword: tile_options
steps:
- ask:
button_style: radio
layout: column
tiles:
- title: How many copies?
buttons:
- text: "1"
result: 1
- text: "2"
result: 2
- text: "3"
result: 3
- text: "4+"
result: 4
- say: Flow result (@ flow.result )
- end
triggers:
- keyword: tile_yes_no
steps:
- ask:
button_style: action
layout: column
tiles:
- title: Do you want to continue?
buttons:
- text: Yes
result: true
- text: No
result: false
- say: Flow result (@ flow.result )
- end


Advanced
Here's an advanced use that combines images, tabular data, and link buttons:
triggers:
- keyword: tile_advanced
steps:
- ask: Advanced tiles
tiles:
- image:
url: https://cataas.com/cat/says/Tile%200
title: Title 0
rows:
- - cell: How
value: harvesting
- cell: A
value: clouds
- - cell: Away
value: far
- cell: Harvesting
value: ship
buttons:
- url: https://cataas.com/cat/says/Link%20button%203
text: Link button 3
- url: https://cataas.com/cat/says/Link%20button%204
text: Link button 4
- text: Button 5
result: 5
- text: Button 6
result: 6
description: Circumnavigated how far away ship of the imagination star stuff
harvesting star light great turbulent clouds a billion trillion
- image:
url: https://cataas.com/cat/says/Tile%201
title: Title 1
rows:
- - cell: Stuff
value: trillion
- cell: Light
value: circumnavigated
- - cell: How
value: of
- cell: Harvesting
value: billion
buttons:
- url: https://cataas.com/cat/says/Link%20button%207
text: Link button 7
- url: https://cataas.com/cat/says/Link%20button%208
text: Link button 8
- text: Button 9
result: 9
- text: Button 10
result: 10
description: Circumnavigated how far away ship of the imagination star stuff
harvesting star light great turbulent clouds a billion trillion
- image:
url: https://cataas.com/cat/says/Tile%202
title: Title 2
rows:
- - cell: Circumnavigated
value: great
- cell: Imagination
value: ship
- - cell: Turbulent
value: of
- cell: Turbulent
value: light
buttons:
- url: https://cataas.com/cat/says/Link%20button%2011
text: Link button 11
context: {}
- url: https://cataas.com/cat/says/Link%20button%2012
text: Link button 12
- text: Button 13
result: 13
- text: Button 14
result: 14
description: Circumnavigated how far away ship of the imagination star stuff
harvesting star light great turbulent clouds a billion trillion
- say: Flow result (@ flow.result )


Updated 10 months ago