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

30
apps/docs/deploy/web/custom-domain.mdx Normal file
View File

@ -0,0 +1,30 @@
---
title: Add a custom domain
---
You can bind a custom domain to your typebot in the "Share" tab.
<Frame>
<img src="/images/custom-domain/add-domain.png" alt="Add my domain button" />
</Frame>
To connect a new domain, follow the instructions:
<Frame>
<img
src="/images/custom-domain/instructions.png"
alt="Add domain instructions"
/>
</Frame>
Once you've added the corresponding DNS record, click on the "Save" button. You might have to wait for a few minutes before the record is properly propagated.
## Troobleshooting
If your domain is not properly configured or verified, you will see this error icon next to your domain link:
<Frame>
<img src="/images/custom-domain/invalid-config.png" alt="Error icon" />
</Frame>
Make sure to click on it to see what is required to do to fix the issue.

14
apps/docs/deploy/web/iframe.mdx Normal file
View File

@ -0,0 +1,14 @@
---
title: Iframe
---
You can easily get your typebot iframe code by clicking on the "Iframe" button in the "Share" tab of your typebot.
<Frame>
<img
src="/images/embeddings/iframe/iframe-preview.png"
alt="Iframe preview"
/>
</Frame>
Here, you can set up its width and height. A good default is a `width` of `100%` and a `height` of `600px`.

193
apps/docs/deploy/web/libraries/html-javascript.mdx Normal file
View File

@ -0,0 +1,193 @@
---
title: HTML & Javascript
---
## Standard
You can get the standard HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
There, you can change the container dimensions. Here is a code example:
```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
Typebot.initStandard({
typebot: 'my-typebot',
})
</script>
<typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
```
This code is creating a container with a 100% width (will match parent width) and 600px height.
### Multiple bots
If you have different bots on the same page you will have to make them distinct with an additional `id` prop:
```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
Typebot.initStandard({
id: 'bot1'
typebot: 'my-typebot',
})
Typebot.initStandard({
id: 'bot2'
typebot: 'my-typebot-2',
})
</script>
<typebot-standard
id="bot1"
style="width: 100%; height: 600px; "
></typebot-standard>
...
<typebot-standard
id="bot2"
style="width: 100%; height: 600px; "
></typebot-standard>
```
## Popup
You can get the popup HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
Here is an example:
```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
Typebot.initPopup({
typebot: 'my-typebot',
apiHost: 'http://localhost:3001',
autoShowDelay: 3000,
})
</script>
```
This code will automatically trigger the popup window after 3 seconds.
## Bubble
You can get the bubble HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
Here is an example:
```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
Typebot.initBubble({
typebot: 'my-typebot',
previewMessage: {
message: 'I have a question for you!',
autoShowDelay: 5000,
avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
},
theme: {
button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
chatWindow: { backgroundColor: '#ffffff', maxWidth: '100%' },
},
})
</script>
```
This code will show the bubble and let a preview message appear after 5 seconds.
### Custom button position
You can move the button with some custom CSS on your website. For example, you can place the bubble button higher with the following CSS:
```css
typebot-bubble::part(button) {
  bottom: 60px;
}
typebot-bubble::part(bot) {
  bottom: 140px;
height: calc(100% - 140px)
}
```
If you have a preview message, you'll also have to manually position it:
```css
typebot-bubble::part(preview-message) {
  bottom: 140px;
}
```
## Commands
Here are the commands you can use to trigger your embedded typebot:
- `Typebot.open()`: Open popup or bubble
- `Typebot.close()`: Close popup or bubble
- `Typebot.toggle()`: Toggle the bubble or popup open/close state,
- `Typebot.showPreviewMessage()`: Show preview message from the bubble,
- `Typebot.hidePreviewMessage()`: Hide preview message from the bubble,
- `Typebot.setPrefilledVariables(...)`: Set prefilled variables.
Example:
```js
Typebot.setPrefilledVariables({
Name: 'Jhon',
Email: 'john@gmail.com',
})
```
For more information, check out [Additional configuration](#additional-configuration).
- `Typebot.setInputValue(...)`: Set the value in the currently displayed input.
You can bind these commands on a button element, for example:
```html
<button onclick="Typebot.open()">Contact us</button>
```
## Callbacks
If you need to trigger events on your parent website when the user interact with the bot, you can use the following callbacks:
```js
Typebot.initStandard({
typebot: 'my-typebot',
onNewInputBlock: (inputBlock) => {
console.log('New input block displayed', inputBlock.id)
},
onAnswer: (answer) => {
console.log('Answer received', answer.message, answer.blockId)
},
onInit: () => {
console.log('Bot initialized')
},
onEnd: () => {
console.log('Bot ended')
},
})
```
## Additional configuration
You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
```js
Typebot.initStandard({
typebot: 'my-typebot',
prefilledVariables: {
'Current URL': 'https://my-site/account',
'User name': 'John Doe',
},
})
```
It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).
Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.

