Embedding - Add Chatbot to Your Website

Embed your BotByte chatbot using the JS SDK or iframe.

Embedding Options

BotByte offers three ways to add a chatbot to your website:

Method	Recommended	Description
npm Package	Yes	`npm install botbyte-ai` — TypeScript SDK with React component, events, tree-shaking
JavaScript SDK (CDN)	Yes	Single script tag, no build step required
Iframe Widget	-	Traditional embed with button + chat window iframes

npm Package (Recommended)

The botbyte-ai npm package is the best option for React, Next.js, Vue, and any project with a bundler. Full TypeScript types, ESM/CJS, React component, and event system.

Install

npm install botbyte-ai

Usage — Vanilla JS / TypeScript

import { BotByte } from "botbyte-ai";
 
BotByte.init({ chatbotId: "YOUR_CHATBOT_ID" });
 
// Programmatic control
BotByte.open();
BotByte.close();
BotByte.sendMessage("Hello!");
 
// Events
BotByte.on("message", (msg) => console.log(msg));

Usage — React

import { BotByteChat } from "botbyte-ai/react";
 
export default function App() {
  return (
    <BotByteChat
      chatbotId="YOUR_CHATBOT_ID"
      onMessage={(msg) => console.log(msg)}
    />
  );
}

For the full API reference, see the JavaScript SDK documentation.

JavaScript SDK (Recommended)

The JS SDK renders the chatbot natively in your page using Shadow DOM for style isolation. No iframes, no sizing issues, and a smoother experience.

Quick Install

Add this line before the closing body tag in your HTML:

<script src="https://botbyte.in/sdk/botbyte-sdk.js" data-chatbot-id="YOUR_CHATBOT_ID"></script>

That is it. The SDK will automatically fetch your chatbot's configuration (colors, title, welcome message) and render a floating chat button.

For advanced usage, see the full JavaScript SDK documentation.

The iframe approach uses two iframes: a button iframe and a chat window iframe, communicating via postMessage.

<script>
  window.addEventListener("message", function(t) {
    var e = document.getElementById("openassistantgpt-chatbot-iframe");
    var s = document.getElementById("openassistantgpt-chatbot-button-iframe");
    if ("openChat" === t.data && e && s) {
      e.contentWindow.postMessage("openChat", "*");
      s.contentWindow.postMessage("openChat", "*");
      e.style.pointerEvents = "auto";
      e.style.display = "block";
    }
    if ("closeChat" === t.data && e && s) {
      e.style.display = "none";
      e.style.pointerEvents = "none";
      e.contentWindow.postMessage("closeChat", "*");
      s.contentWindow.postMessage("closeChat", "*");
    }
  });
</script>
 
<iframe src="https://botbyte.in/embed/YOUR_CHATBOT_ID/button?chatbox=false"
  style="position:fixed;right:0;bottom:0;width:56px;height:56px;border-radius:50%;z-index:50;"
  id="openassistantgpt-chatbot-button-iframe"></iframe>
 
<iframe src="https://botbyte.in/embed/YOUR_CHATBOT_ID/window?chatbox=false&withExitX=true"
  style="display:none;position:fixed;right:0;bottom:5rem;width:30rem;height:65vh;z-index:50;"
  allowfullscreen id="openassistantgpt-chatbot-iframe"></iframe>

Window Mode (Inline)

For embedding the chat directly in a page section:

<iframe
  src="https://botbyte.in/embed/YOUR_CHATBOT_ID/window?chatbox=false"
  style="height:80vh;width:480px;border:2px solid #e2e8f0;border-radius:0.375rem;"
  allowfullscreen>
</iframe>

User Context

Pass your logged-in user's information so the chatbot can personalize responses.

With JS SDK

<script src="https://botbyte.in/sdk/botbyte-sdk.js"></script>
<script>
  BotByte.init({
    chatbotId: "YOUR_CHATBOT_ID",
    userContext: {
      name: "John Doe",
      email: "john@example.com",
      plan: "Pro",
      userId: "usr_12345"
    }
  });
</script>

With Iframe

Append a userContext URL parameter with JSON-encoded data:

<script>
  var ctx = encodeURIComponent(JSON.stringify({
    name: "John Doe",
    email: "john@example.com"
  }));
  document.getElementById("openassistantgpt-chatbot-iframe")
    .src = "https://botbyte.in/embed/YOUR_ID/window?chatbox=false&withExitX=true&userContext=" + ctx;
</script>

Supported Fields

Any key-value pairs work. Common fields:

Field	Description
name	User display name
email	Email address
plan	Subscription plan
userId	Internal user ID
role	admin, member, etc.
company	Organization name

Client-Side Prompt

Override part of the chatbot's prompt dynamically from the embed URL:

<iframe src="https://botbyte.in/embed/YOUR_ID/window?chatbox=false&clientSidePrompt=You are helping user John with the Pro plan."
  style="width:30rem;height:65vh;" allowfullscreen></iframe>

Note: Client-side prompts should not be used for authentication. Anyone can change the prompt parameter.

Tools & Functions JavaScript SDK