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.

Need help?

The first place to look is on our Developer Forum. If you can't find the answer or your request includes sensitive information, contact Developer Support.