Message Types

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
Web Chat Text Message
{
type: "TEXT",
text: "Hello World!",
}
Copy
PropertyDescriptionRequired
typeTEXTY
textStringY


Image

Web Chat Image
Web Chat Image
{
type: "IMAGE",
url: "http://image.png",
}
Copy
PropertyDescriptionRequired
typeIMAGEY
urlURL of the image fileY
Idea
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
Web Chat Audio
{
type: "AUDIO",
url: "http://audio.mp3",
}
Copy
PropertyDescriptionRequired
typeAUDIOY
urlURL of the audio fileY
Idea
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
Web Chat Video
{
type: "VIDEO",
url: "http://video.mp4",
}
Copy
PropertyDescriptionRequired
typeVIDEOY
urlURL of the video fileY
Idea
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
Web Chat File
{
type: "FILE",
url: "http://file.pdf",
}
Copy
PropertyDescriptionRequired
typeFILEY
urlURL of the file attachmentY
Idea
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 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
Web Chat Carousel
Web Chat Carousel
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
PropertyDescriptionRequired
typeCAROUSELY
carouselArray of carousel items; No maximum no. of elementsY
carouselArray of carousel itemsY
image_aspect_ratioSet "horizontal" or "square"; Defaults to "horizontal"N
carousel Object
PropertyDescriptionRequired
titleStringY
subtitleStringN
image_urlURL of the image displayedN
default_actionDefault website URL when users click on the imageN
buttonsArray of buttonsN
Idea
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
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
PropertyDescriptionRequired
typeBUTTONY
textString; Limited to 640 charactersY
buttonsArray of buttons; Maximum of 3 buttons that appear as call-to-actionY
textStringY
buttonsArray of buttonsY
Idea
tip
  • You may send out Quick Reply buttons together with a button

URL Button

Web Chat URL Button
Web Chat URL Button
Open Website in New Tab
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
PropertyDescriptionRequired
typeweb_urlY
titleStringY
urlURL of the destinationY


Postback Button

Web Chat Payload Button
Web Chat Payload Button
Sending Response through 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
PropertyDescriptionRequired
typepostbackY
titleStringY
payloadCustom defined payload triggersY


Call Button

Call Button
Call Button

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

{
type: "phone_number",
title: "Call us",
payload: "+85281930208"
}
Copy
PropertyDescriptionRequired
typephone_numberY
titleStringY
payloadFormat must have "+" prefix followed by the country code, area code and local number without any spaceY


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
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
PropertyDescriptionRequired
typeQUICK_REPLIESY
textStringY
quickRepliesArray of quick reply buttonsY
quickReplies Object
PropertyDescriptionRequired
content_typeCan be set to "text" onlyY
titleString; caption of buttonY
payloadCustom defined payload triggerY


List

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

Web Chat List
Web Chat List
Web Chat List
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
PropertyDescriptionRequired
typeLISTY
listArray of list view elementsY
buttonsA button associated on the list template message at the very end; Maximum of 1 buttonN
top_element_styleSet "compact" or "large"; Defaults to "large"N
list Object
PropertyDescriptionRequired
titleStringY
subtitleStringN
image_urlURL of image displayed for each item; Required for the first element if top_element_style is largeN
default_actionDefault website URL when users click on the element rowN
Idea
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
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
PropertyDescriptionRequired
typeMEDIAY
media_typeSet "image" or "video"Y
buttonsArray of buttonsN
Idea
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
PropertyDescriptionRequired
typeWEB_ACTIONY
dataString or ObjectY
Idea
tip

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