Webhooks

Webhooks allow your bot to send and receive data to external internet APIs.

Webhooks allow you to connect your chatbot to your web services. Pass information from interactions and retrieve the result. Your bot is able to send and receive information from your external internet-connected systems with REST APIs.

Webhooks empower your chatbot to integrate with numerous external internet-connected systems (emails, business software, ERP and CRM platforms, and helpdesk software.)

Webhooks Page

Your bot uses these webhooks in its stories to:

Send information (generated leads, signups, queries, and emails)
Receive information (status updates, alerts, weather information, and bus timings.)

Creating a New Webhook

To create a new webhook, click on New Webhook.

Just like any other API definition, a webhook has a request and a response.

The request should be configured on the BotDistrikt platform
The response should be configured on your API server

Webhook Request

The webhook's request is configured on the BotDistrikt platform. These are the following fields you have to configure for every webhook.

Field

Description

Name

A unique name to describe what the webhook does

Method

GET or POST

URL

The URL of your API to be called

Query Params

The data parameters to send to your URL. In a GET request, these are sent as query parameters directly on the URL, while a POST request, these are sent as body parameters in JSON

Here is an example of a webhook configuration that gets a random number

The example above shows a simple webhook that calls the URL https://botdistrikt-webhook-examples.glitch.me/random_number with the query params min=10&max=20.

Webhook Response

The webhook's response has to be generated by your API server. Every webhook response should be in JSON format, and should contain at least one of the following keys:

{
  "responses": [],
  "memory": {},
  "user_attributes": {},
  "quickreplies": [],
}

responses

responses can be an array of strings. These strings add to your bot's response to your user. Take a look at how it is done in this example

Let's create a story with a webhook that returns responses

{
  "responses": [
    "Here's your random number: 20"
  ]
}

memory

memory should be an object of key-value pairs that are assigned to the user session's memory. Use these keys to remember the user's current session (product or topic they were talking about) or use the memory merge tags in responses.

For example:

Let's create a story with a webhook that returns memory. Notice the merge tag {{memory.favourite-thing}}.

{
  "memory": {
    "favourite-thing": "cars"
  }
}

user_attributes

user_attributes should be an object of key-value pairs that are assigned to the user's profile. These keys can then be used to segment users in the Users dashboard and to create targeted groups for personalized stories and broadcasts. Take a look at this example:

Let's create a story with a webhook that returns memory. Notice the merge tag {{user.age}}.

{
  "user_attributes": {
    "age": "28"
  }
}

quickreplies

quickreplies can be an array of strings. These quick replies display as options to your user. Take a look at how it is done in this example

Let's create a story with a webhook that returns quickreplies. These display as quick replies to the user

{
  "quickreplies": [
    "Chicken",
    "Fish",
    "Vegetarian",
    "Vegan"
  ]
}

Rich Responses

You may return rich responses from your webhooks for better user engagement. These responses can include rich components such as buttons, images, cards, documents, audios, and videos. For this, responses must be an array of JSON objects instead of an array of strings. The following data structures can be used for rich responses.

Image response

For an image response, use the following data structure

{
  "type": "image",
  "url": "<IMAGE_URL>"
}

{
  "responses": [
    {
      "type": "image",
      "url": "https://www.worldatlas.com/upload/6b/40/33/community-development-councils-map-of-singapore.png"
    }
  ]
}

Text with Buttons response

To include buttons within your text response, use the following data structure

{
  "type": "text",
  "text": "<TEXT_RESPONSE>",
  "buttons": [
    {
      "type": "<postback|web_url>",
      "title": "<BUTTON_TITLE>",
      "payload": "<POSTBACK_PAYLOAD>", // required if type is "postback"
      "url": "<WEBSITE_URL>" // required if type is "web_url"
    }
  ]
}

To support most messaging apps, use a maximum of 3 buttons per text response

{
  "responses": [
    {
      "type": "text",
      "text": "How would you rate your experience with us?",
      "buttons": [
        {
          "type": "postback",
          "title": "👍 Like",
          "payload": "rating_like_user_227323"
        },
        {
          "type": "postback",
          "title": "👍 Dislike",
          "payload": "rating_dislike_user_227323"
        },
        {
          "type": "web_url",
          "title": "🌐 Learn More",
          "url": "https://mywebsite.com/about-our-rating-system"
        }
      ]
    }
  ]
}

Cards response

To display a carousel of cards, use the following data structure

