HTML & Javascript – Indite Docs

Seamlessly integrate your bot into any website using our HTML and JavaScript embed code. Access the embed code by navigating to the Share tab in your bot's dashboard and selecting the HTML & Javascript option.

Standard

Embed your bot as a standard component with customizable dimensions to suit your website's layout. Below is an example of a responsive container with full width and a fixed height of 600px:

<script type="module">
  import Bot from "https://cdn.jsdelivr.net/npm/@indite.io/js@0/dist/web.js";
 
  Bot.initStandard({
    bot: "my-bot",
  });
</script>
 
<bot-standard style="width: 100%; height: 600px;"></bot-standard>

Ensure the bot parameter matches your bot's unique ID, available in the Share tab.

Explore all standard embed configuration options

type BotProps = {
  id?: string;
  bot: string | any;
  isPreview?: boolean;
  resultId?: string;
  prefilledVariables?: Record<string, unknown>;
  apiHost?: string;
  wsHost?: string;
  font?: string | { type: "Google"; family?: string } | { type: "Custom"; url?: string; family?: string; css?: string };
  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";
    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;
};

Multiple Bots

To display multiple bots on a single page, assign a unique id to each bot instance:

<script type="module">
  import Bot from "https://cdn.jsdelivr.net/npm/@indite.io/js@0/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>

⚠️

Each bot must have a unique id to avoid conflicts on the same page.

Popup

Embed your bot as a popup window that can appear automatically or be triggered by user interaction:

<script type="module">
  import Bot from "https://cdn.jsdelivr.net/npm/@indite.io/js@0/dist/web.js";
 
  Bot.initPopup({
    bot: "my-bot",
    autoShowDelay: 3000, // Displays popup after 3 seconds
  });
</script>

Explore all popup configuration options

type PopupProps = {
  id?: string;
  bot: string | any;
  isPreview?: boolean;
  resultId?: string;
  prefilledVariables?: Record<string, unknown>;
  apiHost?: string;
  wsHost?: string;
  font?: string | { type: "Google"; family?: string } | { type: "Custom"; url?: string; family?: string; css?: string };
  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";
    width?: string;
    backgroundColor?: string;
    zIndex?: number;
  };
  previewMessage?: { avatarUrl?: string; message: string; autoShowDelay?: number };
  autoShowDelay?: number;
  defaultOpen?: boolean;
  isOpen?: boolean;
  onOpen?: () => void;
  onClose?: () => void;
  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;
};

Bubble

Add your bot as a floating bubble for a non-intrusive user experience. Customize its appearance and behavior as shown below:

<script type="module">
  import Bot from "https://cdn.jsdelivr.net/npm/@indite.io/js@0/dist/web.js";
 
  Bot.initBubble({
    bot: "my-bot",
    previewMessage: {
      message: "Have a question? I'm here to help!",
      autoShowDelay: 5000,
      avatarUrl: "https://avatars.githubusercontent.com/u/16015833?v=4",
    },
    theme: {
      button: { backgroundColor: "#0042DA", iconColor: "#FFFFFF" },
      previewMessage: { backgroundColor: "#FFFFFF", textColor: "#000000" },
      chatWindow: { backgroundColor: "#FFFFFF", maxWidth: "100%" },
    },
  });
</script>

Explore all bubble configuration options

type BubbleProps = {
  id?: string;
  bot: string | any;
  isPreview?: boolean;
  resultId?: string;
  prefilledVariables?: Record<string, unknown>;
  apiHost?: string;
  wsHost?: string;
  font?: string | { type: "Google"; family?: string } | { type: "Custom"; url?: string; family?: string; css?: string };
  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;
};

Customizing Bubble Position

Fine-tune the bubble's position using CSS custom properties:

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

Controlling Preview Message Visibility

Display the preview message only until the user interacts with or dismisses it:

Bot.initBubble({
  bot: "my-bot",
  previewMessage: localStorage.getItem("hideBotPreviewMessage")
    ? undefined
    : { message: "Have a question? I'm here to help!" },
  onPreviewMessageDismissed: () => {
    localStorage.setItem("hideBotPreviewMessage", "true");
  },
  onInit: () => {
    localStorage.setItem("hideBotPreviewMessage", "false");
  },
});

Bot Commands

Control your bot programmatically with the following commands:

Bot.open(): Opens the popup or bubble.
Bot.close(): Closes the popup or bubble.
Bot.toggle(): Toggles the open/closed state.
Bot.showPreviewMessage(): Displays the preview message.
Bot.hidePreviewMessage(): Hides the preview message.

Bot.setPrefilledVariables({...}): Sets prefilled variables, e.g.:

Bot.setPrefilledVariables({
  Name: "John",
  Email: "john@gmail.com",
});

Bot.setInputValue(...): Sets the value of the current input field.
Bot.reload(): Reloads the bot.

Bind commands to UI elements for user interaction:

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

To target a specific bot, pass its id, e.g., Bot.open({ id: 'my-bubble' }).

Event Callbacks

Trigger custom actions based on user interactions with the bot:

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 session ended");
  },
});

Prefilling Variables

Prefill bot variables to personalize the user experience:

Bot.initStandard({
  bot: "my-bot",
  prefilledVariables: {
    "Current URL": "https://my-site/account",
    "User Name": "John Doe",
  },
});

Variables can also be passed via URL query parameters. Learn more about variables in the Variables Guide.

API Iframe