0dc276c18f
Closes #993 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a detailed explanation page for the "Remember user" setting in the app documentation. - Introduced persistence of chat state across sessions, with options for local or session storage. - Enhanced bot functionality to store and retrieve initial chat replies and manage bot open state with improved storage handling. - Added a new callback for chat state persistence to bot component props. - **Improvements** - Updated the general settings form to clarify the description of the "Remember user" feature. - Enhanced custom CSS handling and progress value persistence in bot components. - Added conditional transition disabling in various components for smoother user experiences. - Simplified the handling of `onTransitionEnd` across multiple bubble components. - **Refactor** - Renamed `inputIndex` to `chunkIndex` or `index` in various components for consistency. - Removed unused ESLint disable comments related to reactivity rules. - Adjusted import statements and cleaned up code across several files. - **Bug Fixes** - Fixed potential issues with undefined callbacks by introducing optional chaining in component props. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Install
npm install @typebot.io/js @typebot.io/react
Standard
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
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.
Open or Close a popup
You can use these commands:
import { open } from '@typebot.io/react'
open()
import { close } from '@typebot.io/react'
close()
import { toggle } from '@typebot.io/react'
toggle()
Bubble
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.
Open or close the preview message
You can use these commands:
import { showPreviewMessage } from '@typebot.io/react'
Typebot.showPreviewMessage()
import { hidePreviewMessage } from '@typebot.io/react'
Typebot.hidePreviewMessage()
Open or close the chat window
You can use these commands:
import { open } from '@typebot.io/react'
open()
import { close } from '@typebot.io/react'
close()
import { toggle } from '@typebot.io/react'
toggle()
Additional configuration
You can prefill the bot variable values in your embed code by adding the prefilledVariables option. Here is an example:
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.
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.