15
apps/docs/deploy/web/libraries/next-js.mdx Normal file
View File

@ -0,0 +1,15 @@
---
title: Next.js
---
This lib is a convenient wrapper around the [Typebot React](./react) library. It makes sure the components are lazy loaded.
## Install
```bash
npm install @typebot.io/js @typebot.io/nextjs
```
## Usage
Use it like you would use the [Typebot React](./react) library.

88
apps/docs/deploy/web/libraries/react.mdx Normal file
View File

@ -0,0 +1,88 @@
---
title: React
---
## Install
```bash
npm install @typebot.io/js @typebot.io/react
```
## Standard
```tsx
import { Standard } from '@typebot.io/react'
const App = () => {
return (
<Standard
typebot="lead-generation-copy-3luzm6b"
style={{ width: '100%', height: '600px' }}
/>
)
}
```
This code is creating a container with a 100% width (will match parent width) and 600px height.
## Popup
```tsx
import { Popup } from '@typebot.io/react'
const App = () => {
return <Popup typebot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
}
```
This code will automatically trigger the popup window after 3 seconds.
## Bubble
```tsx
import { Bubble } from '@typebot.io/react'
const App = () => {
return (
<Bubble
typebot="lead-generation-copy-3luzm6b"
previewMessage={{
message: 'I have a question for you!',
autoShowDelay: 5000,
avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
}}
theme={{
button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
}}
/>
)
}
```
This code will show the bubble and let a preview message appear after 5 seconds.
## Additional configuration
You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
```tsx
import { Standard } from '@typebot.io/react'
const App = () => {
return (
<Standard
typebot="lead-generation-copy-3luzm6b"
style={{ width: '100%', height: '600px' }}
prefilledVariables={{
'Current URL': 'https://my-site/account',
'User name': 'John Doe',
}}
/>
)
}
```
It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).
Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.

33
apps/docs/deploy/web/overview.mdx Normal file
View File

@ -0,0 +1,33 @@
---
title: Overview
---
To get the appropriate instructions to deploy your typebot in your platform of choice, make sure to head over the `Share` tab of your bot and select the platform you want to deploy your typebot on.
You can choose to embed your typebot in 3 different ways.
## Standard
Embeds the typebot in a box with the size of your choice anywhere on your app. This is what is used on Typebot homepage:
<Frame>
<img src="/images/embeddings/standard.png" alt="Standard" />
</Frame>
You can also set the width to `100%` and the height to `100vh` to make it take the entire page dimensions
## Popup
Embeds the typebot in a Popup that overlays your website. It can be triggered after a delay or with a click of a button for example
<Frame>
<img src="/images/embeddings/popup.png" alt="Popup" />
</Frame>
## Bubble
Embeds the typebot as a "chat bubble" at the bottom right corner of your site. Can be triggered automatically or with a click. It can also come with a "proactive message".
<Frame>
<img src="/images/embeddings/bubble1.png" alt="Bubble 1" width="600px" />
</Frame>

