Messenger WebhooksMessenger Webhooks

Quick Replies

Learn to create interactive Quick Replies for your Messenger bot with ease.

The QuickReplies template consists of a main text prompt and a list of QuickReply buttons. Each QuickReply can have a title, an optional payload, and an optional image URL.

QuickReply

Properties

  • content_type: The type of content for the quick reply. Options include:

    • 'text': Default content type.
    • 'user_phone_number': Requests the user's phone number.
    • 'user_email': Requests the user's email address.
  • title: The title of the quick reply button. This is the text that users will see.

  • payload (optional): The data sent when the quick reply is selected. This can be a string or a number.

  • image_url (optional): The URL of an image to display with the quick reply.

Methods

  • constructor(title: string): Initializes a new QuickReply with the specified title.

  • setPayload(payload: string | number): Sets the payload for the quick reply. This data is sent when the button is clicked.

  • setImageUrl(imageUrl: string): Sets the image URL for the quick reply button.

QuickReplies

Properties

  • text: The text to display with the quick replies. This should be a message or prompt for the user.

  • attachment (optional): An optional attachment object that can be included with the quick replies.

  • quick_replies: An array of QuickReply instances to include in the response.

Methods

  • constructor(text: string): Initializes a new QuickReplies instance with the specified text.

  • setAttachment(attachment: object): Sets an attachment object that can be used with the quick replies. This is optional.

  • addQuickReply(replies: QuickReply[]): Adds an array of QuickReply objects to the quick replies instance. You can add multiple quick replies at once.

Example Usage

import { QuickReplies, QuickReply } from '@pyyupsk/messenger-webhooks';
 
const quickReply1 = new QuickReply('Yes')
  .setPayload('YES_PAYLOAD')
  .setImageUrl('https://example.com/yes-image.jpg');
 
const quickReply2 = new QuickReply('No')
  .setPayload('NO_PAYLOAD')
  .setImageUrl('https://example.com/no-image.jpg');
 
const quickReplies = new QuickReplies('Do you like our service?').addQuickReply([
  quickReply1,
  quickReply2,
]);

JSON Representation

{
  "text": "Do you like our service?",
  "quick_replies": [
    {
      "content_type": "text",
      "title": "Yes",
      "payload": "YES_PAYLOAD",
      "image_url": "https://example.com/yes-image.jpg"
    },
    {
      "content_type": "text",
      "title": "No",
      "payload": "NO_PAYLOAD",
      "image_url": "https://example.com/no-image.jpg"
    }
  ]
}

Additional Information

The QuickReplies class is useful for creating interactive and engaging messages. By combining quick reply buttons with relevant prompts, you can guide users through a series of interactions in a streamlined manner.

For more details on integrating QuickReplies into your messaging platform, refer to the platform’s documentation on quick replies and interactive elements.

Last updated on

On this page

Edit on GitHub