docs: 📝 Add doc for every block
This commit is contained in:
Baptiste Arnaud
4
apps/docs/docs/editor/blocks/bubbles/_category_.json
Normal file
4
apps/docs/docs/editor/blocks/bubbles/_category_.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Bubbles",
|
||||
"position": 2
|
||||
}
|
||||
25
apps/docs/docs/editor/blocks/bubbles/embed.mdx
Normal file
25
apps/docs/docs/editor/blocks/bubbles/embed.mdx
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Embed
|
||||
|
||||
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.
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/bubbles/embed.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '600px' }}
|
||||
alt="Embed bubble"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<video controls width="100%" style={{ maxWidth: '400px' }}>
|
||||
<source src="/img/blocks/bubbles/embed-chat.mp4" type="video/mp4" />
|
||||
</video>
|
||||
}
|
||||
/>
|
||||
25
apps/docs/docs/editor/blocks/bubbles/image.mdx
Normal file
25
apps/docs/docs/editor/blocks/bubbles/image.mdx
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# 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.
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/bubbles/image.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Image bubble"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<video controls width="100%" style={{ maxWidth: '400px' }}>
|
||||
<source src="/img/blocks/bubbles/image-chat.mp4" type="video/mp4" />
|
||||
</video>
|
||||
}
|
||||
/>
|
||||
28
apps/docs/docs/editor/blocks/bubbles/text.mdx
Normal file
28
apps/docs/docs/editor/blocks/bubbles/text.mdx
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Text
|
||||
|
||||
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:
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/bubbles/3-text-bubbles.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Text bubbles"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<video controls width="100%" style={{ maxWidth: '600px' }}>
|
||||
<source
|
||||
src="/img/blocks/bubbles/3-text-bubbles-chat.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
}
|
||||
/>
|
||||
25
apps/docs/docs/editor/blocks/bubbles/video.mdx
Normal file
25
apps/docs/docs/editor/blocks/bubbles/video.mdx
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# 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.
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/bubbles/video.png"
|
||||
alt="Video bubble"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<video controls width="100%" style={{ maxWidth: '500px' }}>
|
||||
<source src="/img/blocks/bubbles/video-chat.mp4" type="video/mp4" />
|
||||
</video>
|
||||
}
|
||||
/>
|
||||
4
apps/docs/docs/editor/blocks/inputs/_category_.json
Normal file
4
apps/docs/docs/editor/blocks/inputs/_category_.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Inputs",
|
||||
"position": 2
|
||||
}
|
||||
55
apps/docs/docs/editor/blocks/inputs/buttons.mdx
Normal file
55
apps/docs/docs/editor/blocks/inputs/buttons.mdx
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
sidebar_position: 7
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Buttons
|
||||
|
||||
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.
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/single-choice-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Single choice in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/single-choice-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Single choice in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
## Multiple choices
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/multiple-choices-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Multiple choices in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<video controls width="100%" style={{ maxWidth: '400px' }}>
|
||||
<source
|
||||
src="/img/blocks/inputs/multiple-choices-bot.mp4"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
}
|
||||
/>
|
||||
37
apps/docs/docs/editor/blocks/inputs/date.mdx
Normal file
37
apps/docs/docs/editor/blocks/inputs/date.mdx
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Date
|
||||
|
||||
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:
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/date-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Date input in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/date-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Date input in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
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:
|
||||
|
||||
<img
|
||||
src="/img/blocks/inputs/date-native-picker.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Date native picker"
|
||||
/>
|
||||
32
apps/docs/docs/editor/blocks/inputs/email.mdx
Normal file
32
apps/docs/docs/editor/blocks/inputs/email.mdx
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Email
|
||||
|
||||
The Email input block allows you to ask your user for an email. It will check if it is properly formatted.
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/email-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Email input in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/email-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Email input in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
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.
|
||||
32
apps/docs/docs/editor/blocks/inputs/file-upload.mdx
Normal file
32
apps/docs/docs/editor/blocks/inputs/file-upload.mdx
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# File upload
|
||||
|
||||
The File upload input block allows you to collect files from your user.
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/file-upload-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="File upload input in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/file-upload-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="File upload in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
The placeholder accepts [HTML](https://en.wikipedia.org/wiki/HTML).
|
||||
|
||||
Note that there is a 10MB fixed limit per file.
|
||||
28
apps/docs/docs/editor/blocks/inputs/number.mdx
Normal file
28
apps/docs/docs/editor/blocks/inputs/number.mdx
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Number
|
||||
|
||||
The Number input block allows you to ask your user for a number. You can configure a minimum, a maximum and a step:
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/number-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Number input in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/number-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Number input in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
55
apps/docs/docs/editor/blocks/inputs/payment.mdx
Normal file
55
apps/docs/docs/editor/blocks/inputs/payment.mdx
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
sidebar_position: 8
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Payment
|
||||
|
||||
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:
|
||||
|
||||
<img
|
||||
src="/img/blocks/inputs/configure-stripe.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '800px' }}
|
||||
alt="Single choice in flow"
|
||||
/>
|
||||
|
||||
- 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:
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/payment-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Payment in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/payment-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Payment in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
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.
|
||||
28
apps/docs/docs/editor/blocks/inputs/phone-number.mdx
Normal file
28
apps/docs/docs/editor/blocks/inputs/phone-number.mdx
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Phone number
|
||||
|
||||
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:
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/phone-number-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Phone number input in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/phone-number-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Phone number input in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
57
apps/docs/docs/editor/blocks/inputs/rating.mdx
Normal file
57
apps/docs/docs/editor/blocks/inputs/rating.mdx
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Rating
|
||||
|
||||
The Rating input block allows you to ask your user for a rating.
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/rating-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Rating in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/rating-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Rating in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
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:
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/nps-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="NPS configuration"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/nps-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '600px' }}
|
||||
alt="NPS in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
## 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/)
|
||||
55
apps/docs/docs/editor/blocks/inputs/text.mdx
Normal file
55
apps/docs/docs/editor/blocks/inputs/text.mdx
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# 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:
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/short-text-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Short text input in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/short-text-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Short text input in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
## Long text input
|
||||
|
||||
You can also ask your user for a longer text answer by enabling it in the input options:
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/long-text-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Long text input in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/long-text-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Long text input in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
32
apps/docs/docs/editor/blocks/inputs/website.mdx
Normal file
32
apps/docs/docs/editor/blocks/inputs/website.mdx
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Website
|
||||
|
||||
The Website input block allows you to ask your user for a URL. It will check if it is properly formatted.
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/inputs/website-flow.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Website input in flow"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<img
|
||||
src="/img/blocks/inputs/website-bot.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Website input in bot"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
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.
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Integrations",
|
||||
"position": 4
|
||||
}
|
||||
25
apps/docs/docs/editor/blocks/integrations/email.mdx
Normal file
25
apps/docs/docs/editor/blocks/integrations/email.mdx
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
import { YoutubeEmbed } from '../../../../src/js/YoutubeEmbed.jsx'
|
||||
|
||||
# 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:
|
||||
|
||||
<img
|
||||
src="/img/blocks/integrations/email.png"
|
||||
width="400"
|
||||
alt="Email block example"
|
||||
/>
|
||||
|
||||
By default, the email will be sent from notifications@typebot.io with default content based on what your new lead has replied. It will look like this:
|
||||
|
||||
<img
|
||||
src="/img/blocks/integrations/default-email.png"
|
||||
alt="Email block example"
|
||||
/>
|
||||
|
||||
You can choose to use your own email (SMTP) account, using the "From:" dropdown and filling in your credentials.
|
||||
You can also customize the email content with your own text/HTML.
|
||||
13
apps/docs/docs/editor/blocks/integrations/ga.md
Normal file
13
apps/docs/docs/editor/blocks/integrations/ga.md
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Google Analytics
|
||||
|
||||
The Google Analytics integration block allows you to track a Google Analytics event at a given moment in your flow.
|
||||
|
||||
<img
|
||||
src="/img/blocks/integrations/ga.png"
|
||||
width="600"
|
||||
alt="Google Analytics block"
|
||||
/>
|
||||
11
apps/docs/docs/editor/blocks/integrations/google-sheets.mdx
Normal file
11
apps/docs/docs/editor/blocks/integrations/google-sheets.mdx
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
import { YoutubeEmbed } from '../../../../src/js/YoutubeEmbed.jsx'
|
||||
|
||||
# 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
|
||||
|
||||
<YoutubeEmbed videoId="UjlZvlqg6mA" />
|
||||
19
apps/docs/docs/editor/blocks/integrations/pabbly.md
Normal file
19
apps/docs/docs/editor/blocks/integrations/pabbly.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# 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:
|
||||
|
||||
<img
|
||||
src="/img/blocks/integrations/pabbly-connect.png"
|
||||
width="600"
|
||||
alt="Pabbly Connect block"
|
||||
/>
|
||||
|
||||
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.
|
||||
52
apps/docs/docs/editor/blocks/integrations/webhook.md
Normal file
52
apps/docs/docs/editor/blocks/integrations/webhook.md
Normal file
@@ -0,0 +1,52 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
<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.
|
||||
|
||||
## 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.
|
||||
|
||||
### 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:
|
||||
|
||||
<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):
|
||||
|
||||
<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:
|
||||
|
||||
<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:
|
||||
|
||||
<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.
|
||||
|
||||
Feel free to ask the [community](https://www.facebook.com/groups/typebot) for help if you struggle setting up a Webhook block.
|
||||
19
apps/docs/docs/editor/blocks/integrations/zapier.md
Normal file
19
apps/docs/docs/editor/blocks/integrations/zapier.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# 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:
|
||||
|
||||
<img
|
||||
src="/img/blocks/integrations/zapier.png"
|
||||
width="600"
|
||||
alt="Zapier block"
|
||||
/>
|
||||
|
||||
2. Follow the instructions on Zapier to create and enable your Zap.
|
||||
|
||||
3. Zapier block should be properly configured.
|
||||
4
apps/docs/docs/editor/blocks/logic/_category_.json
Normal file
4
apps/docs/docs/editor/blocks/logic/_category_.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"label": "Logic",
|
||||
"position": 3
|
||||
}
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
The "Code" 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.
|
||||
|
||||
**It doesn't allow you to create custom visual block**
|
||||
**It doesn't allow you to create a custom visual block**
|
||||
|
||||
<img src="/img/blocks/code.png" width="600" alt="Code block"/>
|
||||
<img src="/img/blocks/logic/code.png" width="600" alt="Code block"/>
|
||||
|
||||
## Examples
|
||||
|
||||
@@ -28,7 +28,7 @@ return new Promise((res) => setTimeout(res, 3000))
|
||||
postMessage('hello there!', '*')
|
||||
```
|
||||
|
||||
Then on your parent website you could listen for those messages:
|
||||
Then on your parent website, you could listen for those messages:
|
||||
|
||||
```js
|
||||
addEventListener('message', ({ data }) => console.log(data))
|
||||
@@ -1,10 +1,14 @@
|
||||
import { YoutubeEmbed } from '../../../src/js/YoutubeEmbed.jsx'
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
import { YoutubeEmbed } from '../../../../src/js/YoutubeEmbed.jsx'
|
||||
|
||||
# Condition
|
||||
|
||||
The Condition block allows you to split your flow in two based on a condition.
|
||||
|
||||
<img src="/img/blocks/condition.png" width="500" alt="Set variable" />
|
||||
<img src="/img/blocks/logic/condition.png" width="500" alt="Set variable" />
|
||||
|
||||
☝️ This can be translated to: "If 'Score' is greater than 20 then go to this path. Otherwise, go to the other path.".
|
||||
|
||||
@@ -18,6 +22,6 @@ A condition can contain different comparisons that are evaluated in order and li
|
||||
|
||||
For more complex use cases you can stack conditions on top of each other:
|
||||
|
||||
<img src="/img/blocks/condition-2.png" width="500" alt="Set variable" />
|
||||
<img src="/img/blocks/logic/condition-2.png" width="500" alt="Set variable" />
|
||||
|
||||
☝️ This can be translated to: "If 'Age' is greater than 50 then go to this path. Else, if 'Age' is greater than 20 then go to this path. Otherwise, got to the other path".
|
||||
18
apps/docs/docs/editor/blocks/logic/redirect.mdx
Normal file
18
apps/docs/docs/editor/blocks/logic/redirect.mdx
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Redirect
|
||||
|
||||
The Redirect logic block allows you to redirect your user to a given URL either on the current tab or in a new tab.
|
||||
|
||||
<img
|
||||
src="/img/blocks/logic/redirect.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '600px' }}
|
||||
alt="Redirect logic block"
|
||||
/>
|
||||
|
||||
:::caution
|
||||
Some browser will block a redirect in a new tab by default and display a message that says "A popup has been blocked, would you like to open it?". To never stumble upon this issue, a redirect on the current page is preferable.
|
||||
:::
|
||||
@@ -1,8 +1,12 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Set variable
|
||||
|
||||
The "Set variable" block allows you to set a particular value to a variable.
|
||||
|
||||
<img src="/img/blocks/set-variable.png" width="600" alt="Set variable"/>
|
||||
<img src="/img/blocks/logic/set-variable.png" width="600" alt="Set variable"/>
|
||||
|
||||
This value can be any kind of plain text but also **Javascript code**.
|
||||
|
||||
@@ -44,6 +48,5 @@ window.location.href
|
||||
|
||||
:::caution
|
||||
It will not give you the parent URL if you embed the bot on your site.
|
||||
|
||||
A more bullet proof option is to pass the URL as a hidden variable in the embed code options. You can find an example [here](../../embed/html-javascript#additional-configuration).
|
||||
A more bulletproof option is to pass the URL as a hidden variable in the embed code options. You can find an example [here](/embed/html-javascript#additional-configuration).
|
||||
:::
|
||||
16
apps/docs/docs/editor/blocks/logic/typebot-link.mdx
Normal file
16
apps/docs/docs/editor/blocks/logic/typebot-link.mdx
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Link to typebot
|
||||
|
||||
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.
|
||||
|
||||
<img
|
||||
src="/img/blocks/logic/link.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '600px' }}
|
||||
alt="Link to typebot logic block"
|
||||
/>
|
||||
|
||||
Variables are shared by default, you just need them to make sure they are present in the variables dropdown on both flows.
|
||||
51
apps/docs/docs/editor/blocks/overview.mdx
Normal file
51
apps/docs/docs/editor/blocks/overview.mdx
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Overview
|
||||
|
||||
Blocks are the atomic building blocks of a typebot chat. You can chain any blocks together to create complexe conversation flows. They are grouped into sub-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.
|
||||
|
||||
<img
|
||||
src="/img/blocks/bubbles.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Bubble blocks"
|
||||
/>
|
||||
|
||||
## Inputs
|
||||
|
||||
Input blocks are used to ask the user for input. It will stop the conversation and for the user to provide input.
|
||||
|
||||
<img
|
||||
src="/img/blocks/inputs.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Input blocks"
|
||||
/>
|
||||
|
||||
## Logic
|
||||
|
||||
Logic blocks are used to perform background operations. They are not visible to the users.
|
||||
|
||||
<img
|
||||
src="/img/blocks/logic.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Logic blocks"
|
||||
/>
|
||||
|
||||
## Integrations
|
||||
|
||||
Integration blocks are used to trigger external services operations.
|
||||
|
||||
<img
|
||||
src="/img/blocks/integrations.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '300px' }}
|
||||
alt="Integration blocks"
|
||||
/>
|
||||
Reference in New Issue
Block a user