Message Types

There are various types of raw (unstructured) content that can be sent to your users. There are various types of message content that can be sent to your users:

Text

Web Chat Text Message

{
  type: "TEXT",
  text: "Hello World!",
}

Copy

Property	Description	Required
type	TEXT	Y
text	String	Y

Image

Web Chat Image

{
  type: "IMAGE",
  url: "http://image.png",
}

Copy

Property	Description	Required
type	IMAGE	Y
url	URL of the image file	Y

tip

Image must be a valid image file format, including .jpg, .jpeg, .png, .gif, .tiff and .bmp
Maximum file size is 25MB
You may send out Quick Reply buttons together with an image

Audio

Web Chat Audio

{
  type: "AUDIO",
  url: "http://audio.mp3",
}

Copy

Property	Description	Required
type	AUDIO	Y
url	URL of the audio file	Y

tip

Audio must be a valid audio file format, including .aac, .flac, .m4a, .m4p, .mp3, .wav, .wma
Maximum file size is 25MB
You may send out Quick Reply buttons together with an audio message

Video

Web Chat Video

{
  type: "VIDEO",
  url: "http://video.mp4",
}

Copy

Property	Description	Required
type	VIDEO	Y
url	URL of the video file	Y

tip

Video must be a valid video file format, including .mkv, .gif, .avi, .wmv, .rmvb, .mp4, .m4v, .mpg, .mpeg, .3gp
Maximum file size is 25MB
You may send out Quick Reply buttons together with a video

File

Web Chat File

{
  type: "FILE",
  url: "http://file.pdf",
}

Copy

Property	Description	Required
type	FILE	Y
url	URL of the file attachment	Y

tip

File must be a valid file format, including .pdf
Maximum file size is 25MB
You may send out Quick Reply buttons together with a file

Carousel

Carousel is a horizontal scrollable row of items, each composed of an image attachment, short description and buttons to request input from users.

Web Chat Carousel


{
  type: "CAROUSEL",
  carousel: [{
    title: "Some title",
    subtitle: "Some subtitle",
    image_url: "http://img.url",
    default_action: {
      type: "web_url",
      url: "https://sanuker.com"
    },
    buttons: [{
      type: "web_url",
      url: "https://sanuker.com",
      title: "Button 1"
    }, {
      type: "postback",
      title: "Button 2",
      payload: "a long payload here"
    }, {
      type: "phone_number",
      title: "Button 3",
      payload: "phone_number"
    }]
  }],
  image_aspect_ratio: "square",
}

Copy

Response Object

Property	Description	Required
type	CAROUSEL	Y
carousel	Array of carousel items; No maximum no. of elements	Y
carousel	Array of carousel items	Y
image_aspect_ratio	Set "horizontal" or "square"; Defaults to "horizontal"	N

carousel Object

Property	Description	Required
title	String	Y
subtitle	String	N
image_url	URL of the image displayed	N
default_action	Default website URL when users click on the image	N
buttons	Array of buttons	N

tip

You may send out Quick Reply buttons together with a file
You may not necessarily include buttons for a carousel if no call-to-action is intended

Button

Web Chat Button

{
  type: "BUTTON",
  text: "What can I do to help?",
  buttons: [{
    type: "web_url",
    url: "https://sanuker.com",
    title: "Get Order Status"
  }, {
    type: "phone_number",
    title: "Call Me",
    payload: "phone_number"
  }, {
    type: "postback",
    title: "some title 2",
    payload: "a long payload here"
  }]
}

Copy

Property	Description	Required
type	BUTTON	Y
text	String; Limited to 640 characters	Y
buttons	Array of buttons; Maximum of 3 buttons that appear as call-to-action	Y
text	String	Y
buttons	Array of buttons	Y

tip

You may send out Quick Reply buttons together with a button

URL Button

Web Chat URL Button

Open Website in New Tab

The URL Button can be used to open a web page in a new tab within the same browser.

{
  type: "web_url",
  title: "some title",
  url: "https://sanuker.com",
}

