blsmedia/bot
2
0
Fork 0
Code Activity

📝 Migrate from Docusaurus to Mintlify (#1115)

Browse Source 
Closes #868
This commit is contained in:
Baptiste Arnaud
2023-12-22 09:13:53 +01:00
committed by GitHub
parent 512bb09282
commit 1e5fa5a575
450 changed files with 49522 additions and 104787 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/docs/editor/blocks/bubbles/audio.mdx Normal file
View File

@@ -0,0 +1,36 @@
---
title: Audio
icon: headphones
---
The Audio bubble block allows you to play a recorded audio to your user. You can upload an audio file or directly paste a URL.
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/bubbles/audio/editor.png"
alt="Audio bubble"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<video
controls
autoPlay
className="rounded-lg"
src="/images/blocks/bubbles/audio/bot.mp4"
></video>
</Tab>
</Tabs>
## Troobleshooting
### The first audio bubble is not autoplaying
That is expected. Most web browser have a policy that prevents audio from playing automatically. The user needs to interact with the page before the audio can be played.
### The audio is not playing on iOS / Safari
It most likely means that your audio file is malformed. Depending on where the file comes from, you need to make sure the encoding is done correctly. To check if the file is correctly encoded you should be able to download it and play the file locally on your computer.

37
apps/docs/editor/blocks/bubbles/embed.mdx Normal file
View File

@@ -0,0 +1,37 @@
---
title: Embed
icon: browser
---
The Embed bubble block allows you to display a website or an iframe to your user. You can paste a video URL from many sources including YouTube, Vimeo, and mp4.
<Info>
Not all websites allow embedding. If you see a blank space, it means the
website you're trying to embed doesn't allow it.
</Info>
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/bubbles/embed.png"
alt="Embed bubble"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<video
controls
autoPlay
className="rounded-lg"
src="/images/blocks/bubbles/embed-chat.mp4"
></video>
</Tab>
</Tabs>
## Embed a PDF hosted on Google Drive
For this, you'll need to select the pdf file you want to embed. Right click > Preview > More actions > Open in a new window. Now click More actions > Embed item.
Copy the embed code and paste it in the Embed bubble block configuration.

27
apps/docs/editor/blocks/bubbles/image.mdx Normal file
View File

@@ -0,0 +1,27 @@
---
title: Image
icon: image
---
The Image bubble block allows you to display an image to your user. You can upload an image, paste a URL or choose a GIF from the Giphy native integration.
<Tabs>
<Tab title="Flow">
<Frame style={{ maxWidth: '400px' }}>
<img
src="/images/blocks/bubbles/image.png"
alt="Image bubble"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<video
style={{ maxWidth: '400px' }}
controls
autoPlay
className="rounded-lg"
src="/images/blocks/bubbles/image-chat.mp4"
></video>
</Tab>
</Tabs>

36
apps/docs/editor/blocks/bubbles/text.mdx Normal file
View File

@@ -0,0 +1,36 @@
---
title: Text
icon: font
---
The Text bubble block allows you to display a simple text bubble to your user. They can be chained and it will create a smooth animation:
<Tabs>
<Tab title="Flow">
<Frame style={{ maxWidth: '400px' }}>
<img
src="/images/blocks/bubbles/3-text-bubbles.png"
alt="Text bubbles"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<video
controls
autoPlay
className="rounded-lg"
src="/images/blocks/bubbles/3-text-bubbles-chat.mp4"
></video>
</Tab>
</Tabs>
## Insert a link
You can insert a link in your text bubbles using the link icon in the editor:
<Frame style={{ maxWidth: '400px' }}>
<img src="/images/blocks/bubbles/text-link.png" alt="Text link icon" />
</Frame>
You can insert any links starting with `http:`, `https:`, `mailto:`, `tel:` or `sms:`. It can also be a variable.

26
apps/docs/editor/blocks/bubbles/video.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: Video
icon: video
---
The Video bubble block allows you to display a video to your user. You can paste a video URL from many sources including YouTube, Vimeo, and mp4.
<Tabs>
<Tab title="Flow">
<Frame style={{ maxWidth: '400px' }}>
<img
src="/images/blocks/bubbles/video.png"
alt="Video bubble"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<video
controls
autoPlay
className="rounded-lg"
src="/images/blocks/bubbles/video-chat.mp4"
></video>
</Tab>
</Tabs>

103
apps/docs/editor/blocks/inputs/buttons.mdx Normal file
View File

@@ -0,0 +1,103 @@
---
title: Buttons
icon: arrow-pointer
---
The Buttons input block allows you to offer your user predefined choices, either single choice options or multiple choices
## Single choice
Single choice input allows you to directly split your flow depending on what the user selects by linking any choice to a specific path in your flow.
Link the "Default" item to determine the default path independent of what the user chooses.
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/single-choice-flow.png"
alt="Buttons input in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/single-choice-bot.png"
alt="Buttons input in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>
## Multiple choices
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/multiple-choices-flow.png"
alt="Multiple choices in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<video
controls
autoPlay
className="rounded-lg"
src="/images/blocks/inputs/multiple-choices-bot.mp4"
></video>
</Tab>
</Tabs>
## Dynamic items
Instead of adding items manually, you can also display a dynamic list of items based on a variable.
<Frame>
<img
src="/images/blocks/inputs/buttons-dynamic.png"
alt="Dynamic items list"
/>
</Frame>
This is useful when you want to display a list of items from another data source. For this to work, you first need to make sure the variable you are using contains a list of values. This list can be extracted from an integration block like Google Sheets.
## How to
### Add a "Other" button
Sometimes you want to allow your user to enter a value that is not in the predefined choices. You can do this by adding a "Other" button and connect it to a "Text" input block.
<Frame>
<img src="/images/blocks/inputs/buttons-other.png" alt="Other button flow" />
</Frame>
### Different replies based on multiple choices
If you'd like to have different replies based on the multiple choices the user selects. You will need to
1. Save the answer into a variable.
2. Add a "Condition" block
3. Add comparisons based on the value of this variable
<Frame>
<img
src="/images/blocks/inputs/buttons-condition.png"
alt="Condition multiple button flow"
/>
</Frame>
### Conditionally display a certain button
<div className="relative" style={{ paddingBottom: '64.5933014354067%' }}>
<iframe
src="https://www.youtube.com/embed/c7LhC5BRSIA"
allowFullScreen
className="absolute top-0 left-0 w-full h-full"
/>
</div>

50
apps/docs/editor/blocks/inputs/date.mdx Normal file
View File

@@ -0,0 +1,50 @@
---
title: Date
icon: calendar
---
The Date input block allows you to ask your user for a date. You can ask for a specific date or range and include time:
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/date-flow.png"
alt="Date input in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/date-bot.png"
alt="Date input in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>
The input will use the native date picker depending on the device and browser used to answer the bot. For example on Firefox it looks like this:
<Frame style={{ maxWidth: '400px' }}>
<img
src="/images/blocks/inputs/date-native-picker.png"
alt="Date native picker"
/>
</Frame>
## Format
The `Format` setting lets you customize the picked date format. Under the hood, it is done using the [date-fns](https://date-fns.org/) library. You can use any of the [formatting tokens](https://date-fns.org/docs/format) supported by the library.
Here are some examples:
```text
yyyy-MM-dd
yyyy-MM-dd HH:mm:ss
dd/MM/yy
dd/MM/yyyy HH:mm:ss
d.MM.yy
```

31
apps/docs/editor/blocks/inputs/email.mdx Normal file
View File

@@ -0,0 +1,31 @@
---
title: Email
icon: at
---
The Email input block allows you to ask your user for an email. It will check if it is properly formatted.
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/email-flow.png"
alt="Email input in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/email-bot.png"
alt="Email input in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>
The retry message will be displayed whenever Typebot detected that the email is not properly formatted.
It won't check if the email address is **valid**. To do that, you will have to trigger a [Webhook block](/editor/blocks/integrations/webhook) and call an email validation service API.

33
apps/docs/editor/blocks/inputs/file-upload.mdx Normal file
View File

@@ -0,0 +1,33 @@
---
title: File upload
icon: upload
---
The File upload input block allows you to collect files from your user.
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/file-upload-flow.png"
alt="File upload input in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/file-upload-bot.png"
alt="File upload input in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>
The placeholder accepts [HTML](https://en.wikipedia.org/wiki/HTML).
## Size limit
There is a 10MB fixed limit per uploaded file. If you want your respondents to upload larger files, you should ask them to upload their files to a cloud storage service (e.g. Google Drive, Dropbox, etc.) and share the link with you.

27
apps/docs/editor/blocks/inputs/number.mdx Normal file
View File

@@ -0,0 +1,27 @@
---
title: Number
icon: hashtag
---
The Number input block allows you to ask your user for a number. You can configure a minimum, a maximum and a step:
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/number-flow.png"
alt="Number input in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/number-bot.png"
alt="Number input in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>

54
apps/docs/editor/blocks/inputs/payment.mdx Normal file
View File

@@ -0,0 +1,54 @@
---
title: Payment
icon: credit-card
---
The Payment input block allows you to collect payment. You first need to add your Stripe:
## Connect Stripe account
After clicking on `Select an account > Connect new`, a configuration popup appears:
<Frame>
<img
src="/images/blocks/inputs/configure-stripe.png"
alt="Stripe configuration"
/>
</Frame>
- Account name could be anything you'd like it's not something that has to come from Stripe.
- Test keys can be found here: https://dashboard.stripe.com/test/apikeys
- Live keys can be found here: https://dashboard.stripe.com/apikeys
Test keys will be used in the preview for testing purposes. Live keys will be used in the published bot.
If you'd still like to still use the test keys in the published bot you just need to also fill in the test keys into the live keys inputs.
## Input configuration
Once you have a Stripe account, you can select it and configure your input:
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/payment-flow.png"
alt="Payment input in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/payment-bot.png"
alt="Payment input in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>
Make sure to enable any payment method you'd like to appear in your Stripe dashboard at this URL: https://dashboard.stripe.com/settings/payment_methods.
This is where you can enable Cards, Apple Pay, Google Pay, Alipay, WeChat Pay etc.

27
apps/docs/editor/blocks/inputs/phone-number.mdx Normal file
View File

@@ -0,0 +1,27 @@
---
title: Phone
icon: phone
---
The Phone number input block allows you to ask your user for a phone number and make sure it is properly formatted. It will also make sure that the number is stored in a consistent format. You can choose the default country code or leave it to international:
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/phone-number-flow.png"
alt="Phone number input in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/phone-number-bot.png"
alt="Phone number input in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>

15
apps/docs/editor/blocks/inputs/picture-choice.mdx Normal file
View File

@@ -0,0 +1,15 @@
---
title: Picture choice
icon: images
---
The Picture choice input block allows you to offer your user predefined choices illustrated with a picture, either single choice options or multiple choices
<Frame>
<img
src="/images/blocks/inputs/picture-choice.png"
alt="Picture choice overview"
/>
</Frame>
For advanced configuration, check out the [Buttons block](./buttons) documentation. It works the same way.

58
apps/docs/editor/blocks/inputs/rating.mdx Normal file
View File

@@ -0,0 +1,58 @@
---
title: Rating
icon: star
---
The Rating input block allows you to ask your user for a rating.
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/rating-flow.png"
alt="Rating input in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/rating-bot.png"
alt="Rating input in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>
The rating input is very customizable, you can set a custom range, numbers or a custom icon, and bottom labels.
## NPS
You could for example configure it so that it collects the Net promoter score:
<Tabs>
<Tab title="Flow">
<Frame style={{ maxWidth: '400px' }}>
<img
src="/images/blocks/inputs/nps-flow.png"
alt="NPS configuration"
className="rounded-lg w-12"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/nps-bot.png"
alt="NPS in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>
## Custom icon
To insert a custom icon, you'll need to insert SVG content. It should start with `<svg>` and end with `</svg>`. You can find great open-source icons on [Feather](https://feathericons.com/)

54
apps/docs/editor/blocks/inputs/text.mdx Normal file
View File

@@ -0,0 +1,54 @@
---
title: Text input
icon: text
---
The Text input block allows you to ask your user for a text answer.
## Short text input
By default the text input is expecting a short answer:
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/short-text-flow.png"
alt="Text input"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/short-text-bot.png"
alt="Text input"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>
## Long text input
You can also ask your user for a longer text answer by enabling it in the input options:
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/long-text-flow.png"
alt="Long text input flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<img
src="/images/blocks/inputs/long-text-bot.png"
alt="Long text input bot"
className="rounded-lg"
/>
</Tab>
</Tabs>

31
apps/docs/editor/blocks/inputs/website.mdx Normal file
View File

@@ -0,0 +1,31 @@
---
title: Website
icon: link
---
The Website input block allows you to ask your user for a URL. It will check if it is properly formatted.
<Tabs>
<Tab title="Flow">
<Frame>
<img
src="/images/blocks/inputs/website-flow.png"
alt="Website input in flow"
className="rounded-lg"
/>
</Frame>
</Tab>
<Tab title="Bot">
<Frame>
<img
src="/images/blocks/inputs/website-bot.png"
alt="Website input in bot"
className="rounded-lg"
/>
</Frame>
</Tab>
</Tabs>
The retry message will be displayed whenever Typebot detected that the email is not properly formatted.
It won't check if the email address is **valid**. To do that, you will have to trigger a [Webhook block](/editor/blocks/integrations/webhook) and call an email validation service API.

61
apps/docs/editor/blocks/integrations/chatwoot.mdx Normal file
View File

@@ -0,0 +1,61 @@
---
title: Chatwoot
---
The Chatwoot integration block allows you to open a Chatwoot widget to allow your user to directly talk to a human. It allows you to add a Live Chat layer on your typebot.
## Requirements
For this integration, you need a Chatwoot account and create a "Website" inbox:
<Frame>
<img
src="/images/blocks/integrations/chatwoot/website-inbox.png"
alt="Create website inbox"
/>
</Frame>
## Setup
Insert a Chatwoot block where you want to trigger the widget:
<Frame>
<img
src="/images/blocks/integrations/chatwoot/options.png"
alt="Chatwoot block"
/>
</Frame>
To find your website token, head over to Chatwoot in your Inbox settings:
<Frame>
<img
src="/images/blocks/integrations/chatwoot/website-token.png"
alt="Find website token"
/>
</Frame>
You can prefill user information by adding collected variables to the "Set user details" inputs.
For example, if you set the "Email" input to "john@gmail.com" then Chatwoot will automatically associate this email to the current user.
## Custom attributes
You can add these custom attributes that Typebot will automatically fill in for you:
### Result URL
You can link the current result URL to the Chatwoot conversation by creating this custom attribute:
<Frame>
<img
src="/images/blocks/integrations/chatwoot/custom-attribute.png"
alt="Chatwoot custom attribute"
/>
</Frame>
### Set user behavior
If you are prefilling user information, by default, if you leave the ID input empty, it will set the Chatwoot user ID as either the `Email` or the Result ID.
Setting the `Email` as the ID allows us to avoid having contact not properly merged together (https://github.com/chatwoot/chatwoot/issues/2811)

26
apps/docs/editor/blocks/integrations/google-analytics.mdx Normal file
View File

@@ -0,0 +1,26 @@
---
title: Google Analytics
---
The Google Analytics integration block allows you to track a Google Analytics event at a given moment in your flow.
<Frame>
<img src="/images/blocks/integrations/ga.png" alt="Google Analytics block" />
</Frame>
When your flow contains a Google Analytics block, under the hood it:
- Initialize GA and track a "Page view" event on page load.
- Track the event if any when the block is executed.
## Track conversions with Google Ads
To track conversions for your Google Ad, you can add a Google Analytics block whenever you'd like to trigger the conversion event with the following properties:
- Event action: conversion
- Send to: \<YOUR_AW_ID\>
- Value (optional): a number to quantify the conversion
## Troubleshooting
To help you debug how your Google Analytics behaves, I suggest you add the [Google Analytics Debugger](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna) extension to your browser.

40
apps/docs/editor/blocks/integrations/google-sheets.mdx Normal file
View File

@@ -0,0 +1,40 @@
---
title: Google Sheets
---
With the Google Sheets integration step, you can inject, update or get data from Google Spreadsheets. For an overview of how it works check out this video
<div className="relative" style={{ paddingBottom: '64.5933014354067%' }}>
<iframe
src="https://www.youtube.com/embed/UjlZvlqg6mA"
allowFullScreen
className="absolute top-0 left-0 w-full h-full"
/>
</div>
In order to properly work, your spreadsheet must have its first row as a header row. This is how the block knows which column to update:
<Frame>
<img
src="/images/blocks/integrations/spreadsheet-format.png"
alt="Google Analytics block"
/>
</Frame>
## How to add the submission date to my row?
For this, you will need to set a new variable with the value "Now" before the Google Sheets block. Then you can simply use this variable in the Google Sheets block.
## Advanced
<div className="relative" style={{ paddingBottom: '64.5933014354067%' }}>
<iframe
src="https://www.youtube.com/embed/2E0gK-PwFK4"
allowFullScreen
className="absolute top-0 left-0 w-full h-full"
/>
</div>
## Troubleshooting
The Google sheets block didn't insert or update a row but was supposed to? 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 👍

40
apps/docs/editor/blocks/integrations/make-com.mdx Normal file
View File

@@ -0,0 +1,40 @@
---
title: Make.com
---
The Make.com integration block allows you to trigger a scenario at a given moment in your flow.
1. Insert a Make.com block where you want to trigger the scenario:
<Frame>
<img src="/images/blocks/integrations/make-com.png" alt="Make.com block" />
</Frame>
2. Follow the instructions on Make.com to create and enable your scenario.
3. Run the scenario on Make.com.
4. Go back to Typebot, click on your Make.com block and click on "Test the request".
5. The scenario will be triggered on Make.com.
## Video tutorial
<div className="relative" style={{ paddingBottom: '64.5933014354067%' }}>
<iframe
src="https://www.youtube.com/embed/V-y1Orys_kY"
allowFullScreen
className="absolute top-0 left-0 w-full h-full"
/>
</div>
## Return data from Make.com
You can return data from Make.com by adding a "Webhook response" module at the end of your scenario.
<Frame>
<img
src="/images/blocks/integrations/make-com-return.png"
alt="Make.com block webhook response module"
/>
</Frame>

14
apps/docs/editor/blocks/integrations/meta-pixel.mdx Normal file
View File

@@ -0,0 +1,14 @@
---
title: Meta pixel
---
The Pixel integration block allows you to add a Meta pixel to your bot and track specific events.
<Frame>
<img src="/images/blocks/integrations/pixel.png" alt="Pixel block" />
</Frame>
When your flow contains a pixel block, under the hood it:
- Initialize the pixel and track "PageView" event on page load.
- Track the event if any when the block is executed.

104
apps/docs/editor/blocks/integrations/openai.mdx Normal file
View File

@@ -0,0 +1,104 @@
---
title: OpenAI
---
## Create chat completion
With the OpenAI block, you can create a chat completion based on your user queries and display the answer back to your typebot.
<Frame>
<img
src="/images/blocks/integrations/openai/overview.png"
alt="OpenAI block"
/>
</Frame>
This integration comes with a convenient message type called **Dialogue**. It allows you to easily pass a sequence of saved assistant / user messages history to OpenAI:
<Frame>
<img
src="/images/blocks/integrations/openai/append-to-history.png"
alt="OpenAI messages sequence"
/>
</Frame>
Then you can give the OpenAI block access to this sequence of messages:
<Frame>
<img
src="/images/blocks/integrations/openai/dialogue-usage.png"
alt="OpenAI messages sequence"
/>
</Frame>
## Create speech
This action allows you to transform a text input into an audio URL that you can reuse in your bot.
:::note
The generated audio URLs are temporary and expire after 7 days. If you need to store them, make sure to download them before they expire.
:::
<div
style={{
position: 'relative',
paddingBottom: '64.5933014354067%',
height: 0,
}}
>
<iframe
src="https://www.loom.com/embed/ccca6cbf16ed4d01b513836775db06a3?sid=22a54baa-000b-435a-b770-bfaf32bfe453"
mozallowfullscreen
allowFullScreen
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
marginBottom: '1rem',
}}
/>
</div>
## Using Multiple Open AI Blocks: Tips and Tricks
In this video, I discuss some important things to keep in mind when using multiple Open AI blocks consecutively. I provide an example where we ask the user for a topic, generate a summary, and display a list of authors.
I explain that streaming messages is not possible when they are prefixed or suffixed by text, and that all blocks need to compute before displaying anything.
I also demonstrate how formatting can be affected by the presence of text before a message. Watch this video to learn how to optimize your use of multiple Open AI blocks.
<div
style={{
position: 'relative',
paddingBottom: '64.63195691202873%',
height: 0,
}}
>
<iframe
src="https://www.loom.com/embed/35dc8af6b9244762acc4a5acf275fb43?sid=3723aa59-13ac-49f2-a95b-5608807ac76d"
mozallowfullscreen
allowfullscreen
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}
></iframe>
</div>
## Troobleshooting
### Error message: "OpenAI block returned error"
It means your OpenAI block is not configured properly. Please check the following:
- You have selected an OpenAI account
- You have at least 1 **user** message or a **Dialogue** message set up.
### It returns an empty message
It most likely mean that you exceeded your OpenAI free quota. Add a payment method to your OpenAI account to continue using it.

18
apps/docs/editor/blocks/integrations/pabbly-connect.mdx Normal file
View File

@@ -0,0 +1,18 @@
---
title: Pabbly Connect
---
The Pabbly Connect integration block allows you to trigger a workflow at a given moment in your flow.
1. Insert a Pabbly Connect block where you want to trigger the workflow:
<Frame>
<img
src="/images/blocks/integrations/pabbly-connect.png"
alt="Pabbly Connect block"
/>
</Frame>
2. Follow the instructions on Pabbly Connect
3. It should give you a URL that you need to paste into the block configuration.
4. Pabbly Connect block should be properly configured.

29
apps/docs/editor/blocks/integrations/send-email.mdx Normal file
View File

@@ -0,0 +1,29 @@
---
title: Send email
---
If you want to receive an email notification each time a user completes the bot or if you want to send a recap to the user, the Email block is made for you:
<Frame style={{ maxWidth: '400px' }}>
<img src="/images/blocks/integrations/email.png" alt="Email block example" />
</Frame>
By default, the email will be sent from `notifications@get-typebot.com` with default content based on what your new lead has replied to. It will look like this:
<Frame>
<img
src="/images/blocks/integrations/default-email.png"
alt="Email block example"
/>
</Frame>
You can choose to use your email (SMTP) account, using the "From:" dropdown and filling in your credentials.
You can also customize the email content with your text/HTML.
## Attachments
You can attach files to your email with the Attachments option. Make sure that it points to a variable that is linked to a File upload input block.
## Troubleshooting
You are supposed to receive an email but it doesn't get to your inbox? 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 👍

114
apps/docs/editor/blocks/integrations/webhook.mdx Normal file
View File

@@ -0,0 +1,114 @@
---
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"
mozallowfullscreen
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 👍

25
apps/docs/editor/blocks/integrations/zapier.mdx Normal file
View File

@@ -0,0 +1,25 @@
---
title: Zapier
---
The Zapier integration block allows you to trigger a zap at a given moment in your flow.
1. Insert a Zapier block where you want to trigger the Zap:
<Frame>
<img src="/images/blocks/integrations/zapier.png" alt="Zapier block" />
</Frame>
2. Follow the instructions on Zapier to create and enable your Zap.
3. Zapier block should be properly configured.
## Video tutorial
<div className="relative" style={{ paddingBottom: '64.5933014354067%' }}>
<iframe
src="https://www.youtube.com/embed/2ZskGItI_Zo"
allowFullScreen
className="absolute top-0 left-0 w-full h-full"
/>
</div>

48
apps/docs/editor/blocks/integrations/zemantic-ai.mdx Normal file
View File

@@ -0,0 +1,48 @@
---
title: Zemantic AI
---
With the Zemantic AI block, you can search and retrieve results or LLM summaries from your documents stored on Zemantic AI.
<Frame>
<img
src="/images/blocks/integrations/zemanticAi/overview.png"
alt="Zemantic AI block"
/>
</Frame>
## Settings
This integration requires a Zemantic AI account. If you don't have one yet, you can create one [here](https://zemantic.ai/).
The block has the following settings:
<Frame>
<img
src="/images/blocks/integrations/zemanticAi/settings.png"
alt="Zemantic AI settings"
/>
</Frame>
- Zemantic AI account: create or select the Zemantic AI credentials you want to use.
- Project ID: The project id of the project containing the documents you want to search
- Question or Query: The question you want to ask your Zemantic AI documents
- Max Results: The maximum number of results you want to retrieve
### Prompt Settings
- System Prompt: The prompt you want to use to guide the LLM behavior
- Prompt: The prompt you want to use to summarize your documents
## Troobleshooting
### Error message: "Zemantic AI block returned error"
It means your Zemantic AI block is not configured properly. Please check the following:
- You have selected an Zemantic AI account
- You have filled out the Question or Query field
### It returns an empty message
Either you misconfigured the block or your may have have gone over the context limits of the LLM. You can try lowering the number of results to retrieve or shortening your prompt.

21
apps/docs/editor/blocks/logic/ab-test.mdx Normal file
View File

@@ -0,0 +1,21 @@
---
title: AB Test
icon: vials
---
The AB Test block allows you to split the path in 2 randomly. It's great way to test the performance of 2 different paths.
<Frame>
<img src="/images/blocks/logic/abTest.png" alt="AB Test block" />
</Frame>
## More than 2 paths
You can stack multiple AB test blocks to add more random paths
<Frame>
<img
src="/images/blocks/logic/abTestMulti.png"
alt="AB Test block multiple paths"
/>
</Frame>

20
apps/docs/editor/blocks/logic/condition.mdx Normal file
View File

@@ -0,0 +1,20 @@
---
title: Condition
icon: code-branch
---
The Condition block allows you to split your flow in two based on a condition.
<Frame caption='This can be translated to: "If Score is greater than 20 then go to this path. Otherwise, go to the other path."'>
<img src="/images/blocks/logic/condition.png" alt="Condition" />
</Frame>
A condition can contain different comparisons that are evaluated in order and linked with a logical operator: 'AND' or 'OR'.
<div className="relative" style={{ paddingBottom: '64.5933014354067%' }}>
<iframe
src="https://www.youtube.com/embed/47KyLHzdpnY"
allowFullScreen
className="absolute top-0 left-0 w-full h-full"
/>
</div>

10
apps/docs/editor/blocks/logic/jump.mdx Normal file
View File

@@ -0,0 +1,10 @@
---
title: Jump
icon: person-to-portal
---
The jump block allows you jump to a specific block. This comes handy if you want to keep your flow clean
<Frame>
<img src="/images/blocks/logic/jump.jpeg" alt="Jump block" />
</Frame>

16
apps/docs/editor/blocks/logic/redirect.mdx Normal file
View File

@@ -0,0 +1,16 @@
---
title: Redirect
icon: arrow-up-right-from-square
---
The Redirect logic block allows you to redirect your user to a given URL either on the current tab or in a new tab.
<Warning>
Safari and iOS devices will block a redirect in a new tab by default so a
popup will be displayed to the user. Make sure to test your redirect logic
block on these devices.
</Warning>
<Frame>
<img src="/images/blocks/logic/redirect.png" alt="Redirect logic block" />
</Frame>

37
apps/docs/editor/blocks/logic/script.mdx Normal file
View File

@@ -0,0 +1,37 @@
---
title: Script block
icon: code
---
The "Script" block allows you to execute Javascript code. If you want to set a variable value with Javascript, use the [Set variable block](./set-variable) instead. You can't set a variable with the script block.
**It doesn't allow you to create a custom visual block**
<Frame>
<img src="/images/blocks/logic/code.png" width="600" alt="Code block" />
</Frame>
<Info>
Variables in script are not parsed, they are evaluated. So it should be treated as if it were real javascript variables.
You need to write `console.log({{My variable}})` instead of `console.log("{{My variable}}")`
</Info>
## Examples
### Reload page
```js
window.location.reload()
```
### Redirect if a variable has a specific value
```js
if({{Category}} === 'qualified') {
window.location.href = 'https://my-site.com'
}
```
Do you need to do something but you're not sure how to? [Join the Discord server](https://typebot.io/discord) and get instant help!

118
apps/docs/editor/blocks/logic/set-variable.mdx Normal file
View File

@@ -0,0 +1,118 @@
---
title: Set variable
icon: pen
---
The "Set variable" block allows you to set a particular value to a variable.
<Frame>
<img src="/images/blocks/logic/set-variable.png" alt="Set variable" />
</Frame>
## Custom
You can set your variable with any value with `Custom`. It can be any kind of plain text but also **Javascript code**.
### Expressions with existing variables
It means you can apply operations on existing variables.
Add a value to your variable:
```
{{Score}} + 5
```
Compute a sum of variables:
```
{{Score}} + {{Answer}}
```
Multiply variables together:
```
{{Score}} * {{Multiplier}}
```
Compute a percentage:
```
{{Score}} * 100 / {{Max Score}}
```
Extract the first name from a full name:
```
{{Full name}}.split(' ')[0]
```
Transform existing variable to upper case or lower case:
```
{{Name}}.toUpperCase()
```
```
{{Name}}.toLowerCase()
```
This can also be Javascript code. It will read the returned value of the code and set it to your variable.
```js
const name = 'John' + 'Smith'
return name
```
If you don't provide the `return` keyword then it will be automatically prepended to the beginning of your code.
```js
'John' + 'Smith'
```
is the same as
```js
return 'John' + 'Smith'
```
<Info>
Variables in script are not parsed, they are evaluated. So it should be treated as if it were real Javascript variables.
So, if you write `"{{My variable}}"`, it will parse the variable ID (something like `vclfqgqkdf000008mh3r6xakty`). You need to remove the double quotes to properly get the variable content value.
For example,
- ❌ `"{{URL base}}/path"` => `vclfqgqkdf000008mh3r6xakty/path`
- ✅ `{{URL base}} + '/path'` => `https://domain.com/path`
- ✅ `` `${{{URL base}}}/path` `` => `https://domain.com/path`
</Info>
## Moment of the day
It will set your variable with either one of these values based on the user's time of the day: `morning`, `afternoon`, `evening`, `night`.
Then you can use this variable to conditionally display content:
<Frame style={{ maxWidth: '400px' }}>
<img
src="/images/blocks/logic/moment-condition.png"
alt="Moment of the day condition"
/>
</Frame>
## Map item with same index
This is a convenient value block that allows you to easily get an item from a list that has the same index as an item from another list.
When you are pulling data from another service, sometimes, you will have 2 lists: `Labels` and `Ids`. Labels are the data displayed to the user and Ids are the data used for other requests to that external service.
This value block allows you to find the `Id` from `Ids` with the same index as `Label` in `Labels`
<Frame>
<img
src="/images/blocks/logic/set-variable-map-item.png"
alt="Set variable map item with same index"
/>
</Frame>

20
apps/docs/editor/blocks/logic/typebot-link.mdx Normal file
View File

@@ -0,0 +1,20 @@
---
title: Link to typebot
icon: box
---
The typebot link logic block allows you to go into another typebot flow. This ultimately helps keep your flows clean and be able to reuse a flow in multiple places.
<Frame>
<img src="/images/blocks/logic/link.png" alt="Link to typebot logic block" />
</Frame>
## Share variables between bots
The existing variable values are automatically shared to the linked bot. It means that if this linked bot contains similar variable names, it will be automatically pre-filled with the values from the previous bot.
Example: My first bot asks for the user's name and stores it in the `Name` variable. Then, I link to another bot that displays a `Name` variable in a text bubble. This will display the name collected in the first bot.
## Merge answers
The Merge answers option allows you to merge the answers collected from a linked bot to the current bot. This is useful if you want to collect answers from multiple bots and then send them all at once to a third-party app. Or if you just want to collect all the answers into a unified results table.

20
apps/docs/editor/blocks/logic/wait.mdx Normal file
View File

@@ -0,0 +1,20 @@
---
title: Wait
icon: timer
---
The "Wait" block allows you to pause the conversation for a certain amount of seconds.
This can be useful if you want the bot to emphasize on what's been said or to wait before a redirection for example to make sure the user has read everything.
<Wait>
This should be used wisely. If you want the bot to write slower or faster in a
more general sense, you need to check the [Typing emulation
settings](/settings/overview#typing-emulation)
</Wait>
## Pause the flow
You can enable the "Pause the flow" option if you ever need to mark a pause in the flow.
Under the hood, typebot always compute all the blocks between each input blocks. But sometimes you may want to display some messages before a long-running action.

44
apps/docs/editor/blocks/overview.mdx Normal file
View File

@@ -0,0 +1,44 @@
---
title: Overview
---
Blocks are the atomic building blocks of a typebot chat. You can chain any blocks together to create complexe conversation flows. When you drag and drop a block in the typebot flow, by default it will be inserted into a group that can have a title. Blocks are always contained in groups.
There are multiple block categories to make it easier to find the right block for your needs:
## Bubbles
Bubble blocks are used to show bubbles that can be used to display information to the user.
<Frame style={{ maxWidth: '400px' }}>
<img src="/images/blocks/bubbles.png" alt="Bubble blocks" />
</Frame>
## Inputs
Input blocks are used to ask the user for input. It will stop the conversation and for the user to provide input.
<Frame style={{ maxWidth: '400px' }}>
<img src="/images/blocks/inputs.png" alt="Input blocks" />
</Frame>
## Logic
Logic blocks are used to perform background operations. They are not visible to the users.
<Frame style={{ maxWidth: '400px' }}>
<img src="/images/blocks/logic.png" alt="Logic blocks" />
</Frame>
## Integrations
Integration blocks are used to trigger external services operations.
<Note>
Interested in implementing your own integration block? Head over to [The
Forge](/) to easily create your block.
</Note>
<Frame style={{ maxWidth: '400px' }}>
<img src="/images/blocks/integrations.png" alt="Integration blocks" />
</Frame>