-
+
+
+ | {scopedT('table.nameHeader')} | -{scopedT('table.createdHeader')} | +{t('account.apiTokens.table.nameHeader')} | +{t('account.apiTokens.table.createdHeader')} |
|---|
| Max chats | +Price per month | +Price per 1k chats | +
|---|---|---|
| + {tier.up_to === 'inf' + ? '2,000,000+' + : tier.up_to.toLocaleString()} + | ++ {index === 0 ? 'included' : formatPrice(pricePerMonth)} + | ++ {index === proChatTiers.length - 1 + ? formatPrice(4.42, { maxFractionDigits: 2 }) + : index === 0 + ? 'included' + : formatPrice( + (((pricePerMonth * 100) / + ((tier.up_to as number) - + (proChatTiers.at(0)?.up_to as number))) * + 1000) / + 100, + { maxFractionDigits: 2 } + )} + | +
| # | -{scopedT('paidAt')} | -{scopedT('subtotal')} | +{t('billing.invoices.paidAt')} | +{t('billing.invoices.subtotal')} |
|---|
| Max chats | +Price per month | +Price per 1k chats | +
|---|---|---|
| + {tier.up_to === 'inf' + ? '2,000,000+' + : tier.up_to.toLocaleString()} + | ++ {index === 0 ? 'included' : formatPrice(pricePerMonth)} + | ++ {index === proChatTiers.length - 1 + ? formatPrice(4.42, { maxFractionDigits: 2 }) + : index === 0 + ? 'included' + : formatPrice( + (((pricePerMonth * 100) / + ((tier.up_to as number) - + (proChatTiers.at(0)?.up_to as number))) * + 1000) / + 100, + { maxFractionDigits: 2 } + )} + | +
| Chats | -{chatsLimit.FREE.totalIncluded} / month | -- {parseNumberWithCommas( - chatsLimit.STARTER.graduatedPrice[0].totalIncluded - )}{' '} - / month - | -- {parseNumberWithCommas( - chatsLimit.PRO.graduatedPrice[0].totalIncluded - )}{' '} - / month - | +{chatsLimits.FREE} / month | +{parseNumberWithCommas(chatsLimits.STARTER)} / month | +{parseNumberWithCommas(chatsLimits.PRO)} / month |
| Additional Chats | + | {formatPrice(10)} per 500 chats | - {formatPrice(chatsLimit.STARTER.graduatedPrice[1].price)} per{' '} - {chatsLimit.STARTER.graduatedPrice[1].totalIncluded - - chatsLimit.STARTER.graduatedPrice[0].totalIncluded} - | -- {formatPrice(chatsLimit.PRO.graduatedPrice[1].price)} per{' '} - {chatsLimit.PRO.graduatedPrice[1].totalIncluded - - chatsLimit.PRO.graduatedPrice[0].totalIncluded} + | ||
| 2 GB | 10 GB | |||||
| Additional Storage | -- | - {formatPrice(storageLimit.STARTER.graduatedPrice[1].price)} per{' '} - {storageLimit.STARTER.graduatedPrice[1].totalIncluded - - storageLimit.STARTER.graduatedPrice[0].totalIncluded}{' '} - GB - | -- {formatPrice(storageLimit.PRO.graduatedPrice[1].price)} per{' '} - {storageLimit.PRO.graduatedPrice[1].totalIncluded - - storageLimit.PRO.graduatedPrice[0].totalIncluded}{' '} - GB - | -|||
| Members | Just you | -{seatsLimit.STARTER.totalIncluded} seats | -{seatsLimit.PRO.totalIncluded} seats | +{seatsLimits.STARTER} seats | +{seatsLimits.PRO} seats | |
| Guests | @@ -293,6 +271,14 @@ export const PlanComparisonTables = () => (||||||
| WhatsApp integration | ++ | + |
+ |
+ |||
| Custom domains | diff --git a/apps/landing-page/components/PricingPage/PricingCard/index.tsx b/apps/landing-page/components/PricingPage/PricingCard/index.tsx index 3bda0a7d24..4fe4906ce3 100644 --- a/apps/landing-page/components/PricingPage/PricingCard/index.tsx +++ b/apps/landing-page/components/PricingPage/PricingCard/index.tsx @@ -9,9 +9,9 @@ import { VStack, } from '@chakra-ui/react' import * as React from 'react' -import { formatPrice } from '@typebot.io/lib/pricing' import { CheckCircleIcon } from '../../../assets/icons/CheckCircleIcon' import { Card, CardProps } from './Card' +import { formatPrice } from '@typebot.io/lib/billing/formatPrice' export interface PricingCardData { features: React.ReactNode[] diff --git a/apps/landing-page/components/PricingPage/ProPlanCard.tsx b/apps/landing-page/components/PricingPage/ProPlanCard.tsx index 64ffc00f03..bb6108369a 100644 --- a/apps/landing-page/components/PricingPage/ProPlanCard.tsx +++ b/apps/landing-page/components/PricingPage/ProPlanCard.tsx @@ -4,154 +4,75 @@ import { Text, Button, HStack, - Menu, - MenuButton, - MenuItem, - MenuList, + Stack, + Link, } from '@chakra-ui/react' -import { ChevronDownIcon } from 'assets/icons/ChevronDownIcon' import { HelpCircleIcon } from 'assets/icons/HelpCircleIcon' import { Plan } from '@typebot.io/prisma' -import Link from 'next/link' -import React, { useState } from 'react' -import { parseNumberWithCommas } from '@typebot.io/lib' -import { - chatsLimit, - computePrice, - seatsLimit, - storageLimit, -} from '@typebot.io/lib/pricing' +import React from 'react' import { PricingCard } from './PricingCard' +import { prices, seatsLimits } from '@typebot.io/lib/billing/constants' type Props = { - isYearly: boolean + onChatsTiersClick: () => void } -export const ProPlanCard = ({ isYearly }: Props) => { - const [selectedChatsLimitIndex, setSelectedChatsLimitIndex] = - useState |
+
+You can insert any links starting with `http:`, `https:`, `mailto:`, `tel:` or `sms:`. It can also be a variable.
diff --git a/apps/docs/docs/editor/blocks/inputs/file-upload.mdx b/apps/docs/docs/editor/blocks/inputs/file-upload.mdx
index 2f1df61067..3730255b56 100644
--- a/apps/docs/docs/editor/blocks/inputs/file-upload.mdx
+++ b/apps/docs/docs/editor/blocks/inputs/file-upload.mdx
@@ -29,4 +29,6 @@ The File upload input block allows you to collect files from your user.
The placeholder accepts [HTML](https://en.wikipedia.org/wiki/HTML).
-Note that there is a 10MB fixed limit per file.
+## 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.
diff --git a/apps/docs/docs/editor/blocks/integrations/chatwoot.md b/apps/docs/docs/editor/blocks/integrations/chatwoot.md
index b06e9b1093..e9f941ecc5 100644
--- a/apps/docs/docs/editor/blocks/integrations/chatwoot.md
+++ b/apps/docs/docs/editor/blocks/integrations/chatwoot.md
@@ -44,3 +44,9 @@ You can link the current result URL to the Chatwoot conversation by creating thi
src="/img/blocks/integrations/chatwoot/custom-attribute.png"
alt="Chatwoot custom attribute"
/>
+
+### Set user behavior
+
+If you are prefilling user information, by default, if you leave the ID input empty, it will set the Chatwoot user ID as either the `Email` or the Result ID.
+
+Setting the `Email` as the ID allows us to avoid having contact not properly merged together (https://github.com/chatwoot/chatwoot/issues/2811)
diff --git a/apps/docs/docs/editor/blocks/integrations/google-sheets.mdx b/apps/docs/docs/editor/blocks/integrations/google-sheets.mdx
index 74ca67d4c9..2555d12d09 100644
--- a/apps/docs/docs/editor/blocks/integrations/google-sheets.mdx
+++ b/apps/docs/docs/editor/blocks/integrations/google-sheets.mdx
@@ -16,7 +16,7 @@ In order to properly work, your spreadsheet must have its first row as a header
## How to add the submission date to my row?
-For this, you will need to set a new variable with the value "Today" before the Google Sheets block. Then you can simply use this variable in the Google Sheets block.
+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
diff --git a/apps/docs/docs/editor/blocks/integrations/openai.mdx b/apps/docs/docs/editor/blocks/integrations/openai.mdx
index 573411cf6e..d5f671a716 100644
--- a/apps/docs/docs/editor/blocks/integrations/openai.mdx
+++ b/apps/docs/docs/editor/blocks/integrations/openai.mdx
@@ -1,7 +1,7 @@
-import { YoutubeEmbed } from '../../../../src/js/YoutubeEmbed.jsx'
-
# OpenAI
+## Create chat completion
+
With the OpenAI block, you can create a chat completion based on your user queries and display the answer back to your typebot.
+
+Then you can give the OpenAI block access to this sequence of messages:
+## Create speech
+
+This action allows you to transform a text input into an audio URL that you can reuse in your bot.
+
:::note
-Under the hood, **Messages sequence โจ** will convert the provided variables into lists if it's not already the case.
+The generated audio URLs are temporary and expire after 7 days. If you need to store them, make sure to download them before they expire.
:::
-
+
+
+
+
+
+
+
+Make sure to click on it to see what is required to do to fix the issue.
diff --git a/apps/docs/docs/editor/publish.md b/apps/docs/docs/editor/publish.md
new file mode 100644
index 0000000000..83a68a4ffd
--- /dev/null
+++ b/apps/docs/docs/editor/publish.md
@@ -0,0 +1,15 @@
+# Publish
+
+Once you publish your bot, its public URL will work and you can send it to anyone and start collecting results.
+
+You can always modify your bot and the new changes won't be published as long as you don't hit the Publish button again.
+
+
+
+- "Restore published version": drop your current changes and revert the bot to its published version.
+- "Close typebot to new responses": close your typebot and your users will see the following message: "This bot is now closed."
+- "Unpublish typebot": mark the typebot as unpublished and your users will see the following message: "The bot you're looking for doesn't exist"
diff --git a/apps/docs/docs/editor/share.md b/apps/docs/docs/editor/share.md
index c25e47511d..330dfff826 100644
--- a/apps/docs/docs/editor/share.md
+++ b/apps/docs/docs/editor/share.md
@@ -1,15 +1,15 @@
# Share
-Once you publish your bot, its public URL will work and you can send it to anyone and start collecting results.
-
-You can always modify your bot and the new changes won't be published as long as you don't hit the Publish button again.
+Your typebot flow can be publicly shared. For this, open the Share menu and enable the `Make the flow publicly available` option:
-- "Restore published version": drop your current changes and revert the bot to its published version.
-- "Close typebot to new responses": close your typebot and your users will see the following message: "This bot is now closed."
-- "Unpublish typebot": mark the typebot as unpublished and your users will see the following message: "The bot you're looking for doesn't exist"
+The flow can then be tested by non-authenticated guests. They are able to check all the options and can play the bot in preview mode.
+
+
diff --git a/apps/docs/docs/editor/variables.mdx b/apps/docs/docs/editor/variables.mdx
index 450eb230ad..3703aa0595 100644
--- a/apps/docs/docs/editor/variables.mdx
+++ b/apps/docs/docs/editor/variables.mdx
@@ -10,6 +10,28 @@ You can tell your input step to save the answer into a variable and reuse then i
+## Use variables
+
+Once your variables are declared you can use theme **anywhere** in your bot. For example you can display it in a text bubble with the following syntax:
+
+`{{My variable}}` where "My variable" is the name of your variable.
+
+## Inline variable formatting
+
+You can also decide to format your variable directly in the text bubble. For example if you want to display the variable "First name" in uppercase you can use the following syntax:
+
+`{{={{My variable}}.toUpperCase()=}}`
+
+When you insert `{{= ... =}}`, it means what's inside will be evaluated as JavaScript. So you can use any JavaScript inline function inside. The behavior is similar to the custom value in the Set variable block.
+
+If you would like to get the first item of a list:
+
+`{{={{My variable}}[0]=}}` or `{{={{My variable}}.at(0)=}}`
+
+Likewise for last item:
+
+`{{={{My variable}}.at(-1)=}}`
+
## Advanced concepts
Here is a quick video that showcases advanced concepts about variables:
diff --git a/apps/docs/docs/embed/html-javascript.md b/apps/docs/docs/embed/html-javascript.md
index da4e3e985b..2b16bace36 100644
--- a/apps/docs/docs/embed/html-javascript.md
+++ b/apps/docs/docs/embed/html-javascript.md
@@ -12,7 +12,7 @@ There, you can change the container dimensions. Here is a code example:
```html
diff --git a/apps/docs/docs/embed/react.md b/apps/docs/docs/embed/react.md
index a0d3853a7f..cfda9aebcf 100644
--- a/apps/docs/docs/embed/react.md
+++ b/apps/docs/docs/embed/react.md
@@ -7,7 +7,7 @@ sidebar_position: 5
## Install
```bash
-npm install @typebot.io/react
+npm install @typebot.io/js @typebot.io/react
```
## Standard
diff --git a/apps/docs/docs/embed/webflow.md b/apps/docs/docs/embed/webflow.md
index 0d15e12cc2..1e44e8f01d 100644
--- a/apps/docs/docs/embed/webflow.md
+++ b/apps/docs/docs/embed/webflow.md
@@ -22,7 +22,7 @@ It should look like:
```html
+
+
+