Skip to main content

REFERENCE

Developer Reference

Authentication, APIs, SDKs, Flow Agent processors and parameter resolution, in full.

Common features — quickReplies

quickReplies shows quick reply buttons in a message template.

  1. 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.

  2. 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.

  3. 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"
        }
      ]
    }

  4. 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.

Ready to get started?

Want to see how Asgard fits your team? Talk to us.

Contact us