Message with Buttons

Buttons are used for capturing user actions. A user in the chat can click a button, and it will send a request to your api with the value as the command.

There are four color options to choose from when sending a button.

  1. Primary makes the button blue
  2. Default makes the button white
  3. Danger makes the button red
  4. Disabled makes the button gray and unclickable

The limit key is a way to specify how many buttons show up. If the items array of buttons is greater than the limit, the buttons will be grouped in a menu list.

The image on the right is an example of an overflow button list, or if you want all the buttons to be grouped in a menu.

To see the style options reference the Full JSON Schema below.

To see the functionality reference the Functionality Section below.

Example
Example

Example’s JSON

{
  "head": {
    "text": "I am a header",
    "sub_head": {
      "text": "I am a sub header"
    }
  },
  "body": [
    {
      "type": "actions",
      "items": [
        {
          "text": "Add",
          "value": "add",
          "style": "Primary"
        },
        {
          "text": "Update",
          "value": "update",
          "style": "Default"
        },
        {
          "text": "Delete",
          "value": "delete",
          "style": "Danger"
        },
        {
          "text": "Disabled",
          "value": "disable",
          "style": "Disabled"
        }
      ]
    }
  ]
}
Full JSON Schema
expand to see details
object
head
object
body
array[object]
1 validation

Functionality

User Actions

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

{
  "event": "interactive_message_actions",
  "payload": {
    "accountId": "gVcjZnWWRLWvv_GtyGuaxg",
    "actionItem": {
      "text": "Add",
      "value": "add"
    },
    "channelName": "Tommy Gaessler",
    "messageId": "20190618205516496_ynICmz8_aw1",
    "original": {
      "head": {
        "sub_head": {
          "text": "I am a sub header"
        },
        "text": "I am a header"
      },
      "body": [
        {
          "type": "actions",
          "items": [
            {
              "style": "Primary",
              "text": "Add",
              "value": "add"
            },
            {
              "style": "Default",
              "text": "Update",
              "value": "update"
            },
            {
              "style": "Danger",
              "text": "Delete",
              "value": "delete"
            },
            {
              "style": "Disabled",
              "text": "Disabled",
              "value": "disable"
            }
          ]
        }
      ]
    },
    "robotJid": "v1m0yn1imztuogsxjje8fdew@xmpp.zoom.us",
    "timestamp": 1560891332219,
    "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 Buttons Webhook Reference.