@orbitellabs/chatbot-sdk

A lightweight, embeddable AI chatbot widget for any website or JavaScript framework — no build tools required.

✨ Features

• 🚀 Plug-and-play — no framework or bundler required
• 🌍 Runs anywhere — static sites, portals, SaaS apps
• 🎨 Clean UI and smooth animations
• ⚡ Shadow DOM isolation — no style conflicts with your existing CSS
• 🧩 Framework-agnostic — works with React, Vue, Angular, and more
• 🔌 Multiple instances supported
• ⚙️ Configurable via HTML attributes
• 🔄 Programmatic API to reset or remove the widget

📦 Installation

Via npm

npm install @orbitellabs/chatbot-sdk

Via CDN (no install needed)

<script src="https://cdn.jsdelivr.net/npm/@orbitellabs/chatbot-sdk/dist/index.umd.js"></script>

🚀 Quick Start

Using npm (ES Module)

Import once in your entry file:

import '@orbitellabs/chatbot-sdk';

Then add the widget anywhere in your HTML or component template:

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_API_KEY"
  bot-name="Support Bot"
  bot-avatar="/avatar.png"
  welcome-msg="Hello! How can I help you?"
  primary-color="#35005C"
  position="bottom-right"
></orbitel-chatbot>

Using CDN

Add before </body> and drop the element anywhere on your page:

<script src="https://cdn.jsdelivr.net/npm/@orbitellabs/chatbot-sdk/dist/index.umd.js"></script>

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_API_KEY"
  bot-name="Support Bot"
  bot-avatar="/avatar.png"
  welcome-msg="Hello! How can I help you?"
  primary-color="#35005C"
  position="bottom-right"
></orbitel-chatbot>

🎛 Attributes

| Attribute | Required | Default | Description | |-----------------|----------|-------------------|--------------------------------------------------| | bot-id | ✅ Yes | — | Unique chatbot identifier | | access-key | ✅ Yes | — | Authentication key | | bot-name | No | Orbitel Chatbot | Display name shown in the chat header | | bot-avatar | No | /logo.png | Avatar image URL | | welcome-msg | No | — | Initial greeting message shown to users | | primary-color | No | #35005C | Widget theme color (hex) | | position | No | bottom-right | Bubble position: bottom-right or bottom-left |

🔥 Framework Usage

Plain HTML / Static Site

<script src="https://cdn.jsdelivr.net/npm/@orbitellabs/chatbot-sdk/dist/index.umd.js"></script>

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_API_KEY"
  bot-name="Support Bot"
  bot-avatar="/avatar.png"
  welcome-msg="Hello! How can I help you?"
  primary-color="#35005C"
  position="bottom-right"
></orbitel-chatbot>

React

Install:

npm install @orbitellabs/chatbot-sdk

Import once in your entry file (e.g. main.jsx or index.js):

import '@orbitellabs/chatbot-sdk';

Use React.createElement in your component:

import React from 'react';
import '@orbitellabs/chatbot-sdk';

function App() {
  return (
    <div>
      {React.createElement('orbitel-chatbot', {
        'bot-id': 'YOUR_BOT_ID',
        'access-key': 'YOUR_API_KEY',
        'bot-name': 'Support Bot',
        'bot-avatar': '/avatar.png',
        'welcome-msg': 'Hello! How can I help you?',
        'primary-color': '#35005C',
        position: 'bottom-right',
      })}
    </div>
  );
}

export default App;

Why React.createElement instead of JSX?

JSX silently drops hyphenated attribute names like bot-id, access-key, and welcome-msg on custom elements. React.createElement sets them directly on the underlying DOM node, exactly as the web component expects.

Vue

Install:

npm install @orbitellabs/chatbot-sdk

Import in main.js:

import '@orbitellabs/chatbot-sdk';

Use in any component template:

<template>
  <orbitel-chatbot
    bot-id="YOUR_BOT_ID"
    access-key="YOUR_API_KEY"
    bot-name="Support Bot"
    bot-avatar="/avatar.png"
    welcome-msg="Hello! How can I help you?"
    primary-color="#35005C"
    position="bottom-right"
  ></orbitel-chatbot>
</template>

Angular

Install:

npm install @orbitellabs/chatbot-sdk

Import in main.ts or app.module.ts:

import '@orbitellabs/chatbot-sdk';

Allow custom elements in your module:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Use in any component template:

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_API_KEY"
  bot-name="Support Bot"
  bot-avatar="/avatar.png"
  welcome-msg="Hello! How can I help you?"
  primary-color="#35005C"
  position="bottom-right"
></orbitel-chatbot>

WordPress / Webflow / Wix / Elementor

Paste in your site's footer or custom HTML embed block:

<script src="https://cdn.jsdelivr.net/npm/@orbitellabs/chatbot-sdk/dist/index.umd.js"></script>

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_API_KEY"
  bot-name="Support Bot"
  bot-avatar="/avatar.png"
  welcome-msg="Hello! How can I help you?"
  primary-color="#35005C"
  position="bottom-right"
></orbitel-chatbot>

PHP / Laravel / Blade

<script src="https://cdn.jsdelivr.net/npm/@orbitellabs/chatbot-sdk/dist/index.umd.js"></script>

<orbitel-chatbot
  bot-id="{{ env('BOT_ID') }}"
  access-key="{{ env('API_KEY') }}"
  bot-name="Support Bot"
  bot-avatar="/avatar.png"
  welcome-msg="Hello! How can I help you?"
  primary-color="#35005C"
  position="bottom-right"
></orbitel-chatbot>

🧩 Programmatic API

After the script loads, a global helper is available at window.OrbitelChatbot.

Reset the widget

Unmounts and remounts all chatbot instances on the page, clearing chat state:

window.OrbitelChatbot.reset();

Destroy all widgets

Removes all <orbitel-chatbot> elements from the DOM entirely:

window.OrbitelChatbot.destroyAll();

📌 Notes & Best Practices

• Place the CDN <script> near the bottom of <body> for best load performance
• Multiple widget instances are supported on the same page
• Shadow DOM ensures the widget's styles never conflict with your own CSS
• Works seamlessly inside single-page apps (React, Vue, Angular) without extra configuration
• In React, always use React.createElement — JSX silently drops hyphenated custom element attributes
• Store bot-id and access-key in environment variables; never commit credentials to source control

📄 License

MIT License — free for commercial and personal use.

Made with ❤️ by Orbitel.ai