7
apps/docs/deploy/web/script.mdx Normal file
View File

@ -0,0 +1,7 @@
---
title: Script embed snippet
---
The script embed option is useful only if you don't have access to the HTML tree of your application or if your website builder only allows you to inline script snippets.
Otherwise, it's preferable to follow [HTML & Javascript](./libraries/html-javascript) embed instructions because the script snippets are just scripts that will inject the code from the HTML & Javascript embed method.

47
apps/docs/deploy/web/webflow.mdx Normal file
View File

@ -0,0 +1,47 @@
---
title: Webflow
---
Head over to the Share tab of your bot and click on the Webflow button to get the embed instructions of your bot.
## Advanced guides
### Trigger a typebot command on a click of a button
1. Head over to the `Settings` tab of your button and add a dedicated `ID`
2. In your typebot `Embed` element, insert this code in the existing `<script>` tag:
```js
document.getElementById('BUTTON_ID').addEventListener('click', (event) => {
event.preventDefault()
Typebot.open()
})
```
You can add as many as you'd like if you need to open the bot on several button clicks
It should look like:
```html
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.2/dist/web.js'
Typebot.initPopup({
typebot: 'my-typebot',
})
document.getElementById('BUTTON_ID_1').addEventListener('click', (event) => {
event.preventDefault()
Typebot.open()
})
document.getElementById('BUTTON_ID_2').addEventListener('click', (event) => {
event.preventDefault()
Typebot.open()
})
</script>
```
Make sure to replace `BUTTON_ID_1` and `BUTTON_ID_2` with the ID you added on your button elements.
In this example we are opening the popup when the specified buttons are clicked but you could also use any of the [available commands](./libraries/html-javascript#commands).

76
apps/docs/deploy/web/wordpress.mdx Normal file
View File

@ -0,0 +1,76 @@
---
title: WordPress
---
Typebot has a native [WordPress plug-in](https://wordpress.org/plugins/typebot/) that helps you embed typebots in your WordPress site.
Of course, before using it, you need to create and publish your first typebot.
<Frame>
<img src="/images/embeddings/wordpress-preview.png" alt="WP plugin preview" />
</Frame>
The code snippet to paste is easily configurable in the Share tab of your bot after clicking on the "Wordpress" button.
## Excluded pages
The excluded pages input is a comma-separated list of pages where you don't want your typebot to appear.
Examples:
- `/app/*` will exclude all pages starting with `/app/`
- `/app` will only exclude the `/app` page
- `/app?param=1` will only exclude the `/app` page **and** with the `param` query parameter set to `1`
- `/app?param=*` will exclude the page at `/app` **and** with the `param` query parameter set to anything
- `/app/*?param=*` will exclude all pages starting with `/app/` **and** with the `param` query parameter set to anything
## Personalize user experience
You can leverage the [prefilled variables](../../editor/variables#prefilled-variables) and inject your user information directly into your typebot so that the experience is entirely customized to your user.
Here are the available variables from WordPress, make sure to create them in your typebot's variables dropdown:
<Frame style={{ maxWidth: '400px' }}>
<img
src="/images/embeddings/wp-variables.png"
alt="WP predefined variables"
/>
</Frame>
The only thing you need to do to enable this is:
- Use the [Wordpress Typebot plugin](https://wordpress.com/plugins/typebot)
- Have the variables declared in your Typebot with the exact syntaxes. For the email for example, make sure your variable is spelled `WP Email`. These won't work: `wp Email`, `WP email`.
## Your typebot isn't showing?
### You have litespeed with "Localise Resources" enabled
There is an a box where there is a list of URLs it localises, one of them was ‘https://cdn.jsdelivr.net’. This URL should be removed from it since it is used to import the embed library.
## You have litespeed with cache enabled
Make sure to insert `web.js` and `typebot` in the JS Excludes textbox and JS Deferred Excludes under Tuning Settings.
### You have a cache plugin
Plugins like WP Rocket prevent Typebot to work.
For WP Rocket:
1. Go to Settings > WP Rocket > Excluded Inline Javascript:
<Frame>
<img src="/images/embeddings/wp-rocket.png" alt="WP Rocket" />
</Frame>
2. Type "typebot"
3. Save
### You have plugin that adds `defer` attribute to external scripts
You need to add an exception for Typebot in the corresponding plugin config.
### Still not working
Contact me on the application using the typebot at the bottom right corner

24
apps/docs/deploy/whatsapp/create-meta-app.mdx Normal file
View File

@ -0,0 +1,24 @@
---
title: Create a WhatsApp Meta app
---
## 1. Create a Facebook Business account
1. Head over to https://business.facebook.com and log in
2. Create a new business account on the left side bar
<Info>
It is possible that Meta automatically restricts your newly created Business
account. In that case, make sure to verify your identity to proceed.
</Info>
## 2. Create a Meta app
1. Head over to https://developers.facebook.com/apps
2. Click on Create App
3. "What do you want your app to do?", select `Other`.
4. Select `Business` type
5. Give it any name and select your newly created Business Account
6. On the app page, look for `WhatsApp` product and enable it
You can then follow the instructions in the Share tab of your bot to connect your Meta app to Typebot.

75
apps/docs/deploy/whatsapp/overview.mdx Normal file
View File

@ -0,0 +1,75 @@
---
sidebarTitle: Overview
title: WhatsApp
---
WhatsApp integration is currently in beta. If you encounter any issue, please contact me directly using the Bubble in app.typebot.io.
## Preview
You can preview and test your bot by clicking on the Preview button in the editor and change the runtime to "WhatsApp".
<Frame>
<img
src="/images/whatsapp/preview-dropdown.png"
alt="WhatsApp preview dropdown"
/>
</Frame>
## Limitations
WhatsApp environment have some limitations that you need to keep in mind when building the bot:
- GIF and SVG image files are not supported. They won't be displayed.
- Buttons content can't be longer than 20 characters. If the content is longer, it will be truncated.
- Incompatible blocks, if present, they will be skipped:
- Payment input block
- Chatwoot block
- Script block
- Google Analytics block
- Meta Pixel blocks
## Contact information
You can automatically assign contact name and phone number to a variable in your bot using a Set variable block with the dedicated system values:
<Frame>
<img
src="/images/whatsapp/contact-var.png"
alt="WhatsApp contact system variables"
/>
</Frame>
## Deploy on your phone number
Head over to the Share tab of your bot and click on the WhatsApp button to get the integration instructions of your bot.
### Configuration
You can customize how your bot behaves on WhatsApp in the `Configure integration` section
<Frame>
<img
src="/images/whatsapp/configure-integration.png"
alt="WhatsApp configure integration"
/>
</Frame>
**Session expiration timeout**: A number from 0 to 48 which is the number of hours after which the session will expire. If the user doesn't interact with the bot for more than the timeout, the session will expire and if user sends a new message, it will start a new chat. The default is 4 hours.
**Start bot condition**: A condition that will be evaluated when a user starts a conversation with your bot. If the condition is not met, the bot will not be triggered.
## FAQ
### How many WhatsApp numbers can I use?
You can integrate as many numbers as you'd like. Keep in mind that Typebot does not provide those numbers. We work as a "Bring your own Meta application" and we give you clear instructions on [how to set up your Meta app](./create-meta-app).
### Can I link multiple bots to the same WhatsApp number?
Yes, you can. You will have to add a "Start bot condition" to each of your bots to make sure that the right bot is triggered when a user starts a conversation.
### Does the integration with WhatsApp requires any paid API?
You integrate your typebots with your own WhatsApp Business Platform which is the official service from Meta. At the moment, the first 1,000 Service conversations each month are free. For more information, refer to [their documentation](https://developers.facebook.com/docs/whatsapp/cloud-api/get-started#pricing---payment-methods)