Baptiste Arnaud
GitHub
@@ -1,29 +0,0 @@
|
||||
# Typebot docs
|
||||
|
||||
This is the source code of Typebot's documentation located at https://docs.typebot.io
|
||||
|
||||
# Website
|
||||
|
||||
This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
|
||||
|
||||
## Installation
|
||||
|
||||
```console
|
||||
pnpm install
|
||||
```
|
||||
|
||||
## Local Development
|
||||
|
||||
```console
|
||||
pnpm start
|
||||
```
|
||||
|
||||
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
|
||||
|
||||
## Build
|
||||
|
||||
```console
|
||||
pnpm build
|
||||
```
|
||||
|
||||
This command generates static content into the `build` directory and can be served using any static contents hosting service.
|
||||
@@ -1,10 +1,8 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
title: 'Authentication'
|
||||
---
|
||||
|
||||
# Authentication
|
||||
|
||||
Every API resources are protected, and therefore require that you authenticate using an API token.
|
||||
Some API endpoints are protected, and therefore require that you authenticate using an API token.
|
||||
|
||||
## Generate a token
|
||||
|
||||
@@ -14,11 +12,13 @@ Every API resources are protected, and therefore require that you authenticate u
|
||||
4. Give it a name, then click on "Create token"
|
||||
5. Copy your token.
|
||||
|
||||
<img
|
||||
src="/img/api/authentication/generateToken.png"
|
||||
width="900"
|
||||
alt="Generate token"
|
||||
/>
|
||||
<Frame>
|
||||
<img
|
||||
src="/images/api/authentication/generateToken.png"
|
||||
width="900"
|
||||
alt="Generate token"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
## Use your token
|
||||
|
||||
4
apps/docs/api-reference/billing/get-usage.mdx
Normal file
4
apps/docs/api-reference/billing/get-usage.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Get current usage'
|
||||
openapi: GET /v1/billing/usage
|
||||
---
|
||||
4
apps/docs/api-reference/billing/list-invoices.mdx
Normal file
4
apps/docs/api-reference/billing/list-invoices.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'List invoices'
|
||||
openapi: GET /v1/billing/invoices
|
||||
---
|
||||
4
apps/docs/api-reference/chat/continue-chat.mdx
Normal file
4
apps/docs/api-reference/chat/continue-chat.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Continue chat'
|
||||
openapi: POST /v1/sessions/{sessionId}/continueChat
|
||||
---
|
||||
4
apps/docs/api-reference/chat/save-logs.mdx
Normal file
4
apps/docs/api-reference/chat/save-logs.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Save logs'
|
||||
openapi: POST /v1/sessions/{sessionId}/clientLogs
|
||||
---
|
||||
4
apps/docs/api-reference/chat/start-chat.mdx
Normal file
4
apps/docs/api-reference/chat/start-chat.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Start chat'
|
||||
openapi: POST /v1/typebots/{publicId}/startChat
|
||||
---
|
||||
4
apps/docs/api-reference/chat/start-preview-chat.mdx
Normal file
4
apps/docs/api-reference/chat/start-preview-chat.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Start preview chat'
|
||||
openapi: POST /v1/typebots/{typebotId}/preview/startChat
|
||||
---
|
||||
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Update typebot in session'
|
||||
openapi: POST /v1/sessions/{sessionId}/updateTypebot
|
||||
---
|
||||
84
apps/docs/api-reference/endpoint/create.mdx
Normal file
84
apps/docs/api-reference/endpoint/create.mdx
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
title: "Create User"
|
||||
api: "POST https://api.mintlify.com/api/user"
|
||||
description: "This endpoint creates a new user"
|
||||
---
|
||||
|
||||
### Body
|
||||
|
||||
<ParamField body="current_token" type="string">
|
||||
This is the current user group token you have for the user group that you want
|
||||
to rotate.
|
||||
</ParamField>
|
||||
|
||||
### Response
|
||||
|
||||
<ResponseField name="success" type="number">
|
||||
Indicates whether the call was successful. 1 if successful, 0 if not.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="user_group" type="object">
|
||||
|
||||
The contents of the user group
|
||||
|
||||
<Expandable title="Toggle object">
|
||||
|
||||
<ResponseField name="team_id" type="number">
|
||||
This is the internal ID for this user group. You don't need to record this
|
||||
information, since you will not need to use it.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="token" type="string">
|
||||
This is the user group token (userGroupToken or USER_GROUP_TOKEN) that will be
|
||||
used to identify which user group is viewing the dashboard. You should save
|
||||
this on your end to use when rendering an embedded dashboard.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="name" type="string">
|
||||
This is the name of the user group provided in the request body.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="provided_id" type="string">
|
||||
This is the user_group_id provided in the request body.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="api_environment_tag" type="JSON or null">
|
||||
This is the environment tag of the user group. Possible values are 'Customer'
|
||||
and 'Testing'. User group id's must be unique to each environment, so you can
|
||||
not create multiple user groups with with same id. If you have a production
|
||||
customer and a test user group with the same id, you will be required to label
|
||||
one as 'Customer' and another as 'Testing'
|
||||
</ResponseField>
|
||||
|
||||
</Expandable>
|
||||
|
||||
</ResponseField>
|
||||
|
||||
<RequestExample>
|
||||
|
||||
```bash Example Request
|
||||
curl --location --request POST 'https://api.mintlify.com/api/user' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--header 'Authorization: Token <token>' \
|
||||
--data-raw '{
|
||||
"current_token": ""
|
||||
}'
|
||||
```
|
||||
|
||||
</RequestExample>
|
||||
|
||||
<ResponseExample>
|
||||
|
||||
```json Response
|
||||
{
|
||||
"success": 1,
|
||||
"user_group": {
|
||||
"team_id": 3,
|
||||
"token": "<user_group_token_to_auth_dashboard>",
|
||||
"name": "Example 1",
|
||||
"provided_id": "example_1"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</ResponseExample>
|
||||
47
apps/docs/api-reference/endpoint/delete.mdx
Normal file
47
apps/docs/api-reference/endpoint/delete.mdx
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: "Delete User"
|
||||
api: "DELETE https://api.mintlify.com/api/user"
|
||||
description: "This endpoint deletes an existing user."
|
||||
---
|
||||
|
||||
### Body
|
||||
|
||||
<ParamField body="data_source_provided_id" type="string">
|
||||
The data source ID provided in the data tab may be used to identify the data
|
||||
source for the user group
|
||||
</ParamField>
|
||||
|
||||
<ParamField body="current_token" type="string">
|
||||
This is the current user group token you have for the user group you want to
|
||||
delete
|
||||
</ParamField>
|
||||
|
||||
### Response
|
||||
|
||||
<ResponseField name="success" type="number">
|
||||
Indicates whether the call was successful. 1 if successful, 0 if not.
|
||||
</ResponseField>
|
||||
|
||||
<RequestExample>
|
||||
|
||||
```bash Example Request
|
||||
curl --location --request DELETE 'https://api.mintlify.com/api/user' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--header 'Authorization: Token <token>' \
|
||||
--data-raw '{
|
||||
"user_group_id": "example_1"
|
||||
"current_token": "abcdef"
|
||||
}'
|
||||
```
|
||||
|
||||
</RequestExample>
|
||||
|
||||
<ResponseExample>
|
||||
|
||||
```json Response
|
||||
{
|
||||
"success": 1
|
||||
}
|
||||
```
|
||||
|
||||
</ResponseExample>
|
||||
101
apps/docs/api-reference/endpoint/get.mdx
Normal file
101
apps/docs/api-reference/endpoint/get.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
title: "Get User"
|
||||
api: "GET https://api.mintlify.com/api/user"
|
||||
description: "This endpoint gets or creates a new user."
|
||||
---
|
||||
|
||||
### Body
|
||||
|
||||
<ParamField body="name" type="string">
|
||||
This is the name of the user group.
|
||||
</ParamField>
|
||||
|
||||
<ParamField body="user_group_id" type="string">
|
||||
This is the ID you use to identify this user group in your database.
|
||||
</ParamField>
|
||||
|
||||
<ParamField body="mapping" type="object">
|
||||
This is a JSON mapping of schema id to either the data source that this user group should be
|
||||
associated with or id of the datasource you provided when creating it.
|
||||
</ParamField>
|
||||
|
||||
<ParamField body="properties" type="object">
|
||||
This is a JSON object for properties assigned to this user group. These will be accessible through
|
||||
variables in the dashboards and SQL editor
|
||||
</ParamField>
|
||||
|
||||
### Response
|
||||
|
||||
<ResponseField name="success" type="number">
|
||||
Indicates whether the call was successful. 1 if successful, 0 if not.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="new_user_group" type="boolean">
|
||||
Indicates whether a new user group was created.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="user_group" type="object">
|
||||
|
||||
The contents of the user group
|
||||
|
||||
<Expandable title="Toggle object">
|
||||
|
||||
<ResponseField name="team_id" type="number">
|
||||
This is the internal ID for this user group. You don't need to record this information, since
|
||||
you will not need to use it.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="token" type="string">
|
||||
This is the user group token (userGroupToken or USER_GROUP_TOKEN) that will be used to identify
|
||||
which user group is viewing the dashboard. You should save this on your end to use when rendering
|
||||
an embedded dashboard.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="name" type="string">
|
||||
This is the name of the user group provided in the request body.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="provided_id" type="string">
|
||||
This is the user_group_id provided in the request body.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="properties" type="JSON or null">
|
||||
This is the properties object if it was provided in the request body
|
||||
</ResponseField>
|
||||
|
||||
</Expandable>
|
||||
|
||||
</ResponseField>
|
||||
|
||||
<RequestExample>
|
||||
|
||||
```bash Example Request
|
||||
curl --location --request GET 'https://api.mintlify.com/api/user' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--header 'Authorization: Token <token>' \
|
||||
--data-raw '{
|
||||
"user_group_id": "example_1",
|
||||
"name": "Example 1",
|
||||
"mapping": {"40": "213", "134": "386"},
|
||||
"properties": {"filterValue": "value"}
|
||||
}'
|
||||
```
|
||||
|
||||
</RequestExample>
|
||||
|
||||
<ResponseExample>
|
||||
|
||||
```json Response
|
||||
{
|
||||
"success": 1,
|
||||
"new_user_group": true,
|
||||
"user_group": {
|
||||
"team_id": 3,
|
||||
"token": "<user_group_token_to_auth_dashboard>",
|
||||
"name": "Example 1",
|
||||
"provided_id": "example_1"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</ResponseExample>
|
||||
101
apps/docs/api-reference/endpoint/update.mdx
Normal file
101
apps/docs/api-reference/endpoint/update.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
title: "Update User"
|
||||
api: "PUT https://api.mintlify.com/api/user"
|
||||
description: "This endpoint updates an existing user."
|
||||
---
|
||||
|
||||
### Body
|
||||
|
||||
<ParamField body="name" type="string">
|
||||
This is the name of the user group.
|
||||
</ParamField>
|
||||
|
||||
<ParamField body="user_group_id" type="string">
|
||||
This is the ID you use to identify this user group in your database.
|
||||
</ParamField>
|
||||
|
||||
<ParamField body="mapping" type="object">
|
||||
This is a JSON mapping of schema id to either the data source that this user
|
||||
group should be associated with or id of the datasource you provided when
|
||||
creating it.
|
||||
</ParamField>
|
||||
|
||||
<ParamField body="properties" type="object">
|
||||
This is a JSON object for properties assigned to this user group. These will
|
||||
be accessible through variables in the dashboards and SQL editor
|
||||
</ParamField>
|
||||
|
||||
### Response
|
||||
|
||||
<ResponseField name="success" type="number">
|
||||
Indicates whether the call was successful. 1 if successful, 0 if not.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="user_group" type="object">
|
||||
|
||||
The contents of the user group
|
||||
|
||||
<Expandable title="Toggle object">
|
||||
|
||||
<ResponseField name="team_id" type="number">
|
||||
Indicates whether a new user group was created.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="token" type="string">
|
||||
This is the user group token (userGroupToken or USER_GROUP_TOKEN) that will be
|
||||
used to identify which user group is viewing the dashboard. You should save
|
||||
this on your end to use when rendering an embedded dashboard.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="name" type="string">
|
||||
This is the name of the user group provided in the request body.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="provided_id" type="string">
|
||||
This is the user_group_id provided in the request body.
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="properties" type="JSON | Null">
|
||||
This is the properties object if it was provided in the request body
|
||||
</ResponseField>
|
||||
|
||||
<ResponseField name="api_environment_tag" type="JSON or null">
|
||||
This is the environment tag of the user group. Possible values are 'Customer'
|
||||
and 'Testing'
|
||||
</ResponseField>
|
||||
|
||||
</Expandable>
|
||||
|
||||
</ResponseField>
|
||||
|
||||
<RequestExample>
|
||||
|
||||
```bash Example Request
|
||||
curl --location --request PUT 'https://api.mintlify.com/api/user' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--header 'Authorization: Token <token>' \
|
||||
--data-raw '{
|
||||
"user_group_id": "example_1",
|
||||
"name": "Example 1",
|
||||
"mapping": {"40": "213", "134": "386"},
|
||||
"properties": {"filterValue": "value"}
|
||||
}'
|
||||
```
|
||||
|
||||
</RequestExample>
|
||||
|
||||
<ResponseExample>
|
||||
|
||||
```json Response
|
||||
{
|
||||
"success": 1,
|
||||
"user_group": {
|
||||
"team_id": 113,
|
||||
"token": "<user_group_token_to_auth_dashboard>",
|
||||
"name": "ok",
|
||||
"provided_id": "6"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</ResponseExample>
|
||||
21
apps/docs/api-reference/how-to.mdx
Normal file
21
apps/docs/api-reference/how-to.mdx
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: How-to
|
||||
---
|
||||
|
||||
### How to find my `typebotId`
|
||||
|
||||
If you'd like to execute the typebot in preview mode, you will need to provide the ID of the building typebot available in the editor URL:
|
||||
|
||||
<Frame>
|
||||
<img src="/images/api/typebotId.png" alt="Get typebot ID" />
|
||||
</Frame>
|
||||
|
||||
### How to find my `publicId`
|
||||
|
||||
For published typebot execution, you need to provide the public typebot ID available here:
|
||||
|
||||
<img src="/images/api/publicId.png" alt="Get typebot ID" />
|
||||
|
||||
### How to find my `workspaceId`
|
||||
|
||||
In your workspace dashboard, head over to `Settings & Members > Workspace > Settings` and copy the workspace ID
|
||||
4
apps/docs/api-reference/results/delete.mdx
Normal file
4
apps/docs/api-reference/results/delete.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Delete results'
|
||||
openapi: DELETE /v1/typebots/{typebotId}/results
|
||||
---
|
||||
4
apps/docs/api-reference/results/get.mdx
Normal file
4
apps/docs/api-reference/results/get.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Get a result'
|
||||
openapi: GET /v1/typebots/{typebotId}/results/{resultId}
|
||||
---
|
||||
4
apps/docs/api-reference/results/list-logs.mdx
Normal file
4
apps/docs/api-reference/results/list-logs.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'List logs in result'
|
||||
openapi: GET /v1/typebots/{typebotId}/results/{resultId}/logs
|
||||
---
|
||||
4
apps/docs/api-reference/results/list.mdx
Normal file
4
apps/docs/api-reference/results/list.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'List results'
|
||||
openapi: GET /v1/typebots/{typebotId}/results
|
||||
---
|
||||
4
apps/docs/api-reference/typebot/create.mdx
Normal file
4
apps/docs/api-reference/typebot/create.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Create a typebot'
|
||||
openapi: POST /v1/typebots
|
||||
---
|
||||
4
apps/docs/api-reference/typebot/delete.mdx
Normal file
4
apps/docs/api-reference/typebot/delete.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Delete a typebot'
|
||||
openapi: DELETE /v1/typebots/{typebotId}
|
||||
---
|
||||
4
apps/docs/api-reference/typebot/get-published-bot.mdx
Normal file
4
apps/docs/api-reference/typebot/get-published-bot.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Get published bot'
|
||||
openapi: GET /v1/typebots/{typebotId}/publishedTypebot
|
||||
---
|
||||
4
apps/docs/api-reference/typebot/get.mdx
Normal file
4
apps/docs/api-reference/typebot/get.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Get a typebot'
|
||||
openapi: GET /v1/typebots/{typebotId}
|
||||
---
|
||||
4
apps/docs/api-reference/typebot/import.mdx
Normal file
4
apps/docs/api-reference/typebot/import.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Import a typebot'
|
||||
openapi: POST /v1/typebots/import
|
||||
---
|
||||
4
apps/docs/api-reference/typebot/list.mdx
Normal file
4
apps/docs/api-reference/typebot/list.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'List typebots'
|
||||
openapi: GET /v1/typebots
|
||||
---
|
||||
4
apps/docs/api-reference/typebot/publish.mdx
Normal file
4
apps/docs/api-reference/typebot/publish.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Publish typebot'
|
||||
openapi: POST /v1/typebots/{typebotId}/publish
|
||||
---
|
||||
4
apps/docs/api-reference/typebot/unpublish.mdx
Normal file
4
apps/docs/api-reference/typebot/unpublish.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Unpublish typebot'
|
||||
openapi: POST /v1/typebots/{typebotId}/unpublish
|
||||
---
|
||||
4
apps/docs/api-reference/typebot/update.mdx
Normal file
4
apps/docs/api-reference/typebot/update.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Update a typebot'
|
||||
openapi: PATCH /v1/typebots/{typebotId}
|
||||
---
|
||||
4
apps/docs/api-reference/workspace/create.mdx
Normal file
4
apps/docs/api-reference/workspace/create.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Create a workspace'
|
||||
openapi: POST /v1/workspaces
|
||||
---
|
||||
4
apps/docs/api-reference/workspace/delete.mdx
Normal file
4
apps/docs/api-reference/workspace/delete.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Delete a workspace'
|
||||
openapi: DELETE /v1/workspaces/{workspaceId}
|
||||
---
|
||||
4
apps/docs/api-reference/workspace/get.mdx
Normal file
4
apps/docs/api-reference/workspace/get.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Get a workspace'
|
||||
openapi: GET /v1/workspaces/{workspaceId}
|
||||
---
|
||||
4
apps/docs/api-reference/workspace/list-members.mdx
Normal file
4
apps/docs/api-reference/workspace/list-members.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'List members'
|
||||
openapi: GET /v1/workspaces/{workspaceId}/members
|
||||
---
|
||||
4
apps/docs/api-reference/workspace/list.mdx
Normal file
4
apps/docs/api-reference/workspace/list.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'List workspaces'
|
||||
openapi: GET /v1/workspaces
|
||||
---
|
||||
4
apps/docs/api-reference/workspace/update.mdx
Normal file
4
apps/docs/api-reference/workspace/update.mdx
Normal file
@@ -0,0 +1,4 @@
|
||||
---
|
||||
title: 'Update a workspace'
|
||||
openapi: PATCH /v1/workspaces/{workspaceId}
|
||||
---
|
||||
@@ -1,3 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
|
||||
};
|
||||
@@ -1,6 +1,8 @@
|
||||
# Breaking changes
|
||||
---
|
||||
title: Breaking changes
|
||||
---
|
||||
|
||||
## Typebot v7
|
||||
## Typebot v6
|
||||
|
||||
- List variables now don't automatically display the last item when inserted into a bubble. It was too "magical". Now you can leverage the inline code feature to easily get the last element of a list:
|
||||
|
||||
@@ -10,7 +12,7 @@
|
||||
|
||||
Check out the new [Inline variable formatting section](./editor/variables) for more information.
|
||||
|
||||
- Input prefill is now disabled by default. You can still enable it in the [Settings](./editor/settings) tab of your bot.
|
||||
- Input prefill is now disabled by default. You can still enable it in the [Settings](./settings/overview) tab of your bot.
|
||||
|
||||
- `Message sequence` option in the OpenAI block was removed because it was also too "magical" and it. Now I've introduced the `Dialogue` option. For more information:
|
||||
|
||||
@@ -23,8 +25,6 @@
|
||||
>
|
||||
<iframe
|
||||
src="https://www.loom.com/embed/df5d64dd01ca47daa5b7acd18b05a725?sid=e6df2f5b-643c-4175-8351-03e1726b2749"
|
||||
frameBorder={0}
|
||||
webkitallowfullscreen
|
||||
mozallowfullscreen
|
||||
allowFullScreen
|
||||
style={{
|
||||
@@ -1,20 +1,21 @@
|
||||
# Add a custom domain
|
||||
---
|
||||
title: Add a custom domain
|
||||
---
|
||||
|
||||
You can bind a custom domain to your typebot in the "Share" tab.
|
||||
|
||||
<img
|
||||
src="/img/custom-domain/add-domain.png"
|
||||
width="700"
|
||||
alt="Add my domain button"
|
||||
/>
|
||||
<Frame>
|
||||
<img src="/images/custom-domain/add-domain.png" alt="Add my domain button" />
|
||||
</Frame>
|
||||
|
||||
To connect a new domain, follow the instructions:
|
||||
|
||||
<img
|
||||
src="/img/custom-domain/instructions.png"
|
||||
width="700"
|
||||
alt="Add domain instructions"
|
||||
/>
|
||||
<Frame>
|
||||
<img
|
||||
src="/images/custom-domain/instructions.png"
|
||||
alt="Add domain instructions"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
Once you've added the corresponding DNS record, click on the "Save" button. You might have to wait for a few minutes before the record is properly propagated.
|
||||
|
||||
@@ -22,10 +23,8 @@ Once you've added the corresponding DNS record, click on the "Save" button. You
|
||||
|
||||
If your domain is not properly configured or verified, you will see this error icon next to your domain link:
|
||||
|
||||
<img
|
||||
src="/img/custom-domain/invalid-config.png"
|
||||
width="500"
|
||||
alt="Error icon"
|
||||
/>
|
||||
<Frame>
|
||||
<img src="/images/custom-domain/invalid-config.png" alt="Error icon" />
|
||||
</Frame>
|
||||
|
||||
Make sure to click on it to see what is required to do to fix the issue.
|
||||
@@ -1,11 +1,14 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
title: Iframe
|
||||
---
|
||||
|
||||
# Iframe
|
||||
|
||||
You can easily get your typebot iframe code by clicking on the "Iframe" button in the "Share" tab of your typebot.
|
||||
|
||||
<img src="/img/embeddings/iframe/iframe-preview.png" width="600" alt="Iframe preview"/>
|
||||
<Frame>
|
||||
<img
|
||||
src="/images/embeddings/iframe/iframe-preview.png"
|
||||
alt="Iframe preview"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
Here, you can set up its width and height. A good default is a `width` of `100%` and a `height` of `600px`.
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
title: HTML & Javascript
|
||||
---
|
||||
|
||||
# HTML & Javascript
|
||||
|
||||
## Standard
|
||||
|
||||
You can get the standard HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
|
||||
@@ -24,48 +22,6 @@ There, you can change the container dimensions. Here is a code example:
|
||||
|
||||
This code is creating a container with a 100% width (will match parent width) and 600px height.
|
||||
|
||||
## Popup
|
||||
|
||||
You can get the popup HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
|
||||
|
||||
Typebot.initPopup({
|
||||
typebot: 'my-typebot',
|
||||
apiHost: 'http://localhost:3001',
|
||||
autoShowDelay: 3000,
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
This code will automatically trigger the popup window after 3 seconds.
|
||||
|
||||
### Open or Close a popup
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
Typebot.open()
|
||||
```
|
||||
|
||||
```js
|
||||
Typebot.close()
|
||||
```
|
||||
|
||||
```js
|
||||
Typebot.toggle()
|
||||
```
|
||||
|
||||
You can bind these commands on a button element, for example:
|
||||
|
||||
```html
|
||||
<button onclick="Typebot.open()">Contact us</button>
|
||||
```
|
||||
|
||||
### Multiple bots
|
||||
|
||||
If you have different bots on the same page you will have to make them distinct with an additional `id` prop:
|
||||
@@ -96,6 +52,26 @@ If you have different bots on the same page you will have to make them distinct
|
||||
></typebot-standard>
|
||||
```
|
||||
|
||||
## Popup
|
||||
|
||||
You can get the popup HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
|
||||
|
||||
Typebot.initPopup({
|
||||
typebot: 'my-typebot',
|
||||
apiHost: 'http://localhost:3001',
|
||||
autoShowDelay: 3000,
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
This code will automatically trigger the popup window after 3 seconds.
|
||||
|
||||
## Bubble
|
||||
|
||||
You can get the bubble HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
|
||||
@@ -124,40 +100,6 @@ Here is an example:
|
||||
|
||||
This code will show the bubble and let a preview message appear after 5 seconds.
|
||||
|
||||
### Open or close the preview message
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
Typebot.showPreviewMessage()
|
||||
```
|
||||
|
||||
```js
|
||||
Typebot.hidePreviewMessage()
|
||||
```
|
||||
|
||||
### Open or close the typebot
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
Typebot.open()
|
||||
```
|
||||
|
||||
```js
|
||||
Typebot.close()
|
||||
```
|
||||
|
||||
```js
|
||||
Typebot.toggle()
|
||||
```
|
||||
|
||||
You can bind these commands on a button element, for example:
|
||||
|
||||
```html
|
||||
<button onclick="Typebot.open()">Contact us</button>
|
||||
```
|
||||
|
||||
### Custom button position
|
||||
|
||||
You can move the button with some custom CSS on your website. For example, you can place the bubble button higher with the following CSS:
|
||||
@@ -181,6 +123,35 @@ typebot-bubble::part(preview-message) {
|
||||
}
|
||||
```
|
||||
|
||||
## Commands
|
||||
|
||||
Here are the commands you can use to trigger your embedded typebot:
|
||||
|
||||
- `Typebot.open()`: Open popup or bubble
|
||||
- `Typebot.close()`: Close popup or bubble
|
||||
- `Typebot.toggle()`: Toggle the bubble or popup open/close state,
|
||||
- `Typebot.showPreviewMessage()`: Show preview message from the bubble,
|
||||
- `Typebot.hidePreviewMessage()`: Hide preview message from the bubble,
|
||||
- `Typebot.setPrefilledVariables(...)`: Set prefilled variables.
|
||||
Example:
|
||||
|
||||
```js
|
||||
Typebot.setPrefilledVariables({
|
||||
Name: 'Jhon',
|
||||
Email: 'john@gmail.com',
|
||||
})
|
||||
```
|
||||
|
||||
For more information, check out [Additional configuration](#additional-configuration).
|
||||
|
||||
- `Typebot.setInputValue(...)`: Set the value in the currently displayed input.
|
||||
|
||||
You can bind these commands on a button element, for example:
|
||||
|
||||
```html
|
||||
<button onclick="Typebot.open()">Contact us</button>
|
||||
```
|
||||
|
||||
## Callbacks
|
||||
|
||||
If you need to trigger events on your parent website when the user interact with the bot, you can use the following callbacks:
|
||||
15
apps/docs/deploy/web/libraries/next-js.mdx
Normal file
15
apps/docs/deploy/web/libraries/next-js.mdx
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Next.js
|
||||
---
|
||||
|
||||
This lib is a convenient wrapper around the [Typebot React](./react) library. It makes sure the components are lazy loaded.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
npm install @typebot.io/js @typebot.io/nextjs
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Use it like you would use the [Typebot React](./react) library.
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
title: React
|
||||
---
|
||||
|
||||
# React
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
@@ -39,28 +37,6 @@ const App = () => {
|
||||
|
||||
This code will automatically trigger the popup window after 3 seconds.
|
||||
|
||||
### Open or Close a popup
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
import { open } from '@typebot.io/react'
|
||||
|
||||
open()
|
||||
```
|
||||
|
||||
```js
|
||||
import { close } from '@typebot.io/react'
|
||||
|
||||
close()
|
||||
```
|
||||
|
||||
```js
|
||||
import { toggle } from '@typebot.io/react'
|
||||
|
||||
toggle()
|
||||
```
|
||||
|
||||
## Bubble
|
||||
|
||||
```tsx
|
||||
@@ -86,44 +62,6 @@ const App = () => {
|
||||
|
||||
This code will show the bubble and let a preview message appear after 5 seconds.
|
||||
|
||||
### Open or close the preview message
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
import { showPreviewMessage } from '@typebot.io/react'
|
||||
|
||||
Typebot.showPreviewMessage()
|
||||
```
|
||||
|
||||
```js
|
||||
import { hidePreviewMessage } from '@typebot.io/react'
|
||||
|
||||
Typebot.hidePreviewMessage()
|
||||
```
|
||||
|
||||
### Open or close the chat window
|
||||
|
||||
You can use these commands:
|
||||
|
||||
```js
|
||||
import { open } from '@typebot.io/react'
|
||||
|
||||
open()
|
||||
```
|
||||
|
||||
```js
|
||||
import { close } from '@typebot.io/react'
|
||||
|
||||
close()
|
||||
```
|
||||
|
||||
```js
|
||||
import { toggle } from '@typebot.io/react'
|
||||
|
||||
toggle()
|
||||
```
|
||||
|
||||
## Additional configuration
|
||||
|
||||
You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
title: Overview
|
||||
---
|
||||
|
||||
# Overview
|
||||
To get the appropriate instructions to deploy your typebot in your platform of choice, make sure to head over the `Share` tab of your bot and select the platform you want to deploy your typebot on.
|
||||
|
||||
You can choose to embed your typebot in 3 different ways.
|
||||
|
||||
@@ -10,7 +10,9 @@ You can choose to embed your typebot in 3 different ways.
|
||||
|
||||
Embeds the typebot in a box with the size of your choice anywhere on your app. This is what is used on Typebot homepage:
|
||||
|
||||
<img src="/img/embeddings/standard.png" alt="Standard"/>
|
||||
<Frame>
|
||||
<img src="/images/embeddings/standard.png" alt="Standard" />
|
||||
</Frame>
|
||||
|
||||
You can also set the width to `100%` and the height to `100vh` to make it take the entire page dimensions
|
||||
|
||||
@@ -18,10 +20,14 @@ You can also set the width to `100%` and the height to `100vh` to make it take t
|
||||
|
||||
Embeds the typebot in a Popup that overlays your website. It can be triggered after a delay or with a click of a button for example
|
||||
|
||||
<img src="/img/embeddings/popup.png" alt="Popup"/>
|
||||
<Frame>
|
||||
<img src="/images/embeddings/popup.png" alt="Popup" />
|
||||
</Frame>
|
||||
|
||||
## Bubble
|
||||
|
||||
Embeds the typebot as a "chat bubble" at the bottom right corner of your site. Can be triggered automatically or with a click. It can also come with a "proactive message".
|
||||
|
||||
<img src="/img/embeddings/bubble1.png" alt="Bubble 1" width="600px"/>
|
||||
<Frame>
|
||||
<img src="/images/embeddings/bubble1.png" alt="Bubble 1" width="600px" />
|
||||
</Frame>
|
||||
7
apps/docs/deploy/web/script.mdx
Normal file
7
apps/docs/deploy/web/script.mdx
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Script embed snippet
|
||||
---
|
||||
|
||||
The script embed option is useful only if you don't have access to the HTML tree of your application or if your website builder only allows you to inline script snippets.
|
||||
|
||||
Otherwise, it's preferable to follow [HTML & Javascript](./libraries/html-javascript) embed instructions because the script snippets are just scripts that will inject the code from the HTML & Javascript embed method.
|
||||
@@ -1,4 +1,6 @@
|
||||
# Webflow
|
||||
---
|
||||
title: Webflow
|
||||
---
|
||||
|
||||
Head over to the Share tab of your bot and click on the Webflow button to get the embed instructions of your bot.
|
||||
|
||||
@@ -42,4 +44,4 @@ It should look like:
|
||||
|
||||
Make sure to replace `BUTTON_ID_1` and `BUTTON_ID_2` with the ID you added on your button elements.
|
||||
|
||||
In this example we are opening the popup when the specified buttons are clicked but you could also use any of the [available commands](./commands).
|
||||
In this example we are opening the popup when the specified buttons are clicked but you could also use any of the [available commands](./libraries/html-javascript#commands).
|
||||
@@ -1,14 +1,14 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
title: WordPress
|
||||
---
|
||||
|
||||
# WordPress
|
||||
|
||||
Typebot has a native [WordPress plug-in](https://wordpress.org/plugins/typebot/) that helps you embed typebots in your WordPress site.
|
||||
|
||||
Of course, before using it, you need to create and publish your first typebot.
|
||||
|
||||
<img src="/img/embeddings/wordpress-preview.png" alt="WP plugin preview"/>
|
||||
<Frame>
|
||||
<img src="/images/embeddings/wordpress-preview.png" alt="WP plugin preview" />
|
||||
</Frame>
|
||||
|
||||
The code snippet to paste is easily configurable in the Share tab of your bot after clicking on the "Wordpress" button.
|
||||
|
||||
@@ -26,11 +26,16 @@ Examples:
|
||||
|
||||
## Personalize user experience
|
||||
|
||||
You can leverage the [prefilled variables](/editor/variables#prefilled-variables) and inject your user information directly into your typebot so that the experience is entirely customized to your user.
|
||||
You can leverage the [prefilled variables](../../editor/variables#prefilled-variables) and inject your user information directly into your typebot so that the experience is entirely customized to your user.
|
||||
|
||||
Here are the available variables from WordPress, make sure to create them in your typebot's variables dropdown:
|
||||
|
||||
<img src="/img/embeddings/wp-variables.png" alt="WP predefined variables" width="400px"/>
|
||||
<Frame style={{ maxWidth: '400px' }}>
|
||||
<img
|
||||
src="/images/embeddings/wp-variables.png"
|
||||
alt="WP predefined variables"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
The only thing you need to do to enable this is:
|
||||
|
||||
@@ -55,7 +60,9 @@ For WP Rocket:
|
||||
|
||||
1. Go to Settings > WP Rocket > Excluded Inline Javascript:
|
||||
|
||||
<img src="/img/embeddings/wp-rocket.png" width="600" alt="WP plugin preview"/>
|
||||
<Frame>
|
||||
<img src="/images/embeddings/wp-rocket.png" alt="WP Rocket" />
|
||||
</Frame>
|
||||
|
||||
2. Type "typebot"
|
||||
3. Save
|
||||
@@ -1,13 +1,16 @@
|
||||
# Create a WhatsApp Meta app
|
||||
---
|
||||
title: Create a WhatsApp Meta app
|
||||
---
|
||||
|
||||
## 1. Create a Facebook Business account
|
||||
|
||||
1. Head over to https://business.facebook.com and log in
|
||||
2. Create a new business account on the left side bar
|
||||
|
||||
:::note
|
||||
It is possible that Meta automatically restricts your newly created Business account. In that case, make sure to verify your identity to proceed.
|
||||
:::
|
||||
<Info>
|
||||
It is possible that Meta automatically restricts your newly created Business
|
||||
account. In that case, make sure to verify your identity to proceed.
|
||||
</Info>
|
||||
|
||||
## 2. Create a Meta app
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
slug: /embed/whatsapp
|
||||
title: Overview
|
||||
sidebarTitle: Overview
|
||||
title: WhatsApp
|
||||
---
|
||||
|
||||
# WhatsApp
|
||||
|
||||
WhatsApp integration is currently in beta. If you encounter any issue, please contact me directly using the Bubble in app.typebot.io.
|
||||
|
||||
## Preview
|
||||
|
||||
You can preview and test your bot by clicking on the Preview button in the editor and change the runtime to "WhatsApp".
|
||||
|
||||
<img src="/img/whatsapp/preview-dropdown.png" alt="WhatsApp preview dropdown" width="600px" />
|
||||
<Frame>
|
||||
<img
|
||||
src="/images/whatsapp/preview-dropdown.png"
|
||||
alt="WhatsApp preview dropdown"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
## Limitations
|
||||
|
||||
@@ -32,7 +34,12 @@ WhatsApp environment have some limitations that you need to keep in mind when bu
|
||||
|
||||
You can automatically assign contact name and phone number to a variable in your bot using a Set variable block with the dedicated system values:
|
||||
|
||||
<img src="/img/whatsapp/contact-var.png" alt="WhatsApp contact system variables" width="600px" />
|
||||
<Frame>
|
||||
<img
|
||||
src="/images/whatsapp/contact-var.png"
|
||||
alt="WhatsApp contact system variables"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
## Deploy on your phone number
|
||||
|
||||
@@ -42,7 +49,12 @@ Head over to the Share tab of your bot and click on the WhatsApp button to get t
|
||||
|
||||
You can customize how your bot behaves on WhatsApp in the `Configure integration` section
|
||||
|
||||
<img src="/img/whatsapp/configure-integration.png" alt="WhatsApp configure integration" width="600px" />
|
||||
<Frame>
|
||||
<img
|
||||
src="/images/whatsapp/configure-integration.png"
|
||||
alt="WhatsApp configure integration"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
**Session expiration timeout**: A number from 0 to 48 which is the number of hours after which the session will expire. If the user doesn't interact with the bot for more than the timeout, the session will expire and if user sends a new message, it will start a new chat. The default is 4 hours.
|
||||
|
||||
@@ -52,7 +64,7 @@ You can customize how your bot behaves on WhatsApp in the `Configure integration
|
||||
|
||||
### How many WhatsApp numbers can I use?
|
||||
|
||||
You can integrate as many numbers as you'd like. Keep in mind that Typebot does not provide those numbers. We work as a "Bring your own Meta application" and we give you clear instructions on [how to set up your Meta app](./whatsapp/create-meta-app).
|
||||
You can integrate as many numbers as you'd like. Keep in mind that Typebot does not provide those numbers. We work as a "Bring your own Meta application" and we give you clear instructions on [how to set up your Meta app](./create-meta-app).
|
||||
|
||||
### Can I link multiple bots to the same WhatsApp number?
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Editor",
|
||||
"position": 3
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Blocks",
|
||||
"position": 1
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Bubbles",
|
||||
"position": 2
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
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>
|
||||
}
|
||||
/>
|
||||
|
||||
:::note
|
||||
Not all websites allow embedding. If you see a blank space, it means the website you're trying to embed doesn't allow it.
|
||||
:::
|
||||
|
||||
## 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.
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
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>
|
||||
}
|
||||
/>
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
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>
|
||||
}
|
||||
/>
|
||||
|
||||
## Insert a link
|
||||
|
||||
You can insert a link in your text bubbles using the link icon in the editor:
|
||||
|
||||
<img src="/img/blocks/bubbles/text-link.png" width="400" alt="Text link icon" />
|
||||
|
||||
You can insert any links starting with `http:`, `https:`, `mailto:`, `tel:` or `sms:`. It can also be a variable.
|
||||
@@ -1,21 +0,0 @@
|
||||
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>
|
||||
}
|
||||
/>
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Inputs",
|
||||
"position": 2
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
---
|
||||
sidebar_position: 7
|
||||
---
|
||||
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
import { YoutubeEmbed } from '../../../../src/js/YoutubeEmbed.jsx'
|
||||
|
||||
# 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>
|
||||
}
|
||||
/>
|
||||
|
||||
## Dynamic items
|
||||
|
||||
Instead of adding items manually, you can also display a dynamic list of items based on a variable.
|
||||
|
||||
<img
|
||||
src="/img/blocks/inputs/buttons-dynamic.png"
|
||||
alt="Dynamic items list"
|
||||
width="600px"
|
||||
/>
|
||||
|
||||
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.
|
||||
|
||||
<img
|
||||
src="/img/blocks/inputs/buttons-other.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '900px' }}
|
||||
alt="Other button flow"
|
||||
/>
|
||||
|
||||
### 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
|
||||
|
||||
<img
|
||||
src="/img/blocks/inputs/buttons-condition.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '900px' }}
|
||||
alt="Condition multiple button flow"
|
||||
/>
|
||||
|
||||
### Conditionally display a certain button
|
||||
|
||||
<YoutubeEmbed videoId="c7LhC5BRSIA" />
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
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.
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
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).
|
||||
|
||||
## 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.
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
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"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
@@ -1,28 +0,0 @@
|
||||
---
|
||||
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"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
@@ -1,57 +0,0 @@
|
||||
---
|
||||
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/)
|
||||
@@ -1,55 +0,0 @@
|
||||
---
|
||||
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"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
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.
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Integrations",
|
||||
"position": 4
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
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" />
|
||||
|
||||
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:
|
||||
|
||||
<img
|
||||
src="/img/blocks/integrations/spreadsheet-format.png"
|
||||
width="600"
|
||||
alt="Google Analytics block"
|
||||
/>
|
||||
|
||||
## 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
|
||||
|
||||
<YoutubeEmbed videoId="2E0gK-PwFK4" />
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
The Google sheets block didn't insert or update a row but was supposed to? Make sure to check the [logs](/editor/results). If you still can't figure out what went wrong, shoot me a message using the chat button directly in the tool 👍
|
||||
@@ -1,17 +0,0 @@
|
||||
import { YoutubeEmbed } from '../../../../src/js/YoutubeEmbed.jsx'
|
||||
|
||||
# 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.
|
||||
|
||||
## Video tutorial
|
||||
|
||||
<YoutubeEmbed videoId="2ZskGItI_Zo" />
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Logic",
|
||||
"position": 3
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
# AB Test
|
||||
|
||||
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.
|
||||
|
||||
<img
|
||||
src="/img/blocks/logic/abTest.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '600px' }}
|
||||
alt="AB Test block"
|
||||
/>
|
||||
|
||||
## More than 2 paths
|
||||
|
||||
You can stack multiple AB test blocks to add more random paths
|
||||
|
||||
<img
|
||||
src="/img/blocks/logic/abTestMulti.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '600px' }}
|
||||
alt="AB Test block multiple paths"
|
||||
/>
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
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/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.".
|
||||
|
||||
A condition can contain different comparisons that are evaluated in order and linked with a logical operator: 'AND' or 'OR'.
|
||||
|
||||
## 3 minutes video overview
|
||||
|
||||
<YoutubeEmbed videoId="47KyLHzdpnY" />
|
||||
@@ -1,10 +0,0 @@
|
||||
# Jump
|
||||
|
||||
The jump block allows you jump to a specific block. This comes handy if you want to keep your flow clean
|
||||
|
||||
<img
|
||||
src="/img/blocks/logic/jump.jpeg"
|
||||
width="100%"
|
||||
style={{ maxWidth: '600px' }}
|
||||
alt="Jump block"
|
||||
/>
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
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
|
||||
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.
|
||||
:::
|
||||
@@ -1,51 +0,0 @@
|
||||
---
|
||||
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"
|
||||
/>
|
||||
@@ -1,16 +0,0 @@
|
||||
# Export / Import a typebot
|
||||
|
||||
A typebot flow can be exported to a JSON file using the menu button at the top right of the builder:
|
||||
|
||||
<img
|
||||
src="/img/export_flow.png"
|
||||
width="400"
|
||||
alt="Export flow button"
|
||||
/>
|
||||
|
||||
Then this file can be imported when creating a new typebot by choosing "Import a file":
|
||||
|
||||
<img
|
||||
src="/img/import_flow.png"
|
||||
alt="Import flow button"
|
||||
/>
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Embed",
|
||||
"position": 5
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
# Commands
|
||||
|
||||
Here are the commands you can use to trigger your embedded typebot:
|
||||
|
||||
- `Typebot.open()`: Open popup or bubble
|
||||
- `Typebot.close()`: Close popup or bubble
|
||||
- `Typebot.toggle()`: Toggle the bubble or popup open/close state,
|
||||
- `Typebot.showPreviewMessage()`: Show preview message from the bubble,
|
||||
- `Typebot.hidePreviewMessage()`: Hide preview message from the bubble,
|
||||
- `Typebot.setPrefilledVariables(...)`: Set prefilled variables.
|
||||
- `Typebot.setInputValue(...)`: Set the value in the currently displayed input.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
Typebot.setPrefilledVariables({
|
||||
Name: 'Jhon',
|
||||
Email: 'john@gmail.com',
|
||||
})
|
||||
```
|
||||
|
||||
For more information, check out the [HTML & Javascript additional configurations](./html-javascript#additional-configuration)
|
||||
@@ -1,5 +0,0 @@
|
||||
# Script embed snippet
|
||||
|
||||
The script embed option is useful only if you don't have access to the HTML tree of your application or if your website builder only allows you to inline script snippets.
|
||||
|
||||
Otherwise, it's preferable to follow [HTML & Javascript](./html-javascript) embed instructions because the script snippets are just scripts that will inject the code from the HTML & Javascript embed method.
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"label": "WhatsApp"
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Get Started",
|
||||
"position": 1
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
import { YoutubeEmbed } from '../../src/js/YoutubeEmbed.jsx'
|
||||
|
||||
# Overview
|
||||
|
||||
The best way to understand the basic principles of Typebot is by watching the "Get started" video series:
|
||||
|
||||
<YoutubeEmbed videoId="https://www.youtube.com/embed/videoseries?list=PLHpyDlgo4x7NUjF-L5VaYfBPQ03uzf5l3" />
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
slug: /
|
||||
---
|
||||
|
||||
# Welcome
|
||||
|
||||
[Typebot](https://www.typebot.io) is an open-source alternative to Landbot. It allows you to create conversational apps/forms (Lead qualification, Product launch, User onboarding, Customer support), embed them anywhere on your web/mobile apps, and collect results in real-time.
|
||||
|
||||
This is the Typebot documentation. It's a great place to find most answers. Please use the search box in the top right or the navigation menu (soon available) on the left-hand side to find the answers you're looking for.
|
||||
|
||||
This documentation is a work in progress.
|
||||
|
||||
If you can't find what you're looking for, don't hesitate to contact me directly on the web app or at support@typebot.io.
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Guides / Tutorials",
|
||||
"position": 5
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Self-Hosting",
|
||||
"position": 6
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Guides",
|
||||
"position": 3
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
# Using a Planetscale database
|
||||
|
||||
Typebot is also pluggable to a Planetscale database. But it means, you'll need to push schema changes manually.
|
||||
|
||||
To do so, follow these instructions:
|
||||
|
||||
1. Replace `DATABASE_URL` with a Planetscale development branch URL.
|
||||
2. From the `packages/prisma` directory, run a the db push command: `pnpm run db:push`
|
||||
3. Then, in Planetscale dashboard, or using their CLI, you can create a new deploy request from this development branch to your production branch.
|
||||
|
||||
:::note
|
||||
You can't connect to Planetscale database if you are deploying with Docker as docker images are currently built only with postgresql support.
|
||||
:::
|
||||
@@ -1,4 +0,0 @@
|
||||
{
|
||||
"label": "Workspace",
|
||||
"position": 2
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
# User preferences
|
||||
|
||||
## Change language
|
||||
|
||||
You can change the language of the application by going to your `Settings & Members` menu under the `Preferences` tab.
|
||||
|
||||
<img src="/img/workspace/change-language.png" alt="Change language" />
|
||||
|
||||
:::note
|
||||
The application is still being translated, so some parts may not be translated yet. This is tracked in [this issue](https://github.com/baptisteArno/typebot.io/issues/210).
|
||||
:::
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"index_name": "typebot",
|
||||
"start_urls": ["https://docs.typebot.io/"],
|
||||
"stop_urls": ["open-typebot=true$"],
|
||||
"selectors": {
|
||||
"lvl0": {
|
||||
"selector": ".menu__link--sublist.menu__link--active",
|
||||
"global": true,
|
||||
"default_value": "Documentation"
|
||||
},
|
||||
"lvl1": "[class^='docItemContainer_'] h1",
|
||||
"lvl2": "[class^='docItemContainer_'] h2",
|
||||
"lvl3": "[class^='docItemContainer_'] h3",
|
||||
"lvl4": "[class^='docItemContainer_'] h4",
|
||||
"lvl5": "[class^='docItemContainer_'] h5",
|
||||
"text": "[class^='docItemContainer_'] p, [class^='docItemContainer_'] li"
|
||||
},
|
||||
"selectors_exclude": [".hash-link"]
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
/** @type {import('@docusaurus/types').Config} */
|
||||
module.exports = {
|
||||
title: 'Typebot docs',
|
||||
tagline: 'Get to Typebot next level with its documentation',
|
||||
url: 'https://docs.typebot.io',
|
||||
baseUrl: '/',
|
||||
onBrokenLinks: 'throw',
|
||||
onBrokenMarkdownLinks: 'warn',
|
||||
favicon: 'img/favicon.png',
|
||||
organizationName: 'baptisteArno', // Usually your GitHub org/user name.
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
title: 'Typebot',
|
||||
logo: {
|
||||
alt: 'Typebot Logo',
|
||||
src: 'img/logo.svg',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
href: '/',
|
||||
label: 'Docs',
|
||||
position: 'left',
|
||||
},
|
||||
{
|
||||
href: '/api',
|
||||
label: 'API Reference',
|
||||
position: 'left',
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/baptisteArno/typebot.io/tree/main/apps/docs',
|
||||
label: 'Contribute',
|
||||
position: 'right',
|
||||
},
|
||||
],
|
||||
},
|
||||
algolia: {
|
||||
apiKey: '978429d40094dc0fd2dd02db741b3dbe',
|
||||
indexName: 'typebot',
|
||||
appId: '6GBQ91COKA',
|
||||
contextualSearch: false,
|
||||
},
|
||||
footer: {
|
||||
links: [
|
||||
{
|
||||
title: 'Product',
|
||||
items: [
|
||||
{
|
||||
label: 'Homepage',
|
||||
to: 'https://www.typebot.io',
|
||||
},
|
||||
{ label: 'Status', to: 'https://status.typebot.io' },
|
||||
{
|
||||
label: 'Roadmap',
|
||||
to: 'https://app.typebot.io/feedback',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Community',
|
||||
items: [
|
||||
{
|
||||
label: 'Discord',
|
||||
href: 'https://typebot.io/discord',
|
||||
},
|
||||
{
|
||||
label: 'Twitter',
|
||||
href: 'https://twitter.com/Typebot_io',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Company',
|
||||
items: [
|
||||
{
|
||||
label: 'Terms of Service',
|
||||
href: 'https://www.typebot.io/terms-of-service',
|
||||
},
|
||||
{
|
||||
label: 'Privacy Policy',
|
||||
href: 'https://www.typebot.io/privacy-policies',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
colorMode: {
|
||||
respectPrefersColorScheme: true,
|
||||
},
|
||||
},
|
||||
presets: [
|
||||
[
|
||||
'@typebot.io/docusaurus-preset-openapi',
|
||||
/** @type {import('@typebot.io/docusaurus-preset-openapi').Options} */
|
||||
{
|
||||
api: {
|
||||
path: 'openapi',
|
||||
routeBasePath: '/api',
|
||||
},
|
||||
docs: {
|
||||
sidebarPath: require.resolve('./sidebars.js'),
|
||||
routeBasePath: '/',
|
||||
editUrl: ({ docPath }) => {
|
||||
return `https://github.com/baptistearno/typebot.io/edit/main/apps/docs/docs/${docPath}`
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
customCss: require.resolve('./src/css/custom.css'),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
}
|
||||
@@ -1,24 +1,29 @@
|
||||
import { FlowToBot } from '../../../../src/js/FlowToBot'
|
||||
|
||||
# Audio
|
||||
---
|
||||
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.
|
||||
|
||||
<FlowToBot
|
||||
flow={
|
||||
<img
|
||||
src="/img/blocks/bubbles/audio/editor.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '400px' }}
|
||||
alt="Audio bubble"
|
||||
/>
|
||||
}
|
||||
bot={
|
||||
<video controls width="100%" style={{ maxWidth: '400px' }}>
|
||||
<source src="/img/blocks/bubbles/audio/bot.mp4" type="video/mp4" />
|
||||
</video>
|
||||
}
|
||||
/>
|
||||
<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
|
||||
|
||||
37
apps/docs/editor/blocks/bubbles/embed.mdx
Normal file
37
apps/docs/editor/blocks/bubbles/embed.mdx
Normal 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
27
apps/docs/editor/blocks/bubbles/image.mdx
Normal 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
36
apps/docs/editor/blocks/bubbles/text.mdx
Normal 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
26
apps/docs/editor/blocks/bubbles/video.mdx
Normal 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
103
apps/docs/editor/blocks/inputs/buttons.mdx
Normal 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>
|
||||
@@ -1,40 +1,39 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
title: Date
|
||||
icon: calendar
|
||||
---
|
||||
|
||||
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"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<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:
|
||||
|
||||
<img
|
||||
src="/img/blocks/inputs/date-native-picker.png"
|
||||
width="100%"
|
||||
style={{ maxWidth: '500px' }}
|
||||
alt="Date native picker"
|
||||
/>
|
||||
<Frame style={{ maxWidth: '400px' }}>
|
||||
<img
|
||||
src="/images/blocks/inputs/date-native-picker.png"
|
||||
alt="Date native picker"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
## Format
|
||||
|
||||
31
apps/docs/editor/blocks/inputs/email.mdx
Normal file
31
apps/docs/editor/blocks/inputs/email.mdx
Normal 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
33
apps/docs/editor/blocks/inputs/file-upload.mdx
Normal 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
27
apps/docs/editor/blocks/inputs/number.mdx
Normal 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>
|
||||
@@ -1,23 +1,20 @@
|
||||
---
|
||||
sidebar_position: 8
|
||||
title: Payment
|
||||
icon: credit-card
|
||||
---
|
||||
|
||||
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"
|
||||
/>
|
||||
<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
|
||||
@@ -31,24 +28,26 @@ If you'd still like to still use the test keys in the published bot you just nee
|
||||
|
||||
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"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<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.
|
||||
|
||||
27
apps/docs/editor/blocks/inputs/phone-number.mdx
Normal file
27
apps/docs/editor/blocks/inputs/phone-number.mdx
Normal 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>
|
||||
@@ -1,11 +1,15 @@
|
||||
# Picture choice
|
||||
---
|
||||
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
|
||||
|
||||
<img
|
||||
src="/img/blocks/inputs/picture-choice.png"
|
||||
width="100%"
|
||||
alt="Picture choice overview"
|
||||
/>
|
||||
<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.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user