Skip to main content

Common features — quickReplies

quickReplies shows quick reply buttons in a message template.

Basic usage​

quickReplies renders a horizontally scrolling row of buttons beneath any message template, letting the user pick a common response quickly. Tapping one sends the corresponding text as a message.

Structure​

JSON​

{
  "quickReplies": [
    {
      "text": "Sichuan food"
    },
    {
      "text": "Cantonese food"
    },
    {
      "text": "Taiwanese food"
    }
  ]
}

Properties​

quickReplies (array)​

The array of quick reply buttons; each element is one button.

text (required)​

The button's label, which is also the message sent when it is tapped. Keep it under 20 characters.

Examples​

Plain quick replies​

{
  "type": "TEXT",
  "text": "Which cuisine would you like?",
  "quickReplies": [
    {
      "text": "📍 Sichuan"
    },
    {
      "text": "📍 Cantonese"
    },
    {
      "text": "📍 Taiwanese"
    }
  ]
}

Alongside another template​

{
  "type": "BUTTON",
  "title": "Recommended products",
  "text": "Here are our popular products:",
  "buttons": [
    {
      "label": "See the details",
      "action": {
        "type": "uri",
        "uri": "https://example.com/product"
      }
    }
  ],
  "quickReplies": [
    {
      "text": "Show me other products"
    },
    {
      "text": "Contact support"
    },
    {
      "text": "Back to the main menu"
    }
  ]
}

How to use it​

To send a message with quickReplies from Push Message:

  1. Choose Expression in the Template field's dropdown.
  2. Enter the following JavaScript in the editor.
(() => {
  return {
    type: 'TEXT',
    text: 'Which service do you need?',
    quickReplies: [
      {
        text: 'Order status',
      },
      {
        text: 'Returns and exchanges',
      },
      {
        text: 'Product questions',
      },
      {
        text: 'Technical support',
      },
    ],
  };
})()

Once configured, the buttons appear beneath the message, and tapping one sends its text.