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:
<script type="module"> import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0/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.
See all possible settings
type BotProps = { id ?: string ; typebot : string | any ; isPreview ?: boolean ; resultId ?: string ; prefilledVariables ?: Record < string , unknown >; apiHost ?: string ; wsHost ?: string ; font ?: | string | { type : "Google" ; family ?: string | undefined ; } | { type : "Custom" ; url ?: string | undefined ; family ?: string | undefined ; css ?: string | undefined ; }; progressBarRef ?: HTMLDivElement ; startFrom ?: | { type : "group" ; groupId : string ; } | { type : "event" ; eventId : string ; }; sessionId ?: string ; theme ?: { chatWindow ?: { backgroundColor ?: string ; maxWidth ?: string ; maxHeight ?: string ; }; button ?: { size ?: "medium" | "large" | ` ${ number } px` ; backgroundColor ?: string ; iconColor ?: string ; customIconSrc ?: string ; customCloseIconSrc ?: string ; }; previewMessage ?: { backgroundColor ?: string ; textColor ?: string ; closeButtonBackgroundColor ?: string ; closeButtonIconColor ?: string ; }; position ?: "fixed" | "static" ; // Defaults to "fixed" placement ?: "left" | "right" ; // Defaults to "right" }; previewMessage ?: { avatarUrl ?: string ; message : string ; autoShowDelay ?: number ; }; autoShowDelay ?: number ; onNewInputBlock ?: ( inputBlock : any ) => void ; onAnswer ?: ( answer : { message : string ; blockId : string }) => void ; onInit ?: () => void ; onEnd ?: () => void ; onNewLogs ?: ( logs : { status : string ; description : string ; details ?: unknown ; }[], ) => void ; onChatStatePersisted ?: ( isEnabled : boolean ) => void ; onScriptExecutionSuccess ?: ( message : string ) => void ; }; Multiple bots If you have different bots on the same page you will have to make them distinct with an additional id prop:
<script type="module"> import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0/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> 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:
<script type="module"> import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0/dist/web.js' Typebot.initPopup({ typebot: 'my-typebot', autoShowDelay: 3000, }) </script> This code will automatically trigger the popup window after 3 seconds.
See all possible settings
type PopupProps = { id ?: string ; typebot : string | any ; isPreview ?: boolean ; resultId ?: string ; prefilledVariables ?: Record < string , unknown >; apiHost ?: string ; wsHost ?: string ; font ?: | string | { type : "Google" ; family ?: string | undefined ; } | { type : "Custom" ; url ?: string | undefined ; family ?: string | undefined ; css ?: string | undefined ; }; progressBarRef ?: HTMLDivElement ; startFrom ?: | { type : "group" ; groupId : string ; } | { type : "event" ; eventId : string ; }; sessionId ?: string ; theme ?: { chatWindow ?: { backgroundColor ?: string ; maxWidth ?: string ; maxHeight ?: string ; }; button ?: { size ?: "medium" | "large" | ` ${ number } px` ; backgroundColor ?: string ; iconColor ?: string ; customIconSrc ?: string ; customCloseIconSrc ?: string ; }; previewMessage ?: { backgroundColor ?: string ; textColor ?: string ; closeButtonBackgroundColor ?: string ; closeButtonIconColor ?: string ; }; placement ?: "left" | "right" ; }; previewMessage ?: { avatarUrl ?: string ; message : string ; autoShowDelay ?: number ; }; autoShowDelay ?: number ; onNewInputBlock ?: ( inputBlock : any ) => void ; onAnswer ?: ( answer : { message : string ; blockId : string }) => void ; onInit ?: () => void ; onEnd ?: () => void ; onNewLogs ?: ( logs : { status : string ; description : string ; details ?: unknown ; }[], ) => void ; onChatStatePersisted ?: ( isEnabled : boolean ) => void ; onScriptExecutionSuccess ?: ( message : string ) => void ; autoShowDelay ?: number ; theme ?: { width ?: string ; backgroundColor ?: string ; zIndex ?: number ; }; defaultOpen ?: boolean ; isOpen ?: boolean ; onOpen ?: () => void ; onClose ?: () => void ; }; 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:
<script type="module"> import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0/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', }, // Defaults to undefined 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.
See all possible settings
type BubbleProps = { id ?: string ; typebot : string | any ; isPreview ?: boolean ; resultId ?: string ; prefilledVariables ?: Record < string , unknown >; apiHost ?: string ; wsHost ?: string ; font ?: | string | { type : "Google" ; family ?: string | undefined ; } | { type : "Custom" ; url ?: string | undefined ; family ?: string | undefined ; css ?: string | undefined ; }; progressBarRef ?: HTMLDivElement ; startFrom ?: | { type : "group" ; groupId : string ; } | { type : "event" ; eventId : string ; }; sessionId ?: string ; theme ?: { chatWindow ?: { backgroundColor ?: string ; maxWidth ?: string ; maxHeight ?: string ; }; button ?: { isHidden ?: boolean ; size ?: "medium" | "large" | ` ${ number } px` ; backgroundColor ?: string ; iconColor ?: string ; customIconSrc ?: string ; customCloseIconSrc ?: string ; }; previewMessage ?: { backgroundColor ?: string ; textColor ?: string ; closeButtonBackgroundColor ?: string ; closeButtonIconColor ?: string ; }; placement ?: "left" | "right" ; }; previewMessage ?: { avatarUrl ?: string ; message : string ; autoShowDelay ?: number ; }; autoShowDelay ?: number ; isOpen ?: boolean ; onNewInputBlock ?: ( inputBlock : any ) => void ; onAnswer ?: ( answer : { message : string ; blockId : string }) => void ; onInit ?: () => void ; onEnd ?: () => void ; onNewLogs ?: ( logs : { status : string ; description : string ; details ?: unknown ; }[], ) => void ; onChatStatePersisted ?: ( isEnabled : boolean ) => void ; onScriptExecutionSuccess ?: ( message : string ) => void ; onOpen ?: () => void ; onClose ?: () => void ; onPreviewMessageClick ?: () => void ; onPreviewMessageDismissed ?: () => void ; }; 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:
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:
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:
For more information, check out Additional configuration .
Typebot.setInputValue(...): Set the value in the currently displayed input.
Typebot.sendCommand(...): Send a command to the bot.
Typebot.reload(): Reload the bot.
You can bind these commands on a button element, for example:
<button onclick="Typebot.open()">Contact us</button> For each command you can pass an optional id prop to target a specific typebot. I.e. Typebot.open({ id: 'my-bubble' })
Callbacks If you need to trigger events on your parent website when the user interact with the bot, you can use the following callbacks:
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:
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 .
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.
