GuidesReference
BlogUpdatesSlackGitHubConsole

Tiles

Suggest Edits

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 3 months ago