HTML & Javascript

Standard

You can get the standard HTML and Javascript code by clicking on the “HTML & Javascript” button in the “Share” tab of your bot. There, you can change the container dimensions. Here is a code example:

<script type="module">
  import Bot from 'https://cdn.jsdelivr.net/npm/@sendbot/[email protected]/dist/web.js'

  Bot.initStandard({
    bot: 'my-bot',
  })
</script>

<bot-standard style="width: 100%; height: 600px; "></bot-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;
  bot: string | any;
  isPreview?: boolean;
  resultId?: string;
  prefilledVariables?: Record<string, unknown>;
  apiHost?: 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

<script type="module">
  import Bot from 'https://cdn.jsdelivr.net/npm/@sendbot/[email protected]/dist/web.js'

  Bot.initStandard({
    id: 'bot1',
    bot: 'my-bot',
  })

  Bot.initStandard({
    id: 'bot2',
    bot: 'my-bot-2',
  })
</script>
<bot-standard
  id="bot1"
  style="width: 100%; height: 600px; "
></bot-standard>
...
<bot-standard
  id="bot2"
  style="width: 100%; height: 600px; "
></bot-standard>

You can get the popup HTML and Javascript code by clicking on the “HTML & Javascript” button in the “Share” tab of your bot. Here is an example:

<script type="module">
  import Bot from 'https://cdn.jsdelivr.net/npm/@sendbot/[email protected]/dist/web.js'

  Bot.initPopup({
    bot: 'my-bot',
    autoShowDelay: 3000,
  })
</script>

This code will automatically trigger the popup window after 3 seconds.

See all possible settings

type PopupProps = {
  id?: string;
  bot: string | any;
  isPreview?: boolean;
  resultId?: string;
  prefilledVariables?: Record<string, unknown>;
  apiHost?: 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 bot. Here is an example:

<script type="module">
  import Bot from 'https://cdn.jsdelivr.net/npm/@sendbot/[email protected]/dist/web.js'

  Bot.initBubble({
    bot: 'my-bot',
    previewMessage: {
      message: 'I have a question for you!',
      autoShowDelay: 5000,
      avatarUrl: 'https://lh3.googleusercontent.com/a/ACg8ocJsLbF4vpI27xEeoijDqRWLno8XAyVsbJTssXaTUIzMjSChP_k',
    }, // 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;
  bot: string | any;
  isPreview?: boolean;
  resultId?: string;
  prefilledVariables?: Record<string, unknown>;
  apiHost?: 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;
};

Custom button position

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:

bot-bubble::part(button) {
  bottom: 60px;
}

bot-bubble::part(bot) {
  bottom: 140px;
  height: calc(100% - 140px)
}

If you have a preview message, you’ll also have to manually position it:

bot-bubble::part(preview-message) {
  bottom: 140px;
}

Commands

Here are the commands you can use to trigger your embedded bot:

Bot.open(): Open popup or bubble
Bot.close(): Close popup or bubble
Bot.toggle(): Toggle the bubble or popup open/close state,
Bot.showPreviewMessage(): Show preview message from the bubble,
Bot.hidePreviewMessage(): Hide preview message from the bubble,
Bot.setPrefilledVariables(...): Set prefilled variables. Example:
Bot.setPrefilledVariables({ Name: 'Jhon', Email: '[email protected]', })
For more information, check out Additional configuration.
Bot.setInputValue(...): Set the value in the currently displayed input.
Bot.sendCommand(...): Send a command to the bot.

You can bind these commands on a button element, for example:

<button onclick="Bot.open()">Contact us</button>

For each command you can pass an optional id prop to target a specific bot. I.e. Bot.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:

Bot.initStandard({
  bot: 'my-bot',
  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:

Bot.initStandard({
  bot: 'my-bot',
  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://sendbot.co?User%20name=John%20Doe), the variables will automatically be injected to the bot. So you don’t need to manually transfer query params to the bot embed configuration.

Get Started

Flow

Theme

Settings

Deploy

Results

User

Workspace

Guides

Misc

API Platform

Access & Identity

Workspace Management

Bot Engineering

Chat API

Analytics & Data

Billing & Usage

AI & Automation

Integrations & Channels

Infrastructure & Assets

Standard

Multiple bots

Bubble

Custom button position

Commands

Callbacks

Additional configuration

​Standard

​Multiple bots

​Popup

​Bubble

​Custom button position

​Commands

​Callbacks

​Additional configuration

Standard

Multiple bots

Popup

Bubble

Custom button position

Commands

Callbacks

Additional configuration