---
title: Getting started with webhooks
slug: getting-started-with-webhooks
description: Learn how to use webhooks in Kindly with this comprehensive document. Discover how to incorporate webhooks in dialogues or fallbacks and receive POST requests from the Kindly backend. Step-by-step examples on setting up a web server using Python and Node,
icon: 🧑‍💻
docTags: 
createdAt: 2022-05-13T15:53:08.000Z
---

The fastest way to connect a service or application with Kindly is using our webhooks.

Webhooks can be added to any dialogue or fallback, and are simply sent via a [POST](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) request by the Kindly backend to the predefined URL.

For a complete reference on webhooks see the [Webhook reference](docId\:Ot0NvUq_I76Ze_M5vRvUC).

## Backend setup

This part shows how to set up a backend that will act as a server to receive the webhook. 

If you already have that set up, maybe in a cloud function or one of your existing servers, feel free to skip to the *Frontend setup*.

### Set up a simple web server

For this example, we'll set up and use our own web server to POST to. Our server will have a single endpoint, that simply returns a message to our bot.

### Python

The example server below is running Python through [Flask](http://flask.pocoo.org/). Upon receiving the webhook payload, the server will respond by returning a simple message.

```python
from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/kindly', methods=['POST'])
def get():
    response = {
        'reply': 'Hello from server!',
    }

    return jsonify(response)
```

When running the script above, the server will run on localhost, with port 9000

### Node

The example server below is running on [Hapi](https://hapijs.com/). Upon receiving the webhook payload, the server will respond by returning a simple message.

```javascript
const Hapi = require("@hapi/hapi");

const server = Hapi.server({
  host: "0.0.0.0",
  port: 9000,
});

server.route({
  method: "POST",
  path: "/kindly",
  handler: (_request, h) => ({
    reply: "Hello from server!",
  }),
});

server.start();
```

When running the script above, the server will run on localhost, with port 9000

### Set up ngrok

To test our newly configured server, we'll need to serve the script through [ngrok](https://ngrok.com/download). Ngrok is necessary for Kindly to communicate with our development machine (localhost), using it makes it a lot faster to develop, test and prototype new integrations and webhooks.

Follow the link above to set up ngrok on your machine.

When ngrok is set up, we need to point it to the port on which our server is running. This can be acheived with the following command `./ngrok http 9000`. Note that this needs to be done inside the folder you installed ngrok.

If the command is successful, something similar to the following will be visible in our terminal.

```text
Session Status                online
Account                       Bob bobsen (Plan: Free)
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://725a9731.ngrok.io -> localhost:9000
Forwarding                    https://725a9731.ngrok.io -> localhost:9000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
```

Now your server is up and running, and it's exposed to a public url, ready to receive webhooks.

## Frontend setup

This part shows how to add a webhook in the Kindly Platform and how to debug it.

### Create a new dialogue

Webhooks are added to dialogues. Therefore, in the *Build* section, navigate to an existing dialogue (or you can create one from scratch), then *Output*, and under *Advanced features* paste in the address ngrok provided in the *Webhook* field. In my case, I would paste in `http://725a9731.ngrok.io`.

::Image[]{src="https://api.archbee.com/api/optimize/VLyTaamiYpVSyrmNspQvO/Ong71yu1bP7HKWfmbw053_spaces-ldk3ajtbnk03ia96g-quploadsgit-blob-90eb5347afb3793c9843ec5080512134ae917ed1webhook-url.png" size="56" width="1020" height="382" caption="Webhook URL" position="center" showCaption="true"}

Be sure to include the endpoint path in the URL which we used in our server - `/kindly` - to get the correct response.

### Trigger webhook

Now we're ready to test our webhook through the chat bubble, by triggering the dialogue we created earlier. If everything is set up correctly, the bot will respond with our message.

::Image[]{src="https://api.archbee.com/api/optimize/VLyTaamiYpVSyrmNspQvO/L9Gu_uy6dnDoJg41MQ6iM_webhook-response.png" size="36" width="762" height="1252" caption="Webhook response" position="center" showCaption="true"}

### Inspect response

When the dialogue is triggered, and the response is received, we can inspect the response in the debug console. The object created in the console will give us a detailed overview of the payload sent, and received.

![](https://api.archbee.com/api/optimize/VLyTaamiYpVSyrmNspQvO/rulNDRzcfvSfuFq1ul8Kg_webook-console.png "Debug console")