Copy

Property	Description	Required
type	web_url	Y
title	String	Y
url	URL of the destination	Y

Postback Button

Web Chat Payload Button

Sending Response through Payload Button

The Postback Button helps invoke an action (usually sending an answer back) in your chatbot. You can set a payload to the button.

{
  type: "postback",
  title: "some title",
  payload: "some payload",
}

Copy

Property	Description	Required
type	postback	Y
title	String	Y
payload	Custom defined payload triggers	Y

Call Button

The Call Button can be used to initiate a phone call directly.

{
  type: "phone_number",
  title: "Call us",
  payload: "+85281930208"
}

Copy

Property	Description	Required
type	phone_number	Y
title	String	Y
payload	Format must have "+" prefix followed by the country code, area code and local number without any space	Y

Quick Reply

Quick Reply provide a different way to present buttons in a message. It contains text and an optional image.

The only difference between Quick Reply and Button is that Quick Reply only appears once and will be dismissed once it is clicked, while Button remains on the message even it is clicked. This prevents the scenario where users could tap on the old Quick Reply buttons attached to previous messages in the conversation.

Web Chat Quick Reply

{
  type: "QUICK_REPLIES",
  text: "some text",
  quickReplies: [{
    content_type: "text",
    title: "Red",
    payload: "payload string"
  }, {
    content_type: "text",
    title: "Green",
    payload: "payload string"
  }]
}

Copy

Response Object

Property	Description	Required
type	QUICK_REPLIES	Y
text	String	Y
quickReplies	Array of quick reply buttons	Y

quickReplies Object

Property	Description	Required
content_type	Can be set to "text" only	Y
title	String; caption of button	Y
payload	Custom defined payload trigger	Y

List

List is a vertical list view of items to your users.

Web Chat List

{
  type: "LIST",
  list: [{
    title: "Sanuker FAQ",
    subtitle: "Some subtitle",
    image_url: "http://img.url",
    default_action: {
      type: "web_url",
      url: "https://sanuker.com",
    },
    buttons: [{
      type: "postback",
      title: "View",
      payload: "a long payload here"
    }]
  }],
  top_element_style: "compact",
}

Copy

Response Object

Property	Description	Required
type	LIST	Y
list	Array of list view elements	Y
buttons	A button associated on the list template message at the very end; Maximum of 1 button	N
top_element_style	Set "compact" or "large"; Defaults to "large"	N

list Object

Property	Description	Required
title	String	Y
subtitle	String	N
image_url	URL of image displayed for each item; Required for the first element if top_element_style is large	N
default_action	Default website URL when users click on the element row	N

tip

You must set up at least 1 elements but there is no maximum no. of elements
You can only set up at most 1 button for each element
top_element_style is always rendered as compact style on web right now
You may send out Quick Reply buttons together with a list

Media

Web Chat Media

Media is similar to a carousel without title and subtitle but it can also display video.

{
  type: "MEDIA",
  media_type: "image",
  buttons: [{
    type: "postback",
    title: "Show Me More!",
    payload: "a long payload here"
  }]
}

Copy

Property	Description	Required
type	MEDIA	Y
media_type	Set "image" or "video"	Y
buttons	Array of buttons	N

tip

You may send out Quick Reply buttons together with a media template

Web Action

Web Action is sent custom data to your website through the web chat plugin.

{
  type: "WEB_ACTION",
  data: {
    action: "NAV",
    url: "https://sanuker.com/#use-case"
  }
}

Copy

Property	Description	Required
type	WEB_ACTION	Y
data	String or Object	Y

tip

To receive the response on your website, please see payload trigger.

Message Types

Message Types

Text​

Image​

tip

Audio​

tip

Video​

tip

File​

tip

Carousel​

tip

Button​

tip

URL Button​

Postback Button​

Call Button​

Quick Reply​

List​

tip

Media​

tip

Web Action​

tip

Text

Image

Audio

Video

File

Carousel

Button

URL Button

Postback Button

Call Button

Quick Reply

List

Media

Web Action