NAV

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

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'
      }
    }
  ]
}

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