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 Evallo from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js' Evallo . 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 Evallo from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js' Evallo . initStandard ({ id: 'bot1' typebot : 'my-typebot' , }) Evallo . 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 Evallo from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js' Evallo . 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 Evallo from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js' Evallo . 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(evallo) { 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:
Evallo.open(): Open popup or bubble
Evallo.close(): Close popup or bubble
Evallo.toggle(): Toggle the bubble or popup open/close state,
Evallo.showPreviewMessage(): Show preview message from the bubble,
Evallo.hidePreviewMessage(): Hide preview message from the bubble,
Evallo.setPrefilledVariables(...): Set prefilled variables.
Example:Evallo . setPrefilledVariables ({ Name: 'Jhon' , Email: 'john@gmail.com' , })
For more information, check out Additional configuration .
Evallo.setInputValue(...): Set the value in the currently displayed input.
Evallo.sendCommand(...): Send a command to the evallo.
You can bind these commands on a button element, for example:
< button onclick = " Evallo . open ()" > Contact us </ button >
For each command you can pass an optional id prop to target a specific typebot. I.e. Evallo.open({ id: 'my-bubble' })
Callbacks If you need to trigger events on your parent website when the user interact with the evallo, you can use the following callbacks:
Evallo . 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 ( 'evallo initialized' ) }, onEnd : () => { console . log ( 'evallo ended' ) }, })
Additional configuration You can prefill the evallo variable values in your embed code by adding the prefilledVariables option. Here is an example:
Evallo . 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 evallo embed configuration. 