Standard You can get the standard HTML and Javascript code by clicking on the “HTML & Javascript” button in the “Share” tab of your zazubot.
There, you can change the container dimensions. Here is a code example:
< script type = "module" > import zazubot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js" ; zazubot . 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 zazubot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js' zazubot . initStandard ({ id: 'bot1' typebot : 'my-typebot' , }) zazubot . 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 zazubot.
Here is an example:
< script type = "module" > import zazubot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js" ; zazubot . 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 zazubot.
Here is an example:
< script type = "module" > import zazubot from "https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js" ; zazubot . 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 ?: { 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 ; 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 : 60 px ; } typebot-bubble ::part(bot) { bottom : 140 px ; height : calc ( 100 % - 140 px ) } If you have a preview message, you’ll also have to manually position it:
typebot-bubble ::part( preview-message ) { bottom : 140 px ; } Commands Here are the commands you can use to trigger your embedded typebot:
zazubot.open(): Open popup or bubble
zazubot.close(): Close popup or bubble
zazubot.toggle(): Toggle the bubble or popup open/close state,
zazubot.showPreviewMessage(): Show preview message from the bubble,
zazubot.hidePreviewMessage(): Hide preview message from the bubble,
zazubot.setPrefilledVariables(...): Set prefilled variables.
Example:
zazubot . setPrefilledVariables ({ Name: "Jhon" , Email: "john@gmail.com" , }); For more information, check out Additional configuration .
zazubot.setInputValue(...): Set the value in the currently displayed input.
zazubot.sendCommand(...): Send a command to the bot.
You can bind these commands on a button element, for example:
< button onclick = " zazubot . open ()" > Contact us </ button > For each command you can pass an optional id prop to target a specific zazubot. I.e. zazubot.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:
zazubot . 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:
zazubot . 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://zazubot.com?User%20name=John%20Doe ), the variables will automatically be injected to the zazubot. So you don’t need to manually transfer query params to the bot embed configuration.