{
  "type": "cards",
  "elements": [
    {
      "image_url": "<IMAGE_URL>",
      "title": "<TITLE>",
      "subtitle": "<SUBTITLE>",
      "buttons": [
        {
          "type": "<postback|web_url>",
          "title": "<BUTTON_TITLE>",
          "payload": "<POSTBACK_PAYLOAD>", // required if type is "postback"
          "url": "<WEBSITE_URL>" // required if type is "web_url"
        }
      ]
    }
  ],
  "image_aspect_ratio": "<original|horizontal|square>", // If a messaging app supports it, display cards in a different aspect ratio
  "page_limit": 8 // defaults to 8
}

Cards are paginated by default at 8 cards. If you would like to increase or reduce the number of cards to show per page, change the value of page_limit in the webhook response

To support most messaging apps, use a maximum of 3 buttons per card

 {
  "responses": [
    {
      "type": "cards",
      "elements": [
        {
          "image_url": "https://www.foodandwine.com/thmb/R29hsuwfvCakNb9E7htyI8fgfrc=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/florentine-butter-chicken-ft-recipe0919-3fef0bddd6614a70b2fe450c11298acb.jpg",
          "title": "Florentine Butter Chicken",
          "subtitle": "Butter Chicken from Florence with a twist 🐓",
          "buttons": [
            {
              "type": "postback",
              "title": "Order",
              "payload": "addcart_florentinebutterchicken"
            },
            {
              "type": "web_url",
              "title": "Learn More",
              "url": "https://www.foodandwine.com/travel/europe/italy/italian-main-dishes/florentine-butter-chicken"
            }
          ]
        },
        {
          "image_url": "https://www.foodandwine.com/thmb/g-2_63IdHag2p5Ayhcw2KI04svI=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/farro-mafaldine-with-black-truffle-butter-and-mushrooms-FT-RECIPE1220-71c4d864d58f42b1a1addd91572c9e47.jpg",
          "title": "Truffle Faro Pasta",
          "subtitle": "Pair creamy butter, nutty farro pasta, and a fortifying mix of wild mushrooms 🍄",
          "buttons": [
            {
              "type": "postback",
              "title": "Order",
              "payload": "addcart_trufflefaropasta"
            },
            {
              "type": "web_url",
              "title": "Learn More",
              "url": "https://www.foodandwine.com/travel/europe/italy/italian-main-dishes/truffle-faro-pasta"
            }
          ]
        }
      ]
    }
  ]
}

Document Response

To display a document response that a user can download, use the following data structure

{
  "type": "document",
  "url": "<DOCUMENT_URL>",
  "name": "<DOCUMENT_NAME>.<FILE_EXTENSION>"
}

Remember to include the file extension within the document's name to allow the user to open it using the intended file format, e.g. pdf, docx, pptx, txt

{
  "responses": [
    {
      "type": "document",
      "url": "https://worldofwarships.eu/dcont/fb/document/e7d8b942-142f-11ef-9f3c-b49691e6ead0.pdf",
      "name": "Contest Conditions.pdf"
    }
  ]
}

Audio response

To show a playable audio file to the user, use the following data structure

{
  "type": "audio",
  "url": "<AUDIO_URL>",
  "name": "<AUDIO_NAME>.<FILE_EXTENSION>"
}

Remember to include the file extension within the audio's name to allow the user to open it using the intended file format, e.g. wav, mp3

{
  "responses": [
    {
      "type": "audio",
      "url": "https://science.nasa.gov/wp-content/uploads/2024/03/48520_E1-PIA26041-The_Sound_of_MOXIE_at_Work_on_Mars.wav",
      "name": "Secret Code.wav"
    }
  ]
}

Video response

To display a playable video file to the user, use the following data structure

{
  "type": "video",
  "url": "<VIDEO_URL>",
  "name": "<VIDEO_NAME>.<FILE_EXTENSION>"
}

Remember to include the file extension within the video's name to allow the user to open it using the intended file format, e.g. mp4, mpg

{
  "responses": [
    {
      "type": "video",
      "url": "https://i.imgur.com/UDWU7r7.mp4",
      "name": "Unboxing Camera.mp4"
    }
  ]
}

Testing Webhooks

You may test your webhooks using the Test Webhook button within the webhook editor

When you click the button, a window will pop up with two panes. The left pane allows you to edit the inputs of the webhook directly, and the right pane shows you the output - the preview of what the webhook's response will look like within the chatbot's response. You can click the Retest button below the right pane to refresh the output from the webhook

Remember to substitute variables within your URL, Headers, Query Params, and JSON Body Params with string values while testing. E.g. if you are sending a variable {{user.first_name}} in any of the webhook fields, remember to change it to the user's actual first name, e.g. John. The Webhook Tester assumes the strings sent in the request are the final values.