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

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

Webhooks Page

Webhooks Dashboard

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.

Add 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

random number webhook

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

Story

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

API

Webhook Response

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

Execution

Let's see how the response is displayed to the user

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:

Story

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

API

Webhook Response

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

Execution

Let's see how the response is displayed to the user. Notice the merge tag {{memory.favourite-thing}} is replaced with 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:

Story

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

API

Webhook Response

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

Execution

Let's see how the response is displayed to the user. Notice the merge tag {{user.age}} is replaced with 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

Story

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

API

Webhook Response

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

Execution

Let's see how the response is displayed to the user.

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>"
}

Story

API

Webhook Response

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

Execution

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

Story

API

Webhook 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"
        }
      ]
    }
  ]
}

Execution

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

Story

API

Webhook Response

 {
  "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"
            }
          ]
        }
      ]
    }
  ]
}

Execution

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

Story

API

Webhook Response

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

Execution

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

Story

API

Webhook Response

{
  "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"
    }
  ]
}

Execution

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

Story

API

Webhook Response

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

Execution

Testing Webhooks

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

Test Webhook button

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.