Install

npm install @@altbot/js @altbot/react

Standard

import { Standard } from '@altbot/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 '@altbot/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 '@altbot/react'

open()

import { close } from '@altbot/react'

close()

import { toggle } from '@altbot/react'

toggle()

Bubble

import { Bubble } from '@altbot/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 '@altbot/react'

Typebot.showPreviewMessage()

import { hidePreviewMessage } from '@altbot/react'

Typebot.hidePreviewMessage()

Open or close the chat window

You can use these commands:

import { open } from '@altbot/react'

open()

import { close } from '@altbot/react'

close()

import { toggle } from '@altbot/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 '@altbot/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 the variables will automatically be injected to the altbot. So you don't need to manually transfer query params to the bot embed configuration.