Structured Message Payload

This guide documents the payload schema of different structured messages and its supporting Web SDK version. This payload is received via the 'chat.msg' event.

Schemas

Payload schemas of the different structured message types:

• Quick Replies
• Button Template
• Panel Template
• Panel Template Carousel
• List Template

Quick Replies

Property	Type	Description
type	String	Always 'QUICK_REPLIES'
msg	String	Content of the message
quick_replies	Array[Button]	Supported button's action: - 'QUICK_REPLY_ACTION'

Example:

{
  type: 'QUICK_REPLIES',
  msg: 'Sure! What type of flavours would you like?',
  quick_replies: [
    {
      text: 'Plain',
      action: {
        type: 'QUICK_REPLY_ACTION',
        value: 'plain'
      }
    },
    {
      text: 'Poppy-seed',
      action: {
        type: 'QUICK_REPLY_ACTION',
        value: 'poppy-seed'
      }
    },
    {
      text: 'Onion',
      action: {
        type: 'QUICK_REPLY_ACTION',
        value: 'onion'
      }
    },
    {
      text: 'Garlic',
      action: {
        type: 'QUICK_REPLY_ACTION',
        value: 'garlic'
      }
    }
  ]
}

Button Template

Value	Type	Description
type	String	Always 'BUTTON_TEMPLATE'
msg	String	Content of the message
buttons	Array[Button]	Supported button's action: - 'QUICK_REPLY_ACTION' - 'LINK_ACTION'

Example:

{
  type: 'BUTTON_TEMPLATE',
  msg: '👋 Our studio is open today from 10am to 10pm',
  buttons: [
    {
      text: 'Book an appointment',
      action: {
        type: 'LINK_ACTION',
        value: 'https://example.com/book'
      }
    },
    {
      text: 'View hairstylists',
      action: {
        type: 'QUICK_REPLY_ACTION',
        value: 'view hairstylists'
      }
    },
    {
      text: 'View gallery',
      action: {
        type: 'QUICK_REPLY_ACTION',
        value: 'view gallery'
      }
    }
  ]
}

Panel Template

Property	Type	Description
type	String	Always 'PANEL_TEMPLATE'
panel	Panel	Content of the Panel
buttons	Array[Button] | undefined	Supported button's action: - 'LINK_ACTION'

Properties of Panel object:

Property	Type	Description
heading	String	Title of the panel
paragraph	String | undefined	Description of the panel
image_url	String | undefined	Panel image
action	Action | undefined	Supported action's type: - 'LINK_ACTION'

Example:

{
  type: 'PANEL_TEMPLATE',
  panel: {
    heading: 'Your appointment today at Garden City',
    paragraph: 'You have a haircut scheduled at 5pm today with senior stylist Sharon',
    image_url: 'https://example.com/banner.png',
    action: {
      type: 'LINK_ACTION',
      value: 'https://example.com/appointment/1'
    }
  },
  buttons: [
    {
      text: 'Reschedule',
      action: {
        type: 'LINK_ACTION',
        value: 'https://example.com/reschedule/1'
      }
    }
  ]
}

Panel Template Carousel

Added in v1.7.0

Property	Type	Description
type	String	Always 'PANEL_TEMPLATE_CAROUSEL'
items	Array[PANEL_TEMPLATE]	A list of panel templates.

Example:

{
  type: 'PANEL_TEMPLATE_CAROUSEL',
  items: [
    {
      type: 'PANEL_TEMPLATE',
      panel: {
        heading: 'Your appointment today at Garden City',
        paragraph: 'You have a haircut scheduled at 5pm today with senior stylist Sharon',
        image_url: 'https://example.com/banner.png',
        action: {
          type: 'LINK_ACTION',
          value: 'https://example.com/appointment/1'
        }
      },
      buttons: [
        {
          text: 'Reschedule',
          action: {
            type: 'LINK_ACTION',
            value: 'https://example.com/reschedule/1'
          }
        }
      ]
    },
    {
      type: 'PANEL_TEMPLATE',
      panel: {
        heading: 'Your appointment today at Park Dental',
        paragraph: 'You have a dental scheduled at 4.35pm today',
        image_url: 'https://example.com/banner.png',
        action: {
          type: 'LINK_ACTION',
          value: 'https://example.com/appointment/1'
        }
      },
      buttons: [
        {
          text: 'Reschedule',
          action: {
            type: 'LINK_ACTION',
            value: 'https://example.com/reschedule/1'
          }
        }
      ]
    }
  ]
}

List Template

Added in v1.8.0

Property	Type	Description
type	String	Always 'LIST_TEMPLATE'
items	Array[ListItem]	A list of items
buttons	Array[Button] | undefined	Supported button's action: - 'QUICK_REPLY_ACTION' - 'LINK_ACTION'

Properties of ListItem object:

Property	Type	Description
heading	String	Title of the item
paragraph	String	Description of the item
image_url	String | undefined	Item image
action	Action	Supported action's type: - 'LINK_ACTION'

Example:

{
  type: 'LIST_TEMPLATE',
  items: [
    {
      heading: 'Band 1',
      paragraph: 'example paragraph text',
      image_url: 'https://example.com/banner.png',
      action: {
        type: 'LINK_ACTION',
        value: 'https://example.com'
      }
    },
    {
      heading: 'Band 2',
      paragraph: 'example paragraph text',
      image_url: 'https://example.com/banner2.png',
      action: {
        type: 'LINK_ACTION',
        value: 'https://example.com'
      }
    },
    {
      heading: 'Band 3',
      paragraph: 'example paragraph text',
      image_url: 'hhttps://example.com/banner3.png',
      action: {
        type: 'LINK_ACTION',
        value: 'hhttps://example.com'
      }
    }
  ],
  buttons: [
    {
      text: 'View more',
      action: {
        type: 'LINK_ACTION',
        value: 'https://example.com/view/all'
      }
    }
  ]
}

Base Types

Base types are part of the structured message's schema.

Button

Property	Type	Description
text	String	Button text
action	Action	Assigned actions

Action

Value	Type	Description
type	String	Name of the action type ('QUICK_REPLY_ACTION' | 'LINK_ACTION')
value	String	Values corresponding to the action type