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

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.