# Configurations self-hosting TypeBot

Link: [https://docs.typebot.io/self-hosting/configuration](https://docs.typebot.io/self-hosting/configuration)

<header class="relative" id="bkmrk-configuration">### Configuration

</header>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. It also comes with some perks like priority support and private workshops. ❤️

**Parameters marked with \* are required.**

#### **​<span style="color: rgb(68, 68, 68);">General</span>**

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de" style="text-align: justify;"><table style="width: 100%;"><thead><tr><th style="width: 29.9061%;">Parameter</th><th style="width: 6.43945%;">Default</th><th style="width: 63.6346%;">Description</th></tr></thead><tbody><tr><td style="width: 29.9061%;">DATABASE\_URL \*</td><td style="width: 6.43945%;"> </td><td style="width: 63.6346%;">The database URL</td></tr><tr><td style="width: 29.9061%;">ENCRYPTION\_SECRET \*</td><td style="width: 6.43945%;"> </td><td style="width: 63.6346%;">A 256-bit key used to encrypt sensitive data. It is strongly recommended to [generate](https://docs.typebot.io/self-hosting/deploy/docker#2-add-the-required-configuration) a new one. The secret should be the same between builder and viewer.</td></tr><tr><td style="width: 29.9061%;">NEXTAUTH\_URL \*</td><td style="width: 6.43945%;"> </td><td style="width: 63.6346%;">The builder base URL. Should be the publicly accessible URL (i.e. `https://typebot.domain.com`)</td></tr><tr><td style="width: 29.9061%;">NEXT\_PUBLIC\_VIEWER\_URL \*</td><td style="width: 6.43945%;"> </td><td style="width: 63.6346%;">The viewer base URL. Should be the publicly accessible URL (i.e. `https://bot.domain.com`)</td></tr><tr><td style="width: 29.9061%;">ADMIN\_EMAIL</td><td style="width: 6.43945%;"> </td><td style="width: 63.6346%;">The email that will get an `UNLIMITED` plan on user creation. The associated user will be able to bypass database rules. You can provide multiple emails separated by a comma without spaces.</td></tr><tr><td style="width: 29.9061%;">NEXTAUTH\_URL\_INTERNAL</td><td style="width: 6.43945%;"> </td><td style="width: 63.6346%;">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`.</td></tr><tr><td style="width: 29.9061%;">DEFAULT\_WORKSPACE\_PLAN</td><td style="width: 6.43945%;">FREE</td><td style="width: 63.6346%;">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`</td></tr><tr><td style="width: 29.9061%;">DISABLE\_SIGNUP</td><td style="width: 6.43945%;">false</td><td style="width: 63.6346%;">Disable new user sign ups. Invited users are still able to sign up.</td></tr><tr><td style="width: 29.9061%;">NEXT\_PUBLIC\_ONBOARDING\_TYPEBOT\_ID</td><td style="width: 6.43945%;"> </td><td style="width: 63.6346%;">Typebot ID used for the onboarding. Onboarding page is skipped if not provided.</td></tr><tr><td style="width: 29.9061%;">DEBUG</td><td style="width: 6.43945%;">false</td><td style="width: 63.6346%;">If enabled, the server will print valuable logs to debug config issues.</td></tr><tr><td style="width: 29.9061%;">NEXT\_PUBLIC\_BOT\_FILE\_UPLOAD\_MAX\_SIZE</td><td style="width: 6.43945%;"> </td><td style="width: 63.6346%;">Limits the size of each file that can be uploaded in the bots (i.e. Set `10` to limit the file upload to 10MB)</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#email-auth-notifications)</div>## <span class="cursor-pointer">Email (Auth, notifications)</span>

Used for sending email notifications and authentication

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-1" style="text-align: justify;"><table style="width: 100%;"><thead><tr><th style="width: 22.4032%;">Parameter</th><th style="width: 7.86696%;">Default</th><th style="width: 69.71%;">Description</th></tr></thead><tbody><tr><td style="width: 22.4032%;">SMTP\_USERNAME</td><td style="width: 7.86696%;"> </td><td style="width: 69.71%;">SMTP username</td></tr><tr><td style="width: 22.4032%;">SMTP\_PASSWORD</td><td style="width: 7.86696%;"> </td><td style="width: 69.71%;">SMTP password</td></tr><tr><td style="width: 22.4032%;">SMTP\_HOST</td><td style="width: 7.86696%;"> </td><td style="width: 69.71%;">SMTP host. (i.e. `smtp.host.com`)</td></tr><tr><td style="width: 22.4032%;">SMTP\_PORT</td><td style="width: 7.86696%;">25</td><td style="width: 69.71%;">SMTP port</td></tr><tr><td style="width: 22.4032%;">NEXT\_PUBLIC\_SMTP\_FROM</td><td style="width: 7.86696%;"> </td><td style="width: 69.71%;">From name and email (i.e. `'Typebot Notifications' <notifications@host.com>`)</td></tr><tr><td style="width: 22.4032%;">SMTP\_SECURE</td><td style="width: 7.86696%;">false</td><td style="width: 69.71%;">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</td></tr><tr><td style="width: 22.4032%;">SMTP\_AUTH\_DISABLED</td><td style="width: 7.86696%;">false</td><td style="width: 69.71%;">To disable the authentication by email but still use the provided config for notifications</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-1" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#google-auth)</div>## <span class="cursor-pointer">Google Auth</span>

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-2" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>GOOGLE\_CLIENT\_ID</td><td> </td><td>The Client ID from the Google API Console</td></tr><tr><td>GOOGLE\_CLIENT\_SECRET</td><td> </td><td>The Client secret from the Google API Console</td></tr><tr><td>NEXT\_PUBLIC\_GOOGLE\_API\_KEY</td><td> </td><td>The API Key from the Google API Console</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-2" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#google-sheets)</div>## <span class="cursor-pointer">Google Sheets</span>

<table id="bkmrk-parameter-default-de-3" style="width: 69.4048%; height: 118.438px;"><thead><tr style="height: 29.6094px;"><th style="width: 36.9542%; height: 29.6094px;">Parameter</th><th style="width: 10.8633%; height: 29.6094px;">Default</th><th style="width: 51.9828%; height: 29.6094px;">Description</th></tr></thead><tbody><tr style="height: 29.6094px;"><td style="width: 36.9542%; height: 29.6094px;">GOOGLE\_CLIENT\_ID</td><td style="width: 10.8633%; height: 29.6094px;"> </td><td style="width: 51.9828%; height: 29.6094px;">The Client ID from the Google API Console</td></tr><tr style="height: 29.6094px;"><td style="width: 36.9542%; height: 29.6094px;">GOOGLE\_CLIENT\_SECRET</td><td style="width: 10.8633%; height: 29.6094px;"> </td><td style="width: 51.9828%; height: 29.6094px;">The Client secret from the Google API Console</td></tr><tr style="height: 29.6094px;"><td style="width: 36.9542%; height: 29.6094px;">NEXT\_PUBLIC\_GOOGLE\_API\_KEY</td><td style="width: 10.8633%; height: 29.6094px;"> </td><td style="width: 51.9828%; height: 29.6094px;">The API Key from the Google API Console</td></tr></tbody></table>

##### <span style="color: rgb(34, 34, 34); text-align: justify;">  
**Google Fonts**</span>

Used authentication in the builder and for the Google Sheets integration step.

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-4" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>NEXT\_PUBLIC\_GOOGLE\_API\_KEY</td><td> </td><td>The API Key from the Google API Console</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-3" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#github-auth)</div>## <span class="cursor-pointer">GitHub (Auth)</span>

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`

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-5" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>GITHUB\_CLIENT\_ID</td><td> </td><td>Application client ID. Also used to check if it is enabled in the front-end</td></tr><tr><td>GITHUB\_CLIENT\_SECRET</td><td> </td><td>Application secret</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-4" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#gitlab-auth)</div>## <span class="cursor-pointer">GitLab (Auth)</span>

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`

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-6" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>GITLAB\_CLIENT\_ID</td><td> </td><td>Application client ID. Also used to check if it is enabled in the front-end</td></tr><tr><td>GITLAB\_CLIENT\_SECRET</td><td> </td><td>Application secret</td></tr><tr><td>GITLAB\_BASE\_URL</td><td>[https://gitlab.com](https://gitlab.com/)</td><td>Base URL of the GitLab instance</td></tr><tr><td>GITLAB\_REQUIRED\_GROUPS</td><td> </td><td>Comma-separated list of groups the user has to be a direct member of, e.g. `foo,bar`</td></tr><tr><td>GITLAB\_NAME</td><td>GitLab</td><td>Name of the GitLab instance, used for the SSO Login Button</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-5" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#facebook-auth)</div>## <span class="cursor-pointer">Facebook (Auth)</span>

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`

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-7" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>FACEBOOK\_CLIENT\_ID</td><td> </td><td>Application client ID. Also used to check if it is enabled in the front-end</td></tr><tr><td>FACEBOOK\_CLIENT\_SECRET</td><td> </td><td>Application secret</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-6" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#azure-ad-auth)</div>## <span class="cursor-pointer">Azure AD (Auth)</span>

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`

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-8" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>AZURE\_AD\_CLIENT\_ID</td><td> </td><td>Application client ID</td></tr><tr><td>AZURE\_AD\_CLIENT\_SECRET</td><td> </td><td>Application client secret. Can be obtained from Azure Portal.</td></tr><tr><td>AZURE\_AD\_TENANT\_ID</td><td> </td><td>Azure Tenant ID</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-7" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#keycloak-auth)</div>## <span class="cursor-pointer">Keycloak (Auth)</span>

Used for authenticating with Keycloak. Follow the official Keycloak guide for creating OAuth2 applications [here](https://www.keycloak.org/).

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-9" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>KEYCLOAK\_CLIENT\_ID</td><td> </td><td>Application client ID.</td></tr><tr><td>KEYCLOAK\_CLIENT\_SECRET</td><td> </td><td>Application secret</td></tr><tr><td>KEYCLOAK\_REALM</td><td> </td><td>Your Keycloak Realm</td></tr><tr><td>KEYCLOAK\_BASE\_URL</td><td> </td><td>Base URL of the Keycloak instance</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-8" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#custom-oauth-provider-auth)</div>## <span class="cursor-pointer">Custom OAuth Provider (Auth)</span>

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-10" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>CUSTOM\_OAUTH\_NAME</td><td>Custom OAuth</td><td>Provider name. Will be displayed in the sign in form.</td></tr><tr><td>CUSTOM\_OAUTH\_CLIENT\_ID</td><td> </td><td>OAuth client ID.</td></tr><tr><td>CUSTOM\_OAUTH\_CLIENT\_SECRET</td><td> </td><td>OAuth client secret.</td></tr><tr><td>CUSTOM\_OAUTH\_WELL\_KNOWN\_URL</td><td> </td><td>OAuth .well-known URL (i.e. `https://auth.domain.com/.well-known/openid-configuration`)</td></tr><tr><td>CUSTOM\_OAUTH\_USER\_ID\_PATH</td><td>id</td><td>Used to map the id from the user info object</td></tr><tr><td>CUSTOM\_OAUTH\_USER\_NAME\_PATH</td><td>name</td><td>Used to map the name from the user info object</td></tr><tr><td>CUSTOM\_OAUTH\_USER\_EMAIL\_PATH</td><td>email</td><td>Used to map the email from the user info object</td></tr><tr><td>CUSTOM\_OAUTH\_USER\_IMAGE\_PATH</td><td>image</td><td>Used to map the image from the user info object</td></tr><tr><td>CUSTOM\_OAUTH\_SCOPE</td><td>openid profile email</td><td>OAuth scope</td></tr></tbody></table>

</div>For `*_PATH` parameters, you can use dot notation to access nested properties (i.e. `account.name`).

The Authorization callback URL should be: `$NEXTAUTH_URL/api/auth/callback/custom-oauth`

<div class="absolute" id="bkmrk-%E2%80%8B-9" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#s3-storage-media-uploads)</div>## <span class="cursor-pointer">S3 Storage (Media uploads)</span>

Used for uploading images, videos, etc… It can be any S3 compatible object storage service (Minio, Digital Oceans Space, AWS S3…)

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-11" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>S3\_ACCESS\_KEY</td><td> </td><td>S3 access key. Also used to check if upload feature is enabled</td></tr><tr><td>S3\_SECRET\_KEY</td><td> </td><td>S3 secret key.</td></tr><tr><td>S3\_BUCKET</td><td>typebot</td><td>Name of the bucket where assets will be uploaded in.</td></tr><tr><td>S3\_PORT</td><td> </td><td>S3 Host port number</td></tr><tr><td>S3\_ENDPOINT</td><td> </td><td>S3 endpoint (i.e. `s3.domain.com`).</td></tr><tr><td>S3\_SSL</td><td>true</td><td>Use SSL when establishing the connection.</td></tr><tr><td>S3\_REGION</td><td> </td><td>S3 region.</td></tr><tr><td>S3\_PUBLIC\_CUSTOM\_DOMAIN</td><td> </td><td>If the final URL that is used to read public files is different from `S3_ENDPOINT`</td></tr></tbody></table>

</div>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](https://docs.typebot.io/self-hosting/guides/s3) doc.

<div class="absolute" id="bkmrk-%E2%80%8B-10" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#giphy-gif-picker)</div>## <span class="cursor-pointer">Giphy (GIF picker)</span>

Used to search for GIF. You can create a Giphy app [here](https://developers.giphy.com/dashboard/)

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-12" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>NEXT\_PUBLIC\_GIPHY\_API\_KEY</td><td> </td><td>Giphy API key</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-11" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#unsplash-image-picker)</div>## <span class="cursor-pointer">Unsplash (image picker)</span>

Used to search for images. You can create an Unsplash app [here](https://unsplash.com/developers)

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-13" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>NEXT\_PUBLIC\_UNSPLASH\_APP\_NAME</td><td> </td><td>Unsplash App name</td></tr><tr><td>NEXT\_PUBLIC\_UNSPLASH\_ACCESS\_KEY</td><td> </td><td>Unsplash API key</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-12" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#pexels-video-picker)</div>## <span class="cursor-pointer">Pexels (video picker)</span>

Used to search for videos. You can create a Pexels app [here](https://www.pexels.com/api/key/)

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-14" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>NEXT\_PUBLIC\_PEXELS\_API\_KEY</td><td> </td><td>Pexels API key</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-13" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#tolgee-i18n-contribution-dev-tool)</div>## <span class="cursor-pointer">Tolgee (i18n contribution dev tool)</span>

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-" style="text-align: justify;"><div class="my-4 px-5 py-4 overflow-hidden rounded-xl flex gap-3 border border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10"><div class="mt-0.5 w-4"><svg aria-label="Note" class="w-4 h-4 text-sky-500" fill="currentColor" height="14" viewbox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M7 1.3C10.14 1.3 12.7 3.86 12.7 7C12.7 10.14 10.14 12.7 7 12.7C5.48908 12.6974 4.0408 12.096 2.97241 11.0276C1.90403 9.9592 1.30264 8.51092 1.3 7C1.3 3.86 3.86 1.3 7 1.3ZM7 0C3.14 0 0 3.14 0 7C0 10.86 3.14 14 7 14C10.86 14 14 10.86 14 7C14 3.14 10.86 0 7 0ZM8 3H6V8H8V3ZM8 9H6V11H8V9Z" fill-rule="evenodd"></path></svg></div><div class="text-sm prose min-w-0 text-sky-900 dark:text-sky-200">  
</div></div></div>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).

Set up these environment variables to enable [Tolgee dev tool](https://tolgee.io/features/dev-tools).

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-15" style="text-align: justify;"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>NEXT\_PUBLIC\_TOLGEE\_API\_KEY</td><td> </td><td>Your Tolgee API key</td></tr><tr><td>NEXT\_PUBLIC\_TOLGEE\_API\_URL</td><td>[https://tolgee.server.baptistearno.com](https://tolgee.server.baptistearno.com/)</td><td>The Tolgee API base URL</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-14" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#whatsapp-preview)</div>## <span class="cursor-pointer">WhatsApp (Preview)</span>

In order to be able to test your bot on WhatsApp from the Preview drawer, you need to set up a WhatsApp business app.

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-16" style="text-align: justify;"><div class="border dark:border-white/10 rounded-xl mb-3 overflow-hidden dark:bg-codeblock" role="button"><div class="leading-tight text-left">  
</div></div><table style="width: 100%;"><thead><tr><th style="width: 32.0556%;">Parameter</th><th style="width: 11.9113%;">Default</th><th style="width: 56.0133%;">Description</th></tr></thead><tbody><tr><td style="width: 32.0556%;">META\_SYSTEM\_USER\_TOKEN</td><td style="width: 11.9113%;"> </td><td style="width: 56.0133%;">The system user token used to send WhatsApp messages</td></tr><tr><td style="width: 32.0556%;">WHATSAPP\_PREVIEW\_FROM\_PHONE\_NUMBER\_ID</td><td style="width: 11.9113%;"> </td><td style="width: 56.0133%;">The phone number ID from which the message will be sent</td></tr><tr><td style="width: 32.0556%;">WHATSAPP\_PREVIEW\_TEMPLATE\_NAME</td><td style="width: 11.9113%;"> </td><td style="width: 56.0133%;">The preview start template message name</td></tr><tr><td style="width: 32.0556%;">WHATSAPP\_PREVIEW\_TEMPLATE\_LANG</td><td style="width: 11.9113%;">en\_US</td><td style="width: 56.0133%;">The preview start template message name</td></tr><tr><td style="width: 32.0556%;">WHATSAPP\_CLOUD\_API\_URL</td><td style="width: 11.9113%;">[https://graph.facebook.com](https://graph.facebook.com/)</td><td style="width: 56.0133%;">The WhatsApp Cloud API base URL</td></tr><tr><td style="width: 32.0556%;">WHATSAPP\_INTERACTIVE\_GROUP\_SIZE</td><td style="width: 11.9113%;">3</td><td style="width: 56.0133%;">The array size of items to send to API on choice input. You can’t choose a number higher than 3 if you are using the official cloud API URL.</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-15" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#redis)</div>## <span class="cursor-pointer">Redis</span>

In Typebot, Redis is optional and is used to:

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-rate-limit-the-sign-" style="text-align: justify;">- Rate limit the sign in requests based on user IP
- Enable multiple media upload on WhatsApp

<table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>REDIS\_URL</td><td> </td><td>The database URL. i.e. `redis://<username>:<password>@<host>:<port>`</td></tr></tbody></table>

</div><div class="absolute" id="bkmrk-%E2%80%8B-16" style="text-align: justify;">[​ <div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg fill="gray" height="12px" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div>](https://docs.typebot.io/self-hosting/configuration#others)</div>## <span class="cursor-pointer">Others</span>

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.

##### **Vercel (custom domains)**

<table id="bkmrk-parameter-default-de-17"><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>VERCEL\_TOKEN</td><td> </td><td>Vercel API token</td></tr><tr><td>NEXT\_PUBLIC\_VERCEL\_VIEWER\_PROJECT\_NAME</td><td> </td><td>The name of the viewer project in Vercel</td></tr><tr><td>VERCEL\_TEAM\_ID</td><td> </td><td>Vercel team ID that contains the viewer project</td></tr></tbody></table>

##### **Telemetry**

<div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-18" style="text-align: justify;"><div class="border dark:border-white/10 rounded-xl mb-3 overflow-hidden dark:bg-codeblock" role="button"><div class="mt-2 mb-4 mx-6" id="bkmrk-parameter-default-de-19"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>MESSAGE\_WEBHOOK\_URL</td><td> </td><td>Webhook URL called to receive important system messages</td></tr><tr><td>USER\_CREATED\_WEBHOOK\_URL</td><td> </td><td>Webhook URL called whenever a new user is created</td></tr></tbody></table>

</div><div class="mt-2 mb-4 mx-6">**PostHog**</div></div></div><div class="mt-2 mb-4 mx-6" id="bkmrk--1"></div><div class="relative mt-8 prose prose-gray dark:prose-invert" id="bkmrk-parameter-default-de-20" style="text-align: justify;"><div class="border dark:border-white/10 rounded-xl mb-3 overflow-hidden dark:bg-codeblock" role="button"><div class="mt-2 mb-4 mx-6" id="bkmrk-parameter-default-de-21"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>NEXT\_PUBLIC\_POSTHOG\_KEY</td><td> </td><td>PostHog API Key</td></tr><tr><td>NEXT\_PUBLIC\_POSTHOG\_HOST</td><td>[https://app.posthog.com](https://app.posthog.com/)</td><td>PostHog API Host</td></tr></tbody></table>

**System labels**</div><div class="mt-2 mb-4 mx-6" id="bkmrk--2"></div><div class="mt-2 mb-4 mx-6" id="bkmrk-parameter-default-de-22"><table><thead><tr><th>Parameter</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td>NEXT\_PUBLIC\_VIEWER\_404\_TITLE</td><td>404</td><td> </td></tr><tr><td>NEXT\_PUBLIC\_VIEWER\_404\_SUBTITLE</td><td>The bot you’re looking for doesn’t exist</td><td>  
</td></tr></tbody></table>

</div></div><div class="border dark:border-white/10 rounded-xl mb-3 overflow-hidden dark:bg-codeblock" role="button"><div class="absolute -top-[8rem]" id="bkmrk--3"></div><div class="mr-0.5"><svg class="h-3 w-3 transition bg-gray-700 dark:bg-gray-400 duration-200 rotate-90 -mt-1"></svg></div></div></div>