Message with Dropdown

The message of type select displays a dropdown. You can give your dropdown a pre selected value by adding the "selected_item": {"text": "Porsche", "value":"porsche"} object to your select message.

To see the style options reference the Full JSON Schema. To see the functionality reference the Functionality Section.

Example

Example’s JSON

{
  "head": {
    "text": "I am a header",
    "sub_head": {
      "text": "I am a sub header"
    }
  },
  "body": [
    {
      "type": "select",
      "text": "Cars",
      "select_items": [
        {
          "text": "Tesla",
          "value": "tesla"
        },
        {
          "text": "Ferrari",
          "value": "ferrari"
        },
        {
          "text": "Porsche",
          "value": "porsche"
        },
        {
          "text": "Mclaren",
          "value": "mclaren"
        }
      ]
    }
  ]
}

Full JSON Schema

{
  "type": "object",
  "properties": {
    "head": {
      "type": "object",
      "required": [
        "text"
      ],
      "properties": {
        "text": {
          "type": "string"
        },
        "style": {
          "type": "object",
          "properties": {
            "color": {
              "type": "string",
              "format": "Hex"
            },
            "bold": {
              "type": "boolean"
            },
            "italic": {
              "type": "boolean"
            }
          }
        },
        "sub_head": {
          "type": "object",
          "required": [
            "text"
          ],
          "properties": {
            "text": {
              "type": "string"
            },
            "style": {
              "type": "object",
              "properties": {
                "color": {
                  "type": "string",
                  "format": "Hex"
                },
                "bold": {
                  "type": "boolean"
                },
                "italic": {
                  "type": "boolean"
                }
              }
            }
          }
        }
      }
    },
    "body": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [
          "type",
          "text"
        ],
        "properties": {
          "type": {
            "type": "string",
            "enum": [
              "select"
            ]
          },
          "text": {
            "type": "string"
          },
          "selected_item": {
            "type": "object",
            "required": [
              "text",
              "value"
            ],
            "properties": {
              "text": {
                "type": "string"
              },
              "value": {
                "type": "string"
              }
            }
          },
          "select_items": {
            "type": "array",
            "description": "Required if `static_source` is  **not** set.",
            "items": {
              "type": "object",
              "required": [
                "text",
                "value"
              ],
              "properties": {
                "text": {
                  "type": "string"
                },
                "value": {
                  "type": "string"
                }
              }
            }
          },
          "static_source": {
            "type": "string",
            "enum": [
              "members",
              "channels"
            ],
            "description": "Required if `select_items` is  **not** set."
          }
        }
      }
    }
  }
}

Functionality

Dynamic Dropdowns

The static_source key can populate the select_items array dynamically. The value of static_source can be set to either members, or channels.

NOTE: When using static_source do not include select_items. When using select_items do not include static_source

User Actions

When a user selects an option in the dropdown, a POST request with data about the option selected is sent to the Bot Endpoint URL you specfied in your apps dashboard. Here is an example request body.

{
  "event": "interactive_message_select",
  "payload": {
    "accountId": "gVcjZnWWRLWvv_GtyGuaxg",
    "channelName": "Tommy Gaessler",
    "messageId": "20190618205440879_sRHVqf4_aw1",
    "original": {
      "head": {
        "sub_head": {
          "text": "I am a sub header"
        },
        "text": "I am a header"
      },
      "body": [
        {
          "select_items": [
            {
              "text": "Tesla",
              "value": "tesla"
            },
            {
              "text": "Ferrari",
              "value": "ferrari"
            },
            {
              "text": "Porsche",
              "value": "porsche"
            },
            {
              "text": "Mclaren",
              "value": "mclaren"
            }
          ],
          "text": "Cars",
          "type": "select"
        }
      ]
    },
    "robotJid": "v1m0yn1imztuogsxjje8fdew@xmpp.zoom.us",
    "selectedItems": [
      {
        "value": "tesla"
      }
    ],
    "timestamp": 1560891284464,
    "toJid": "kdykjnimt4kpd8kkdqt9fq@xmpp.zoom.us/robot_v1m0yn1imztuogsxjje8fdew@xmpp.zoom.us",
    "userId": "KdYKjnimT4KPd8KKdQt9FQ",
    "userJid": "kdykjnimt4kpd8kkdqt9fq@xmpp.zoom.us",
    "userName": "Tommy Gaessler"
  }
}

For more information, see the Dropdown Webhook Reference.