---
title: Webhook / API Request
---

The Webhook block allows you to either:

- Call a Webhook URL of a 3rd party service to send information from the bot.
- Make an API request to a 3rd party service to fetch information and use it in the bot.

## Call a Webhook URL

Your 3rd party service (Make.com, Zapier, etc) is giving you a Webhook URL.

You only have to paste this URL in the Webhook block and click on "Test the request". By default the 3rd party service will receive a snapshot of what the bot could send.

<Frame>
  <img
    src="/images/blocks/integrations/webhook/simple-post.png"
    alt="Simple Webhook POST"
  />
</Frame>

You can also decide to customize the request sent to the 3rd party service.

## Make an API request and fetch data

This gets more technical as you'll need to know more about HTTP request parameters.

Lots of services offer an API. They also, most likely have an API documentation. Depending on the parameters you are giving the Webhook block, it should return different info from the 3rd party service.

## Custom body

You can set a custom body with your collected variables. Here is a working example:

```json
{
  "name": "{{Name}}",
  "email": "{{Email}}"
}
```

### Example with a dummy API: CREATE and GET

This video provides a step-by-step guide to successfully configure webhook blocks in Typebot.

I demonstrate how to configure the webhook block, including the URL, method, and custom body. I also show you how to test the webhook call and save the newly created employee ID. Finally, I explain how to implement the find employee by ID endpoint and map the employee name to a variable.

<div
  style={{
    position: 'relative',
    paddingBottom: '64.5933014354067%',
    height: 0,
  }}
>
  <iframe
    src="https://www.loom.com/embed/d9aef6a37e0c43759b31be7d69c4dd6d?sid=2a24096c-9e2a-48da-aa2a-61a89877afe7"
    allowFullScreen
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
    }}
  />
</div>

### Example: fetch movie information

Let's create a bot that ask for a movie and retrieve its informations (By sending an HTTP request to the [OMDB API](http://www.omdbapi.com/)).

From the documentation, I know that by calling this specific URL: http://www.omdbapi.com/?t=Star%20Wars&apikey=1eb4670b, it will search for "Star Wars" movie information and return JSON data.

What I need in my case is instead of inserting "Star Wars", I'd like to insert a Typebot variable:

<Frame>
  <img
    src="/images/blocks/integrations/webhook/variable-url.png"
    alt="Variable in URL"
  />
</Frame>

Then, we can set a test value for our variable (it will replace the variable with this value only for the "Test the request" button):

<Frame style={{ maxWidth: '300px' }}>
  <img
    src="/images/blocks/integrations/webhook/variable-test-value.png"
    alt="Variable test values"
  />
</Frame>

Hit the "Test the request" button and then we can save the result in multiple variables:

<Frame style={{ maxWidth: '400px' }}>
  <img
    src="/images/blocks/integrations/webhook/save-in-variable.png"
    alt="Test request"
  />
</Frame>

Then we can use these variables to display dynamic content in the next bubbles:

<Frame>
  <img src="/images/blocks/integrations/webhook/preview.png" alt="Preview" />
</Frame>

Possibilities are endless when it comes to API calls, you can litteraly call any API and fetch any data you want.

Feel free to ask the [community](https://typebot.io/discord) for help if you struggle setting up a Webhook block.

## Troubleshooting

The Webhook block request fail or didn't seem to trigger? Make sure to check the [logs](/results/overview#logs). If you still can't figure out what went wrong, shoot me a message using the chat button directly in the tool 👍