Skip to content

Buttons Inside Attachment Object Spec

ear-dev edited this page Jun 7, 2018 · 33 revisions

This is an implementation of rich message buttons inside the current attachments object found in the Rocket.Chat message object.

This document assumes that the reader already has knowledge of the current message and attachments objects.

This implementation is modeled after Slack's button implementation.

New fields will be added to the current attachments object:

  • actions: (Required when the attachment contains buttons) A collection of actions to include in the attachment (slack offers a couple of actions but this spec will only describe buttons). A maximum of 5 actions per attachment may be provided. (Array)
  • callback_id: (Required when the attachment contains interactive buttons) The provided string will act as a unique identifier for the collection of buttons within the attachment. It will be sent back to your message button action URL with each invoked action. It is key to identifying the interaction you're working with.

Two button types will be described: link buttons and interactive buttons.

Link Buttons

Link buttons are a kind of message attachment action. They're just links that look like buttons.

The Link Button action object contains these fields:

  • type: (Required) Must be "button" to tell Rocket Chat you want to render a button. (String)
  • text: (Required) A UTF-8 string label for this button. Be brief but descriptive and actionable. (String)
  • url: (Required) The fully qualified http or https URL to deliver users to. Invalid URLs will result in a message posted with the button omitted. (String)

Example JSON using link buttons.

{
  "messages": [
    {
      "msg": "<@W1A2BC3DD> approved your travel request. Book any airline you like by continuing below.",
      "attachments": [
        {
          "actions": [
            {
              "type": "button",
              "text": "Book flights 🛫",
              "url": "https://flights.example.com/book/r123456",
            },
            {
              "type": "button",
              "text": "Cancel travel request",
              "url": "https://requests.example.com/cancel/r123456",
            },
          ]
        },
      ]
    },
  ]
}