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.

{
  "messages": [
    { "text": "Welcome to the smartest bot building tool ever —— YOCTOL.AI" },
    { "text": "what kind of bot do you want  to build?" }
  ]
}

Sending Image

Image formats of JPG, PNG and GIF are supported as messages from JSON requests.

{
  "messages": [
    {
      "attachment": {
        "type": "image",
        "payload": {
          "url": "https://yoctol.ai/images/logo.svg"
        }
      }
    }
  ]
}

You can also send out messages of Facebook pictures so you won’t need to upload the image again.

{
  "messages": [
    {
      "attachment": {
        "type": "template",
        "payload": {
          "template_type": "media",
          "elements": [
            {
              "media_type": "image",
              "url": "https://www.facebook.com/Yoctol/photos/2200581453590553",
              "buttons": [
                {
                  "title": "Yoctol Website",
                  "type": "web_url",
                  "url": "https://www.yoctol.com/"
                }
              ]
            }
          ]
        }
      },
      "quick_replies": [
        {
          "content_type": "text",
          "title": "Join Yoctol!",
          "payload": <TEXT PAYLOAD>

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.

{
  "messages": [
    {
      "attachment": {
        "type": "video",
        "payload": {
          "url": "https://ytstatic.blob.core.windows.net/yoctol-ai-website/landing-page.mp4"
        }
      }
    }
  ]
}

You can also use existing Facebook video posts as messages!

{
  "messages": [
    {
      "attachment": {
        "type": "template",
        "payload": {
          "template_type": "media",
          "elements": [
            {
              "media_type": "video",
              "url": "https://www.facebook.com/Yoctol/videos/1733376656977704/",
              "buttons": [
                {
                  "title": "Yoctol Website",
                  "type": "web_url",
                  "url": "https://www.yoctol.com/"
                }
              ]
            }
          ]
        }
      },
      "quick_replies": [
        {
          "content_type": "text",
          "title": "That's cool!",
          "payload": <TEXT PAYLOAD>
        }
      ]
    }
  ]
  }

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.

{
  "messages": [
    {
      "attachment": {
        "type": "audio",
        "payload": {
          "url": "https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3"
        }
      }
    }
  ]
}

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.

{
  "messages": [
    {
      "attachment": {
        "type": "file",
        "payload": {
          "url": "http://www.africau.edu/images/default/sample.pdf"
        }
      }
    }
  ]
}

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.

{
  "messages": [
    {
      "attachment": {
        "type": "template",
        "payload": {
          "template_type": "generic",
          "image_aspect_ratio": "square",
          "elements": [
            {
              "title": "Yoctol Image 1",
              "image_url": "https://www.yoctol.com/images/amazingBrain.png",
              "subtitle": "Size: M",
              "buttons": [
                {
                  "type": "web_url",
                  "url": "https://www.yoctol.com",
                  "title": "View Item"
                }
               ]
            },
            {
              "title": "Yoctol Image 2",
              "image_url": "https://www.yoctol.com/images/amazingBrain.png",
              "subtitle": "Size: L",
              "default_action": {
                "type": "web_url",
                "url": "https://www.yoctol.com",
              },
              "buttons": [
                {
                  "type": "web_url",
                  "url": "https://www.yoctol.com",
                  "title": "View Item"
                }
              ]
            }
          ]
        }
      }
    }
  ]
}

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/

{
  "messages": [
    {
      "attachment": {
        "type": "template",
        "payload": {
          "template_type": "list",
          "top_element_style": "large",
          "elements": [
            {
              "title": "Yoctol List Image 1",
              "image_url": "https://www.yoctol.com/images/amazingBrain.png",
              "subtitle": "Size: M",
              "buttons": [
                {
                  "type": "web_url",
                  "url": "https://www.yoctol.com",
                  "title": "Go to shop"
                }
              ]
            },
            {
              "title": "Yoctol List Image 2",
              "image_url": "https://www.yoctol.com/images/amazingBrain.png",
              "subtitle": "Size: L",
              "default_action": {
                "type": "web_url",
                "url": "https://www.yoctol.com",
                },
              "buttons": [
                {
                  "type": "web_url",
                  "url": "https://www.yoctol.com",
                  "title": "Go to shop"
                }
              ]
            }
          ]
        }
      }
    }
  ]
}

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

{
  "messages": [
    {
      "attachment": {
        "type": "template",
        "payload": {
          "template_type": "button",
          "text": "Hello!",
          "buttons": [
            {
              "type": "web_url",
              "url": "https://www.yoctol.com",
              "title": "Go to website"
            }
          ]
        }
      }
    }
  ]
}

You can also send special buttons for actions, such as dialing a number.

{
  "messages": [
    {
      "attachment": {
        "type": "template",
        "payload": {
          "template_type": "generic",
          "elements": [
            {
              "title": "Learn More",
              "image_url": "https://www.yoctol.com/images/amazingBrain.png",
              "subtitle": "You can directly contact us! If you like our service, help us to share it to others!",
              "buttons": [
                {
                  "type": "phone_number",
                  "phone_number": "[phone]",
                  "title": "Contact service agent"
                },
                {
                  "type": "element_share"
                }
              ]
            }
          ]
        }
      }
    }
  ]
}

Sending Quick Reply

The following response provides a text with quick reply buttons.

{
  "messages": [
    {
      "text": "Did you enjoy the last game of the CF Rockets?",
      "quick_replies": [
        {
          "content_type": "text",
          "title": "Loved it!",
          "payload": <TEXT PAYLOAD>
        }
      ]
    }
  ]
}