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

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.