blsmedia/bot
2
0
Fork 0
Code Activity

📝 Add webhook configuration tuto video

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-10-30 15:20:53 +01:00
parent 2d1ce73931
commit 3e02436d30
1 changed files with 54 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
apps/docs/docs/editor/blocks/integrations/webhook.md → apps/docs/docs/editor/blocks/integrations/webhook.mdx
View File

@ -11,7 +11,11 @@ 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. 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.
<img src="/img/blocks/integrations/webhook/simple-post.png" width="600" alt="Simple Webhook POST" /> <img
src="/img/blocks/integrations/webhook/simple-post.png"
width="600"
alt="Simple Webhook POST"
/>
You can also decide to customize the request sent to the 3rd party service. You can also decide to customize the request sent to the 3rd party service.
@ -32,6 +36,35 @@ You can set a custom body with your collected variables. Here is a working examp
} }
``` ```
### 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"
frameBorder={0}
webkitallowfullscreen
mozallowfullscreen
allowFullScreen
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}
/>
</div>
### Example: fetch movie information ### 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/)). 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/)).
@ -40,19 +73,35 @@ From the documentation, I know that by calling this specific URL: http://www.omd
What I need in my case is instead of inserting "Star Wars", I'd like to insert a Typebot variable: What I need in my case is instead of inserting "Star Wars", I'd like to insert a Typebot variable:
<img src="/img/blocks/integrations/webhook/variable-url.png" width="600" alt="Variable in URL" /> <img
src="/img/blocks/integrations/webhook/variable-url.png"
width="600"
alt="Variable in URL"
/>
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): 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):
<img src="/img/blocks/integrations/webhook/variable-test-value.png" width="300" alt="Variable in URL" /> <img
src="/img/blocks/integrations/webhook/variable-test-value.png"
width="300"
alt="Variable in URL"
/>
Hit the "Test the request" button and then we can save the result in multiple variables: Hit the "Test the request" button and then we can save the result in multiple variables:
<img src="/img/blocks/integrations/webhook/save-in-variable.png" width="400" alt="Variable in URL" /> <img
src="/img/blocks/integrations/webhook/save-in-variable.png"
width="400"
alt="Variable in URL"
/>
Then we can use these variables to display dynamic content in the next bubbles: Then we can use these variables to display dynamic content in the next bubbles:
<img src="/img/blocks/integrations/webhook/preview.png" width="600" alt="Variable in URL" /> <img
src="/img/blocks/integrations/webhook/preview.png"
width="600"
alt="Variable in URL"
/>
Possibilities are endless when it comes to API calls, you can litteraly call any API and fetch any data you want. Possibilities are endless when it comes to API calls, you can litteraly call any API and fetch any data you want.