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

311
apps/docs/self-hosting/configuration.mdx Normal file
View File

@@ -0,0 +1,311 @@
---
title: Configuration
icon: gear
---
<Note>
If you're self-hosting Typebot, [sponsoring
me](https://github.com/sponsors/baptisteArno) is a great way to give back to
the community and to contribute to the long-term sustainability of the
project. Thank you for supporting independent creators of Free Open Source
Software!
</Note>
Parameters marked with <span style={{color: '#ef5151'}}>\*</span> are required.
## General
| Parameter | Default | Description |
| ----------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| DATABASE_URL <span style={{color: '#ef5151'}}>\*</span> | | The database URL |
| ENCRYPTION_SECRET <span style={{color: '#ef5151'}}>\*</span> | | A 256-bit key used to encrypt sensitive data. It is strongly recommended to [generate](https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx) a new one. The secret should be the same between builder and viewer. |
| NEXTAUTH_URL <span style={{color: '#ef5151'}}>\*</span> | | The builder base URL. Should be the publicly accessible URL (i.e. `https://typebot.domain.com`) |
| NEXT_PUBLIC_VIEWER_URL <span style={{color: '#ef5151'}}>\*</span> | | The viewer base URL. Should be the publicly accessible URL (i.e. `https://bot.domain.com`) |
| ADMIN_EMAIL | | The email that will get an `UNLIMITED` plan on user creation. The associated user will be able to bypass database rules. |
| NEXTAUTH_URL_INTERNAL | | The internal builder base URL. You have to set it only when `NEXTAUTH_URL` can't be reached by your builder container / server. For a docker deployment, you should set it to `http://localhost:3000`. |
| DEFAULT_WORKSPACE_PLAN | FREE | Default workspace plan on user creation or when a user creates a new workspace. Possible values are `FREE`, `STARTER`, `PRO`, `LIFETIME`, `UNLIMITED`. The default plan for admin user is `UNLIMITED` |
| DISABLE_SIGNUP | false | Disable new user sign ups. Invited users are still able to sign up. |
| NEXT_PUBLIC_ONBOARDING_TYPEBOT_ID | | Typebot ID used for the onboarding. Onboarding page is skipped if not provided. |
| DEBUG | false | If enabled, the server will print valuable logs to debug config issues. |
| NEXT_PUBLIC_BOT_FILE_UPLOAD_MAX_SIZE | | Limits the size of each file that can be uploaded in the bots (i.e. Set `10` to limit the file upload to 10MB) |
## Email (Auth, notifications)
Used for sending email notifications and authentication
| Parameter | Default | Description |
| --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| SMTP_USERNAME | | SMTP username |
| SMTP_PASSWORD | | SMTP password |
| SMTP_HOST | | SMTP host. (i.e. `smtp.host.com`) |
| SMTP_PORT | 25 | SMTP port |
| NEXT_PUBLIC_SMTP_FROM | | From name and email (i.e. `'Typebot Notifications' <notifications@host.com>`) |
| SMTP_SECURE | false | If true the connection will use TLS when connecting to server. If false (the default) then TLS is used if server supports the STARTTLS extension. In most cases set this value to true if you are connecting to port 465. For port 587 or 25 keep it false |
| SMTP_AUTH_DISABLED | false | To disable the authentication by email but still use the provided config for notifications |
## Google (Auth, Sheets, Fonts)
Used authentication in the builder and for the Google Sheets integration step.
<Accordion title="Requirements">
1. Enable the APIs you want: Google Sheets API, Google Picker API (Used for the Google Sheets integration to pick a spreadsheet), Web Fonts Developer API
2. Head over the Credentials tab: https://console.developers.google.com/apis/credentials
3. Create an API key with access to the Google Picker API and Web Fonts Developer API (optionnal). This will be your `NEXT_PUBLIC_GOOGLE_API_KEY`
4. Create a OAuth client ID. This will be your `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET`
Make sure to set the required scopes (`userinfo.email`, `spreadsheets`, `drive.file`) in your console
The "Authorized redirect URIs" used when creating the credentials must include your full domain and end in the callback path:
- For production:
- https://\<YOUR_DOMAIN\>/api/auth/callback/google
- https://\<YOUR_DOMAIN\>/api/credentials/google-sheets/callback
- For development:
- http://localhost:3000/api/auth/callback/google
- http://localhost:3000/api/credentials/google-sheets/callback
5. To avoid having to always reconnect a Google Sheets credentials every 7 days, you need to promote your OAuth client to production (https://developers.google.com/nest/device-access/reference/errors/authorization#refresh_token_keeps_expiring)
</Accordion>
| Parameter | Default | Description |
| -------------------------- | ------- | --------------------------------------------- |
| GOOGLE_CLIENT_ID | | The Client ID from the Google API Console |
| GOOGLE_CLIENT_SECRET | | The Client secret from the Google API Console |
| NEXT_PUBLIC_GOOGLE_API_KEY | | The API Key from the Google API Console |
## GitHub (Auth)
Used for authenticating with GitHub. By default, it uses the credentials of a Typebot-dev app.
You can create your own GitHub OAuth app [here](https://github.com/settings/developers). The Authorization callback URL should be `$NEXTAUTH_URL/api/auth/callback/github`
| Parameter | Default | Description |
| -------------------- | ------- | --------------------------------------------------------------------------- |
| GITHUB_CLIENT_ID | | Application client ID. Also used to check if it is enabled in the front-end |
| GITHUB_CLIENT_SECRET | | Application secret |
## GitLab (Auth)
Used for authenticating with GitLab.
Follow the official GitLab guide for creating OAuth2 applications [here](https://docs.gitlab.com/ee/integration/oauth_provider.html).
The Authorization callback URL should be `$NEXTAUTH_URL/api/auth/callback/gitlab`
| Parameter | Default | Description |
| ---------------------- | ------------------ | ------------------------------------------------------------------------------------ |
| GITLAB_CLIENT_ID | | Application client ID. Also used to check if it is enabled in the front-end |
| GITLAB_CLIENT_SECRET | | Application secret |
| GITLAB_BASE_URL | https://gitlab.com | Base URL of the GitLab instance |
| GITLAB_REQUIRED_GROUPS | | Comma-separated list of groups the user has to be a direct member of, e.g. `foo,bar` |
| GITLAB_NAME | GitLab | Name of the GitLab instance, used for the SSO Login Button |
## Facebook (Auth)
You can create your own Facebook OAuth app [here](https://developers.facebook.com/apps/create/).
The Authorization callback URL should be `$NEXTAUTH_URL/api/auth/callback/facebook`
| Parameter | Default | Description |
| ---------------------- | ------- | --------------------------------------------------------------------------- |
| FACEBOOK_CLIENT_ID | | Application client ID. Also used to check if it is enabled in the front-end |
| FACEBOOK_CLIENT_SECRET | | Application secret |
## Azure AD (Auth)
If you are using [Azure Active Directory](https://azure.microsoft.com/en-us/services/active-directory/) for the authentication you can set the following environment variables.
The Authorization callback URL should be `$NEXTAUTH_URL/api/auth/callback/azure-ad`
| Parameter | Default | Description |
| ---------------------- | ------- | ------------------------------------------------------------- |
| AZURE_AD_CLIENT_ID | | Application client ID |
| AZURE_AD_CLIENT_SECRET | | Application client secret. Can be obtained from Azure Portal. |
| AZURE_AD_TENANT_ID | | Azure Tenant ID |
## Custom OAuth Provider (Auth)
| Parameter | Default | Description |
| ---------------------------- | -------------------- | --------------------------------------------------------------------------------------- |
| CUSTOM_OAUTH_NAME | Custom OAuth | Provider name. Will be displayed in the sign in form. |
| CUSTOM_OAUTH_CLIENT_ID | | OAuth client ID. |
| CUSTOM_OAUTH_CLIENT_SECRET | | OAuth client secret. |
| CUSTOM_OAUTH_WELL_KNOWN_URL | | OAuth .well-known URL (i.e. `https://auth.domain.com/.well-known/openid-configuration`) |
| CUSTOM_OAUTH_USER_ID_PATH | id | Used to map the id from the user info object |
| CUSTOM_OAUTH_USER_NAME_PATH | name | Used to map the name from the user info object |
| CUSTOM_OAUTH_USER_EMAIL_PATH | email | Used to map the email from the user info object |
| CUSTOM_OAUTH_USER_IMAGE_PATH | image | Used to map the image from the user info object |
| CUSTOM_OAUTH_SCOPE | openid profile email | OAuth scope |
For `*_PATH` parameters, you can use dot notation to access nested properties (i.e. `account.name`).
## S3 Storage (Media uploads)
Used for uploading images, videos, etc... It can be any S3 compatible object storage service (Minio, Digital Oceans Space, AWS S3...)
| Parameter | Default | Description |
| ----------------------- | ------- | ---------------------------------------------------------------------------------- |
| S3_ACCESS_KEY | | S3 access key. Also used to check if upload feature is enabled |
| S3_SECRET_KEY | | S3 secret key. |
| S3_BUCKET | typebot | Name of the bucket where assets will be uploaded in. |
| S3_PORT | | S3 Host port number |
| S3_ENDPOINT | | S3 endpoint (i.e. `s3.domain.com`). |
| S3_SSL | true | Use SSL when establishing the connection. |
| S3_REGION | | S3 region. |
| S3_PUBLIC_CUSTOM_DOMAIN | | If the final URL that is used to read public files is different from `S3_ENDPOINT` |
Note that for AWS S3, your endpoint is usually: `s3.<S3_REGION>.amazonaws.com`
In order to function properly, your S3 bucket must be configured. Make sure to read through the [S3 configuration](./guides/s3) doc.
## Giphy (GIF picker)
Used to search for GIF. You can create a Giphy app [here](https://developers.giphy.com/dashboard/)
| Parameter | Default | Description |
| ------------------------- | ------- | ------------- |
| NEXT_PUBLIC_GIPHY_API_KEY | | Giphy API key |
## Unsplash (image picker)
Used to search for images. You can create an Unsplash app [here](https://unsplash.com/developers)
| Parameter | Default | Description |
| ------------------------------- | ------- | ----------------- |
| NEXT_PUBLIC_UNSPLASH_APP_NAME | | Unsplash App name |
| NEXT_PUBLIC_UNSPLASH_ACCESS_KEY | | Unsplash API key |
## Tolgee (i18n contribution dev tool)
<Note>
If you'd like to join contribute to Typebot's translation join the [Discord
server](https://discord.gg/xjyQczWAXV) and ask for an access to Tolgee in the
[#contributors
channel](https://discord.com/channels/1155799591220953138/1155883114455900190).
</Note>
Set up these environment variables to enable [Tolgee dev tool](https://tolgee.io/features/dev-tools).
| Parameter | Default | Description |
| -------------------------- | -------------------------------------- | ----------------------- |
| NEXT_PUBLIC_TOLGEE_API_KEY | | Your Tolgee API key |
| NEXT_PUBLIC_TOLGEE_API_URL | https://tolgee.server.baptistearno.com | The Tolgee API base URL |
## WhatsApp (Preview)
In order to be able to test your bot on WhatsApp from the Preview drawer, you need to set up a WhatsApp business app.
<Accordion title="Requirements">
## 1. [Create a WhatsApp Meta app](../deploy/whatsapp/create-meta-app)
## 2. Get the System User token
1. Go to your [System users page](https://business.facebook.com/settings/system-users) and create a new system user that has access to the related.
- Token expiration: `Never`
- Available Permissions: `whatsapp_business_messaging`, `whatsapp_business_management`
2. The generated token will be used as `META_SYSTEM_USER_TOKEN` in your viewer configuration.
3. Click on `Add assets`. Under `Apps`, look for your app, select it and check `Manage app`
## 3. Get the phone number ID
1. Go to your WhatsApp Dev Console
<Frame>
<img src="/images/whatsapp/dev-console.png" alt="WhatsApp dev console" />
</Frame>
2. Add your phone number by clicking on the `Add phone number` button.
3. Select the newly created phone number in the `From` dropdown list and you will see right below the associated `Phone number ID` This will be used as `WHATSAPP_PREVIEW_FROM_PHONE_NUMBER_ID` in your viewer configuration.
## 4. Set up the webhook
1. Head over to `Quickstart > Configuration`. Edit the webhook URL to `$NEXTAUTH_URL/api/v1/whatsapp/preview/webhook`. Set the Verify token to `$ENCRYPTION_SECRET` and click on `Verify and save`.
2. Add the `messages` webhook field.
## 5. Set up the message template
1. Head over to `Messaging > Message Templates` and click on `Create Template`
2. Select the `Utility` category
3. Give it a name that corresponds to your `WHATSAPP_PREVIEW_TEMPLATE_NAME` configuration.
4. Select the language that corresponds to your `WHATSAPP_PREVIEW_TEMPLATE_LANG` configuration.
5. You can format it as you'd like. The user will just have to send a message to start the preview.
</Accordion>
| Parameter | Default | Description |
| ------------------------------------- | ------- | ------------------------------------------------------- |
| META_SYSTEM_USER_TOKEN | | The system user token used to send WhatsApp messages |
| WHATSAPP_PREVIEW_FROM_PHONE_NUMBER_ID | | The phone number ID from which the message will be sent |
| WHATSAPP_PREVIEW_TEMPLATE_NAME | | The preview start template message name |
| WHATSAPP_PREVIEW_TEMPLATE_LANG | en | The preview start template message name |
## Others
The [official Typebot managed service](https://app.typebot.io/) uses other services such as [Stripe](https://stripe.com/) for processing payments, [Sentry](https://sentry.io/) for tracking bugs and [Sleekplan](https://sleekplan.com/) for user feedbacks.
The related environment variables are listed here but you are probably not interested in these if you self-host Typebot.
<Accordion title="Stripe">
| Parameter | Default | Description |
| ----------------------------- | ------- | ----------------------------------------- |
| NEXT_PUBLIC_STRIPE_PUBLIC_KEY | | Stripe public key |
| STRIPE_SECRET_KEY | | Stripe secret key |
| STRIPE_STARTER_PRICE_ID | | Starter plan price id |
| STRIPE_PRO_PRICE_ID | | Pro monthly plan price id |
| STRIPE_STARTER_CHATS_PRICE_ID | | Starter Additional chats monthly price id |
| STRIPE_PRO_CHATS_PRICE_ID | | Pro Additional chats monthly price id |
| STRIPE_WEBHOOK_SECRET | | Stripe Webhook secret |
</Accordion>
<Accordion title="Sentry">
| Parameter | Default | Description |
| ---------------------- | ------- | -------------------------------------- |
| NEXT_PUBLIC_SENTRY_DSN | | Sentry DSN |
| SENTRY_AUTH_TOKEN | | Used to upload sourcemaps on app build |
| SENTRY_PROJECT | | Sentry project name |
| SENTRY_ORG | | Sentry organization name |
</Accordion>
<Accordion title="Vercel (custom domains)">
| Parameter | Default | Description |
| -------------------------------------- | ------- | ----------------------------------------------- |
| VERCEL_TOKEN | | Vercel API token |
| NEXT_PUBLIC_VERCEL_VIEWER_PROJECT_NAME | | The name of the viewer project in Vercel |
| VERCEL_TEAM_ID | | Vercel team ID that contains the viewer project |
</Accordion>
<Accordion title="Sleekplan">
| Parameter | Default | Description |
| ----------------- | ------- | ------------------------------------------------------------------------ |
| SLEEKPLAN_SSO_KEY | | Sleekplan SSO key used to automatically authenticate a user in Sleekplan |
</Accordion>
<Accordion title="Telemetry">
| Parameter | Default | Description |
| ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------- |
| TELEMETRY_WEBHOOK_URL | | Webhook URL called whenever a new telemetry event is captured. See this file that lists all the possible events |
| TELEMETRY_WEBHOOK_BEARER_TOKEN | | Bearer token to add if the request needs to be authenticated |
</Accordion>
<Accordion title="PostHog">
| Parameter | Default | Description |
| ---------------------------- | ----------------------- | ---------------- |
| NEXT_PUBLIC_POSTHOG_API_KEY | | PostHog API Key |
| NEXT_PUBLIC_POSTHOG_API_HOST | https://app.posthog.com | PostHog API Host |
</Accordion>

338
apps/docs/self-hosting/deploy/docker.mdx Normal file
View File

@@ -0,0 +1,338 @@
---
title: Docker
---
<Info>
The easiest way to get started with Typebot is with [the official managed
service in the Cloud](https://app.typebot.io). You'll have high availability,
backups, security, and maintenance all managed for you by me, Baptiste,
Typebot's founder. The cloud version can save a substantial amount of
developer time and resources. For most sites this ends up being the best value
option and the revenue goes to funding the maintenance and further development
of Typebot. So you'll be supporting open source software and getting a great
service!
</Info>
## Requirements
You need a server with Docker installed. If your server doesn't come with Docker pre-installed, you can follow [their docs](https://docs.docker.com/engine/install/#server) to install it.
## Installation
### 1. Download the compose file
On your server, download the latest `docker-compose.yml` and the starter `.env` file:
```sh
wget https://raw.githubusercontent.com/baptisteArno/typebot.io/latest/docker-compose.yml
wget https://raw.githubusercontent.com/baptisteArno/typebot.io/latest/.env.example -O .env
```
### 2. Add the required configuration
1. You'll first need a random 32-character secret key which will be used to encrypt sensitive data. Here is a simple way to generate one:
```sh
openssl rand -base64 24 | tr -d '\n' ; echo
```
2. Fill the `.env` file with your values.
3. Configure at least one authentication provider (Email, Google, GitHub, Facebook or GitLab). More info here: [Configuration](../configuration).
By default the compose file will pull the latest stable Typebot images: `baptistearno/typebot-builder:latest` and `baptistearno/typebot-viewer:latest`. You can decide to replace `latest` with a specific version. You can find all the existing tags [here](https://hub.docker.com/r/baptistearno/typebot-builder/tags)
### 3. Start the server
Once you've added your configuration to the compose file, you're ready to start up the server:
```sh
docker-compose up -d
```
When you run this command, by default, it does the following:
- Create a database
- Run the migrations
- Start the builder on port 8080
- Start the viewer on port 8081
- All Typebot's data is stored in the `.typebot` folder in the current directory
You can now navigate to `http://typebot.domain.com:8080` and see the login screen. Login with the admin email to have access to a Team plan workspace automatically.
Typebot server itself does not perform SSL termination. It only runs on unencrypted HTTP. If you want to run on HTTPS you also need to set up a reverse proxy in front of the server. See below instructions.
### Update Typebot
Typebot is updated regularly, but it is up to you to apply these updates on your server. By virtue of using Docker, these updates are safe and easy to apply.
1. Pull the new images:
```sh
docker-compose pull typebot-builder
docker-compose pull typebot-viewer
```
Alternatively, you can pull specific versions:
```sh
docker-compose pull typebot-builder:1.0.0
docker-compose pull typebot-viewer:1.0.0
```
2. Stop the server:
```sh
docker-compose down
```
3. Start the server (with the new images):
```sh
docker-compose up -d
```
The self-hosted version is somewhat of a LTS, only getting the changes (~ once per month) after they have been battle tested on the cloud version. If you want features as soon as they are available, consider becoming a [cloud user](https://app.typebot.io).
## Optional extras
### Reverse proxy
By default, Typebot runs on unencrypted HTTP on ports 8080 for the builder and 8081 for the viewer. We recommend running it on HTTPS behind a reverse proxy of some sort. You may or may not already be running a reverse proxy on your host, let's look at both options:
#### No existing reverse proxy
If your DNS is managed by a service that offers a proxy option with automatic SSL management, feel free to use that. For example, you could use Cloudflare as a reverse proxy in front of Typebot.
Alternatively, you can run your Caddy server as a reverse proxy. This way your SSL certificate will be stored on the host machine and managed by Let's Encrypt. The Caddy server will expose port 443, terminate SSL traffic and proxy the requests to your Typebot server.
Here is an example of a docker-compose file using Caddy as a reverse proxy:
```yml
version: '3.3'
services:
caddy-gen:
container_name: caddy-gen
image: 'wemakeservices/caddy-gen:latest'
restart: always
volumes:
- /var/run/docker.sock:/tmp/docker.sock:ro
- {$PWD}/.typebot/caddy-certificates:/data/caddy
ports:
- '80:80'
- '443:443'
depends_on:
- typebot-builder
- typebot-viewer
typebot-builder:
labels:
virtual.host: 'typebot.domain.com' # change to your domain name
virtual.port: '3000'
virtual.tls-email: 'admin@example.com' # change to your email
typebot-viewer:
labels:
virtual.host: 'bot.domain.com' # change to your domain name
virtual.port: '3000'
virtual.tls-email: 'admin@example.com' # change to your email
```
This config requires you to add the following DNS entry:
```
typebot IN A <server_ip>
bot IN A <server_ip>
```
You can merge this compose file with the first one. Make sure that `NEXTAUTH_URL` is set to `https://typebot.domain.com` and `NEXT_PUBLIC_VIEWER_URL` is set to `https://bot.domain.com`.
When running the compose file, it should automatically enable SSL on your server and you should be able to navigate to:
- `https://typebot.domain.com` for the builder
- `https://bot.domain.com` for the viewer
#### Existing reverse proxy
If you're already running a reverse proxy, the most important things to note are:
1. Configure the virtual hosts to match the `NEXTAUTH_URL` and `NEXT_PUBLIC_VIEWER_URL` in your `docker-compose` configuration.
2. Proxy the traffic to `127.0.0.1:8080` or `{ip-address}:8080` and to `127.0.0.1:8081` or `{ip-address}:8081` if running on a remote machine
### SMTP
I highly recommend using an external SMTP service. There are tons of options out there, including [SendInBlue](https://www.sendinblue.com/), [Mailgun](https://www.mailgun.com/) and [SendGrid](https://sendgrid.com/). It will avoid severe headaches 😅. Then, you will only need to add the required [SMTP configuration variables](/self-hosting/configuration#email-auth-notifications).
If, however, you don't want to, you can instantiate an SMTP server in the docker-compose file.
```yml
version: '3.3'
services:
mail:
image: bytemark/smtp
restart: always
```
And add the following variables to your `.env` file:
```
SMTP_HOST=mail
NEXT_PUBLIC_SMTP_FROM=notifications@typebot.domain.com
```
You will probably need to make sure that `typebot.domain.com` has a valid SPF record and that your server IP has a rDNS set up.
You can merge this compose file with the main one.
### S3 storage
If you don't already have an S3 storage available, you could include it in your docker-compose file:
```yml
version: '3.3'
volumes:
s3-data:
services:
minio:
image: minio/minio
command: server /data
ports:
- '9000:9000'
environment:
MINIO_ROOT_USER: minio
MINIO_ROOT_PASSWORD: minio123
volumes:
- s3-data:/data
# This service just makes sure a bucket with the right policies is created
createbuckets:
image: minio/mc
depends_on:
- minio
entrypoint: >
/bin/sh -c "
sleep 10;
/usr/bin/mc config host add minio http://minio:9000 minio minio123;
/usr/bin/mc mb minio/typebot;
/usr/bin/mc anonymous set public minio/typebot/public;
exit 0;
"
```
And add the following variables to your `.env` file:
```
S3_ACCESS_KEY=minio
S3_SECRET_KEY=minio123
S3_BUCKET=typebot
S3_ENDPOINT=storage.domain.com
```
This config requires you to add the following DNS entry:
```
storage IN A <server_ip>
```
You can merge this compose file with the main one.
## Config example with all the extras
Here is a config example that spins up Typebot with HTTPS, SMTP and S3 storage.
```yml
version: '3.3'
volumes:
db-data:
s3-data:
services:
caddy-gen:
image: 'wemakeservices/caddy-gen:latest'
restart: always
volumes:
- /var/run/docker.sock:/tmp/docker.sock:ro
- {$PWD}/.typebot/caddy-certificates:/data/caddy
ports:
- '80:80'
- '443:443'
depends_on:
- typebot-builder
- typebot-viewer
typebot-db:
image: postgres:14-alpine
restart: always
volumes:
- db-data:/var/lib/postgresql/data
environment:
- POSTGRES_DB=typebot
- POSTGRES_PASSWORD=typebot
typebot-builder:
labels:
virtual.host: 'typebot.domain.com' # change to your domain
virtual.port: '3000'
virtual.tls-email: 'admin@example.com' # change to your email
image: baptistearno/typebot-builder:latest
restart: always
depends_on:
- typebot-db
extra_hosts:
- 'host.docker.internal:host-gateway'
# See https://docs.typebot.io/self-hosting/configuration for more configuration options
env_file:
- .env
typebot-viewer:
labels:
virtual.host: 'bot.domain.com' # change to your domain
virtual.port: '3000'
virtual.tls-email: 'admin@example.com' # change to your email
image: baptistearno/typebot-viewer:latest
restart: always
# See https://docs.typebot.io/self-hosting/configuration for more configuration options
env_file:
- .env
mail:
image: bytemark/smtp
restart: always
minio:
labels:
virtual.host: 'storage.domain.com' # change to your domain
virtual.port: '9000'
virtual.tls-email: 'admin@example.com' # change to your email
image: minio/minio
command: server /data
ports:
- '9000:9000'
environment:
MINIO_ROOT_USER: minio
MINIO_ROOT_PASSWORD: minio123
volumes:
- s3_data:/data
# This service just make sure a bucket with the right policies is created
createbuckets:
image: minio/mc
depends_on:
- minio
entrypoint: >
/bin/sh -c "
sleep 10;
/usr/bin/mc config host add minio http://minio:9000 minio minio123;
/usr/bin/mc mb minio/typebot;
/usr/bin/mc anonymous set public minio/typebot/public;
exit 0;
"
```
<Note>
If you're self-hosting Typebot, [sponsoring
me](https://github.com/sponsors/baptisteArno) is a great way to give back to
the community and to contribute to the long-term sustainability of the
project. Thank you for supporting independent creators of Free Open Source
Software!
</Note>
<Note>
This doc has been inspired by [Plausible docs](https://plausible.io/docs).
They have a similar self-hosting solutions, and their documentation is 🔥.
</Note>

135
apps/docs/self-hosting/deploy/manual.mdx Normal file
View File

@@ -0,0 +1,135 @@
---
title: Manual
---
<Note>
The easiest way to get started with Typebot is with [the official managed
service in the Cloud](https://app.typebot.io). You'll have high availability,
backups, security, and maintenance all managed for you by me, Baptiste,
Typebot's founder. The cloud version can save a substantial amount of
developer time and resources. For most sites this ends up being the best value
option and the revenue goes to funding the maintenance and further development
of Typebot. So you'll be supporting open source software and getting a great
service!
</Note>
## Requirements
- A PostgresDB database hosted somewhere. [Supabase](https://supabase.com/) offer great free options. But you can also setup your own database on your server.
- A server with Node.js 14+, Nginx, and PM2 installed.
- Experience deploying Next.js applications with PM2. Check out [this guide](https://www.coderrocketfuel.com/article/how-to-deploy-a-next-js-website-to-a-digital-ocean-server/) for more information.
## Getting Started
1. Fork/clone the repository and checkout the latest stable version.
```sh
git clone git@github.com:<username>/typebot.io.git
cd typebot.io
git checkout latest
```
2. Setup environment variables by copying the example files and following the [configuration guide](/self-hosting/configuration) to fill in the missing values.
```sh
cp .env.example .env
```
<Note>
The database user should have the `SUPERUSER` role. You can setup and migrate
the database with the `pnpm prisma generate && pnpm db:migrate` command.
</Note>
3. Install dependencies
```sh
pnpm install
```
4. Build the builder and viewer
```sh
pnpm run build:apps
```
<Note>
If you face the issue `Node ran out of memory`, then you should increase the
memory limit for Node.js. For example,`NODE_OPTIONS=--max-old-space-size=4096`
will increase the memory limit to 4GB. Check [this stackoverflow
answer](https://stackoverflow.com/questions/53230823/fatal-error-ineffective-mark-compacts-near-heap-limit-allocation-failed-javas)
for more information.
</Note>
## Deployments
### Deploy the builder
1. Cd into the builder directory and make sure it can be started with `pnpm start`
```sh
cd apps/builder
pnpm start
# You may have to set the port if it's already in use
pnpm start -p 3001
```
2. Deploy the builder with PM2
```sh
pm2 start --name=typebot pnpm -- start
# or select a different port
pm2 start --name=typebot pnpm -- start -p 3001
```
### Deploy the viewer
1. Cd into the viewer directory and make sure it can be started with `pnpm start`
```sh
cd apps/viewer
pnpm start
# You may have to set the port if it's already in use
pnpm start -p 3002
```
2. Deploy the viewer with PM2
```sh
pm2 start --name=typebot pnpm -- start
# or select a different port
pm2 start --name=typebot pnpm -- start -p 3002
```
## Nginx configuration
You can use the following configuration to serve the builder and viewer with Nginx. Make sure to replace the `server_name` with the respective domain name for your Typebot instance. Check out [this guide](https://www.coderrocketfuel.com/article/how-to-deploy-a-next-js-website-to-a-digital-ocean-server/) for a step-by-step guide on how to setup Nginx and PM2.
```nginx
server {
listen 80;
server_name typebot.example.com www.typebot.example.com;
return 301 https://typebot.example.com$request_uri;
}
server {
listen 443 ssl;
server_name typebot.example.com www.typebot.example.com;
# managed by Certbot
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # ma>
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # >
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
location ^~ / {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
}
}
```

67
apps/docs/self-hosting/deploy/vercel.mdx Normal file
View File

@@ -0,0 +1,67 @@
---
title: Vercel
---
<Note>
The easiest way to get started with Typebot is with [the official managed
service in the Cloud](https://app.typebot.io). You'll have high availability,
backups, security, and maintenance all managed for you by me, Baptiste,
Typebot's founder. The cloud version can save a substantial amount of
developer time and resources. For most sites this ends up being the best value
option and the revenue goes to funding the maintenance and further development
of Typebot. So you'll be supporting open source software and getting a great
service!
</Note>
## Requirements
You need a PostgresDB database hosted somewhere. [Supabase](https://supabase.com/) and [Heroku](https://www.heroku.com/) offer great free options.
## Getting Started
Fork the repository
## Disable Github workflows
You may want to [disable the Github actions](https://docs.github.com/en/actions/using-workflows/disabling-and-enabling-a-workflow) as they are most likely not relevant to your use of Typebot. This can be done.
## Reduce function maxDuration (Hobby plan only)
If you deploy on a Vercel Hobby plan, you will need to reduce the `maxDuration` timeout options in `apps/viewer/vercel.json` and set it to `10`
<Note>
- Builder is the application where you'll create your flows.
- Viewer is the bot interface your users will interact with.
</Note>
### Deploy the builder
1. Create a new Vercel project and import the forked repo
2. Change the project name to: `typebot-builder` (or anything else)
3. Choose Next.js framework
4. Change the root directory to: `apps/builder`
5. Change the build command to:
```sh
cd ../.. && pnpm turbo build --filter=builder... && pnpm db:migrate
```
6. Add the required environment variables ([Check out the configuration guide](/self-hosting/configuration))
7. Hit "Deploy"
### Deploy the viewer
1. Create a new Vercel project and import the forked repo
2. Change the project name to: `typebot-viewer` (or anything else)
3. Choose Next.js framework
4. Change the root directory to: `apps/viewer`
5. Change the build command to:
```sh
cd ../.. && pnpm pnpm turbo build --filter=viewer... && pnpm db:migrate
```
6. Add the required environment variables ([Check out the configuration guide](/self-hosting/configuration))
7. Hit "Deploy"

71
apps/docs/self-hosting/get-started.mdx Normal file
View File

@@ -0,0 +1,71 @@
---
title: Overview
icon: server
---
Typebot is 100% open-source and can be self-hosted on your own server. This guide will walk you through the process of setting up your own instance of Typebot.
<Note>
The easiest way to get started with Typebot is with [the official managed
service in the Cloud](https://app.typebot.io). You'll have high availability,
backups, security, and maintenance all managed for you by me, Baptiste,
Typebot's founder.
<br />
The cloud version can save a substantial amount of developer time and
resources. For most sites this ends up being the best value option and the
revenue goes to funding the maintenance and further development of Typebot. So
you'll be supporting open source software and getting a great service!
</Note>
| | [Typebot Cloud](https://app.typebot.io) | Self-Hosting |
| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Hosting | Easy and convenient. It takes 1 minute to start building your bots and share them with a worldwide high availability, backups, security and maintenance all done for you by me, [Baptiste, Typebot's founder](https://twitter.com/baptisteArno). I manage everything so you don’t have to worry about anything and can focus on creating great bot experiences. | You do it all yourself. You need to get a server and you need to manage your infrastructure. You are responsible for installation, maintenance, upgrades, server capacity, uptime, backup, security, stability, consistency, loading time and so on. |
| Storage | All visitor data is exclusively processed on EU-owned cloud infrastructure. This ensures that your bots data processing complies with GDPR. | You have full control and can host your instance on any server in any country that you wish. Host it on a server in your basement or host it with any cloud provider wherever you want. |
| Costs | I charge a subscription fee. Whether you're a solo business owner, a growing startup or a large company, Typebot is here to help you build high-performing chat forms for the right price. Pay for as little or as much usage as you need. | You need to pay for your server, your database, your S3 storage, backups and whatever other cost there is associated with running the infrastructure. You never have to pay any fees to us. |
## License requirements
Typebot is open-source under the GNU Affero General Public License Version 3 (AGPLv3). You can find it [here](https://raw.githubusercontent.com/baptisteArno/typebot.io/main/LICENSE). The goal of the AGPLv3 license is to:
- Maximize user freedom and to encourage companies to contribute to open source.
- Prevent corporations from taking the code and using it as part of their closed-source proprietary products
- Prevent corporations from offering Typebot as a service without contributing to the open source project
- Prevent corporations from confusing people and making them think that the service they sell is in any shape or form approved by the original team
Here are the 3 different possible use cases:
<AccordionGroup>
<Accordion title="You'd like to self-host Typebot as-is without modifying the source code and you don't have the intention to commercialize your version of Typebot.">
You can host and use Typebot without restrictions. Your contributions to
improve Typebot and fix bugs are welcome. 💙
</Accordion>
<Accordion title="You'd like to fork the project to build your own features on top of Typebot and you don't have the intention to commercialize your version of Typebot.">
You need to open-source your modifications
</Accordion>
<Accordion title="You'd like to commercialize your own version of Typebot">
<ol>
<li>You need to open-source your modifications.</li>{' '}
<li>
After your users registration, you should provide a prominent mention and
link to the original project (https://typebot.io). You should clearly
mention that you provide a modified version of the official project,
Typebot. It would be also a good place to explain your version advantages
comparing to the original project.
</li>
<li>You need to provide a link to your forked repository somewhere in the landing page or the builder. This way, interested users can easily access and review the modifications you've made.</li>
</ol>
</Accordion>
</AccordionGroup>
Typebot is composed of 2 Next.js applications you need to deploy:
- the builder, where you build your typebots
- the viewer, where your user answer the typebot
I've written guides on how to deploy Typebot using:
- [Docker](/self-hosting/deploy/docker)
- [Vercel](/self-hosting/deploy/vercel)
- [Manual](/self-hosting/deploy/manual)

16
apps/docs/self-hosting/guides/planetscale.mdx Normal file
View File

@@ -0,0 +1,16 @@
---
title: 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.
</Note>

121
apps/docs/self-hosting/guides/s3.mdx Normal file
View File

@@ -0,0 +1,121 @@
---
title: S3 Configuration
---
In order for Typebot to store your uploaded files, you need to configure an S3 bucket.
You can use any S3-compatible storage provider. Here are some examples:
- [AWS S3](https://aws.amazon.com/s3/)
- [DigitalOcean Spaces](https://www.digitalocean.com/products/spaces/)
- [Wasabi](https://wasabi.com/)
- [MinIO](https://min.io/)
<Note>
If you are self-hosting using Docker, you can follow the [docker-specific
instructions](../deploy/docker#s3-storage) to run a local S3-compatible
storage server.
</Note>
To function properly, your S3 bucket must have the following configuration:
- CORS policy:
```json
{
"CORSRules": [
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["PUT", "POST"],
"AllowedOrigins": ["*"],
"ExposeHeaders": ["ETag"]
}
]
}
```
- Access policy (replace `<bucket-name>` with the name of your S3 bucket):
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<bucket-name>/public/*"
}
]
}
```
## How to set up CORS policy?
Some S3 providers like AWS provide a user interface that allows you to directly enter a bucket policy. However, other providers might not provide such an interface. In this case, you can set up the CORS policy from the command line.
1. Make sure you have the AWS CLI (Command Line Interface) installed and configured on your machine. If you haven't done so already, refer to the official AWS CLI documentation for installation and configuration instructions.
2. Open your command-line interface (CLI), such as Terminal on macOS or Command Prompt on Windows.
3. Create a JSON file (e.g., cors-policy.json) that contains the desired CORS policy. Here's an example CORS policy that allows GET requests from all origins (\*):
```json
{
"CORSRules": [
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["PUT", "POST"],
"AllowedOrigins": ["*"],
"ExposeHeaders": ["ETag"]
}
]
}
```
4. Run the following command, replacing `<bucket-name>` with the name of your S3 bucket and `<path-to-policy>` with the file path to your JSON CORS policy file:
```bash
aws s3api put-bucket-cors --bucket <bucket-name> --cors-configuration file://<path-to-policy>
```
When the command is executed successfully, AWS will respond with the JSON representation of the CORS configuration. This indicates that the CORS policy has been applied to your S3 bucket.
Note: Ensure that you have the appropriate AWS credentials and permissions to perform this action.
## How to set up Access policy?
Some S3 providers like AWS provide a user interface that allows you to directly enter a bucket policy. However, other providers like DigitalOcean do not provide such a user interface. In this case, you can set up a bucket policy from the command line.
To set up an S3 bucket policy from the command line, you can use the AWS Command Line Interface (CLI). Here's a step-by-step guide:
1. Install and configure the AWS CLI on your machine if you haven't done so already. You can refer to the official AWS CLI documentation for instructions on installation and configuration.
2. Open your command-line interface (e.g., Terminal on macOS or Command Prompt on Windows).
3. To set up a bucket policy, you need the policy document in JSON format. Create a JSON file (e.g., bucket-policy.json) containing the desired policy. Here's an example policy that allows Public read access for all objects within the bucket:
```json
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<bucket-name>/public/*"
}
]
}
```
4. Replace `<bucket-name>` with the name of your S3 bucket.
5. Run the following command, replacing `<bucket-name>` with the name of your S3 bucket and `<path-to-policy>` with the file path to your JSON policy document:
```bash
aws s3api put-bucket-policy --bucket <bucket-name> --policy file://<path-to-policy>
```
After running the command, AWS will respond with the policy's JSON representation if the operation is successful. You should see the response output confirming the policy has been added to the bucket.

12
apps/docs/self-hosting/troubleshoot.mdx Normal file
View File

@@ -0,0 +1,12 @@
---
title: Troubleshoot
icon: bug
---
## My workspace is showing Free plan and 200 chats limit
You most likely forgot to set up an `ADMIN_EMAIL` variable or did not signed up using the specified email. You can also set the `DEFAULT_WORKSPACE_PLAN` variable to the value of your choice (`FREE`, `STARTER`, `PRO`, `LIFETIME`, `UNLIMITED`) to attribute the specified plan to all newly created workspaces. You can also directly connect to your database and update the `Workspace` table to change the plan of an existing workspace.
## I can't upload files
You need to add an [S3 configuration](./guides/s3#s3-storage-media-uploads) to your project. If you are self-hosting with Docker, you can [add a S3 service to your docker-compose file](./deploy/docker#s3-storage).