JSON API for Messenger
JSON API is an advanced component providing powerful flexibility and functionality. With JSON API, you can connect your bot to a backend service, completing a highly flexible responses.
You can make many kinds of HTTP requests for your bot to analyze your backend and make the appropriate responses.
To be specific, you can run:
    1.
    Create dynamic messages
    2.
    Execute “postbacks”
    3.
    Obtain and set up user arguments (coming soon)
    4.
    Redirecting to other messages (coming soon)

Response reference:

We will parse the JSON response and send a message to the customer based on the response. For more information, please visit https://developers.facebook.com/docs/messenger-platform/reference/send-api/

Sending Text

The response below will be sent as text messages.
1
{
2
"messages": [
3
{ "text": "Welcome to the smartest bot building tool ever —— YOCTOL.AI" },
4
{ "text": "what kind of bot do you want to build?" }
5
]
6
}
Copied!

Sending Image

Image formats of JPG, PNG and GIF are supported as messages from JSON requests.
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "image",
6
"payload": {
7
"url": "https://yoctol.ai/images/logo.svg"
8
}
9
}
10
}
11
]
12
}
Copied!
You can also send out messages of Facebook pictures so you won’t need to upload the image again.
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "template",
6
"payload": {
7
"template_type": "media",
8
"elements": [
9
{
10
"media_type": "image",
11
"url": "https://www.facebook.com/Yoctol/photos/2200581453590553",
12
"buttons": [
13
{
14
"title": "Yoctol Website",
15
"type": "web_url",
16
"url": "https://www.yoctol.com/"
17
}
18
]
19
}
20
]
21
}
22
},
23
"quick_replies": [
24
{
25
"content_type": "text",
26
"title": "Join Yoctol!",
27
"payload": <TEXT PAYLOAD>
Copied!

Sending Video

The following response is an example of using a video as message. Currently, Messenger only supports MP4 files with size less than 25MB.
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "video",
6
"payload": {
7
"url": "https://ytstatic.blob.core.windows.net/yoctol-ai-website/landing-page.mp4"
8
}
9
}
10
}
11
]
12
}
Copied!
You can also use existing Facebook video posts as messages!
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "template",
6
"payload": {
7
"template_type": "media",
8
"elements": [
9
{
10
"media_type": "video",
11
"url": "https://www.facebook.com/Yoctol/videos/1733376656977704/",
12
"buttons": [
13
{
14
"title": "Yoctol Website",
15
"type": "web_url",
16
"url": "https://www.yoctol.com/"
17
}
18
]
19
}
20
]
21
}
22
},
23
"quick_replies": [
24
{
25
"content_type": "text",
26
"title": "That's cool!",
27
"payload": <TEXT PAYLOAD>
28
}
29
]
30
}
31
]
32
}
Copied!

Sending Voice Memos

The following response will send a voice memo file. Currently, Messenger only supports memo files under 25MB of size with extensions of MP3, OCG, and WAV.
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "audio",
6
"payload": {
7
"url": "https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3"
8
}
9
}
10
}
11
]
12
}
Copied!

Sending Files

The following response will prompt a file as message. Messenger at the moment only supports files under 25MB with no restricted file type.
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "file",
6
"payload": {
7
"url": "http://www.africau.edu/images/default/sample.pdf"
8
}
9
}
10
}
11
]
12
}
Copied!

Sending Carousels

The following response will create a carousel message. Please note that every element of the carousel includes an image, a description, and a button.
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "template",
6
"payload": {
7
"template_type": "generic",
8
"image_aspect_ratio": "square",
9
"elements": [
10
{
11
"title": "Yoctol Image 1",
12
"image_url": "https://www.yoctol.com/images/amazingBrain.png",
13
"subtitle": "Size: M",
14
"buttons": [
15
{
16
"type": "web_url",
17
"url": "https://www.yoctol.com",
18
"title": "View Item"
19
}
20
]
21
},
22
{
23
"title": "Yoctol Image 2",
24
"image_url": "https://www.yoctol.com/images/amazingBrain.png",
25
"subtitle": "Size: L",
26
"default_action": {
27
"type": "web_url",
28
"url": "https://www.yoctol.com",
29
},
30
"buttons": [
31
{
32
"type": "web_url",
33
"url": "https://www.yoctol.com",
34
"title": "View Item"
35
}
36
]
37
}
38
]
39
}
40
}
41
}
42
]
43
}
Copied!

Sending List Templates

The following response will return a list template message. For more information, visit https://developers.facebook.com/docs/messenger-platform/send-messages/template/list/
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "template",
6
"payload": {
7
"template_type": "list",
8
"top_element_style": "large",
9
"elements": [
10
{
11
"title": "Yoctol List Image 1",
12
"image_url": "https://www.yoctol.com/images/amazingBrain.png",
13
"subtitle": "Size: M",
14
"buttons": [
15
{
16
"type": "web_url",
17
"url": "https://www.yoctol.com",
18
"title": "Go to shop"
19
}
20
]
21
},
22
{
23
"title": "Yoctol List Image 2",
24
"image_url": "https://www.yoctol.com/images/amazingBrain.png",
25
"subtitle": "Size: L",
26
"default_action": {
27
"type": "web_url",
28
"url": "https://www.yoctol.com",
29
},
30
"buttons": [
31
{
32
"type": "web_url",
33
"url": "https://www.yoctol.com",
34
"title": "Go to shop"
35
}
36
]
37
}
38
]
39
}
40
}
41
}
42
]
43
}
Copied!

Sending Buttons

The following response will send a button template. You can manually set up the actions for each button, for example prompting to another website. For more usages of buttons, visit https://developers.facebook.com/docs/messenger-platform/send-messages/buttons
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "template",
6
"payload": {
7
"template_type": "button",
8
"text": "Hello!",
9
"buttons": [
10
{
11
"type": "web_url",
12
"url": "https://www.yoctol.com",
13
"title": "Go to website"
14
}
15
]
16
}
17
}
18
}
19
]
20
}
Copied!
You can also send special buttons for actions, such as dialing a number.
1
{
2
"messages": [
3
{
4
"attachment": {
5
"type": "template",
6
"payload": {
7
"template_type": "generic",
8
"elements": [
9
{
10
"title": "Learn More",
11
"image_url": "https://www.yoctol.com/images/amazingBrain.png",
12
"subtitle": "You can directly contact us! If you like our service, help us to share it to others!",
13
"buttons": [
14
{
15
"type": "phone_number",
16
"phone_number": "+886223222168",
17
"title": "Contact service agent"
18
},
19
{
20
"type": "element_share"
21
}
22
]
23
}
24
]
25
}
26
}
27
}
28
]
29
}
Copied!

Sending Quick Reply

The following response provides a text with quick reply buttons.
1
{
2
"messages": [
3
{
4
"text": "Did you enjoy the last game of the CF Rockets?",
5
"quick_replies": [
6
{
7
"content_type": "text",
8
"title": "Loved it!",
9
"payload": <TEXT PAYLOAD>
10
}
11
]
12
}
13
]
14
}
Copied!
Last modified 2yr ago