@orbitellabs/chatbot-sdk

v2.0.5

Published

a month ago

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

0High
0Medium
0Low

rahulgupta009

@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

React — Orbitel example

Install the package, then import it once in your application's entry file (for example, main.jsx or index.jsx):

npm install @orbitellabs/chatbot-sdk

import '@orbitellabs/chatbot-sdk';

Use React.createElement for the web component. This is the complete React example using the Orbitel configuration:

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

export default function App() {
  return (
    <>
      {React.createElement('orbitel-chatbot', {
        'bot-id': '019abf21-29d4-723a-b17e-88fb39a86aba',
        'access-key': 'xyz',
        'welcome-msg': 'Hello, This is Pooja from Orbitel. How can I help you?',
        'bot-name': 'Chat with us',
        position: 'bottom-right',
        'bot-avatar': '/orbitel.png',
        'primary-color': '#35005C',
        'user-online-message': 'It seems you need expert assistance. Please connect with our support team for a quick resolution. <whatsapp: https://api.whatsapp.com/send/?phone=919019910043&text=Hi&type=phone_number&app_absent=0><email: [email protected]><web: Help:https://help.Orbitelsolutions.com/><mobile_number: 1800 309 8859>',
        'user-online-message-after': 10 * 1000,
      })}
    </>
  );
}

React — recommended configuration-object API

For new React integrations, the config object is easier to maintain because it uses normal camelCase JavaScript names. This is the same Orbitel widget using the recommended API:

import React from 'react';
import '@orbitellabs/chatbot-sdk';
import type { OrbitelChatbotOptions } from '@orbitellabs/chatbot-sdk';

const OrbitelChatConfig: OrbitelChatbotOptions = {
  botId: '019abf21-29d4-723a-b17e-88fb39a86aba',
  accessKey: 'xyz',
  botName: 'Chat with us',
  botAvatar: '/orbitel.png',
  welcomeMessage: 'Hello, This is Pooja from Orbitel. How can I help you?',
  primaryColor: '#35005C',
  position: 'bottom-right',
  userOnlineMessage: 'It seems you need expert assistance. <whatsapp: https://api.whatsapp.com/send/?phone=919019910043&text=Hi&type=phone_number&app_absent=0><email: [email protected]><web: Help:https://help.Orbitelsolutions.com/><mobile_number: 1800 309 8859>',
  userOnlineMessageAfter: 10_000,
  launcher: 'default',
  launcherLabel: 'Chat with us',
  inputPlaceholder: 'Type your message...',
  statusText: 'Pooja is online',
  closeOnBackdrop: true,
  closeOnEscape: true,
};

export default function App() {
  return React.createElement('orbitel-chatbot', { config: OrbitelChatConfig });
}

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>

CDN — static HTML, WordPress, Webflow, Wix, Shopify, or any website

Paste this in the page's custom HTML area or just before </body>. No npm, React, or build step is required.

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

<orbitel-chatbot
  bot-id="019abf21-29d4-723a-b17e-88fb39a86aba"
  bot-name="Chat with us"
  bot-avatar="/img.png"
  welcome-msg="Hello, This is Pooja from Orbitel. How can I help you?"
  primary-color="#35005C"
  position="bottom-right"
  user-online-message="msg"
  user-online-message-after="10000"
></orbitel-chatbot>

For a production website, replace xyz with the access key provided for that site. The avatar path must be publicly reachable from the website, for example https://example.com/img.png or /img.png when it is in the site's public folder.

CDN — recommended configuration-object API

Use this version when you need behavior options such as autoOpen, closeOnBackdrop, or custom status text. customElements.whenDefined ensures the configuration is applied after the CDN script is ready.

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

<orbitel-chatbot id="orbitel-chat"></orbitel-chatbot>

<script>
  customElements.whenDefined('orbitel-chatbot').then(() => {
    document.getElementById('orbitel-chat').config = {
      botId: '019abf21-29d4-723a-b17e-88fb39a86aba',
      accessKey: 'xyz',
      botName: 'Chat with us',
      botAvatar: '/orbitel.png',
      welcomeMessage: 'Hello, This is Pooja from Orbitel. How can I help you?',
      primaryColor: '#35005C',
      position: 'bottom-right',
      userOnlineMessage: 'Need expert help? <email: [email protected]>',
      userOnlineMessageAfter: 10000,
      launcher: 'default',
      launcherLabel: 'Chat with us',
      statusText: 'Pooja is online',
      closeOnBackdrop: true,
      closeOnEscape: true,
    };
  });
</script>

Orbitel CDN integration reference

The following is a complete CDN setup using the Orbitel configuration. Place the script and widget once per page, preferably near the end of body. The defer attribute makes the browser load the SDK without blocking page rendering.

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

<orbitel-chatbot
  bot-id="019abf21-29d4-723a-b17e-88fb39a86aba"
  bot-name="Chat with us"
  bot-avatar="https://resources.Orbitelsolutions.com/wp-content/themes/orbitel/assets/images/Orbitel_logo.png"
  welcome-msg="Hello I'm TARA! How can I help you?"
  primary-color="#fcaf1b"
  position="bottom-right"
  user-online-message="It seems you need expert assistance. Please connect with our support team for a quick resolution. &lt;whatsapp: https://api.whatsapp.com/send/?phone=919019910043&amp;text=Hi&amp;type=phone_number&amp;app_absent=0&gt;&lt;email: [email protected]&gt;&lt;web: Help:https://help.Orbitelsolutions.com/&gt;&lt;mobile_number: 1800 309 8859&gt;"
  user-online-message-after="120000"
></orbitel-chatbot>

What this setup does

The page loads the Orbitel web component from the CDN.
The default floating launcher appears at the bottom right in Orbitel orange.
Clicking it opens a popup titled Chat with us, with the supplied Orbitel logo and TARA welcome message.
A chat session is created or an existing session is resumed.
If the popup stays open for two minutes (120000 ms) without a new user or bot message, the assistance message is shown once for that session with WhatsApp, email, Help, and phone actions. Closing the popup cancels the countdown; opening it starts a fresh countdown.

Attribute-by-attribute behavior

| Attribute | Your value | What happens when changed | | --- | --- | --- | | bot-id | 019abf... | Selects the bot. It is required. Treat it as fixed for the lifetime of a page/chat session. | | access-key | xyz | Required authentication key. Use the key issued for the same bot/site; treat it as fixed for the lifetime of a page/chat session. | | bot-name | Chat with us | Changes the popup header title. | | bot-avatar | Orbitel logo URL | Changes the header and assistant avatar image. It must be a public HTTPS URL or a valid site-relative path. | | welcome-msg | TARA greeting | Changes the first assistant message in a new chat. | | primary-color | #fcaf1b | Changes the default launcher, popup header, user-message, and send-button theme. Use a valid CSS color/hex value. | | position | bottom-right | Moves the default launcher and popup. Set bottom-left for the left side. | | user-online-message | support text plus tags | Defines the one-time inactivity assistance message and its action buttons. Omit it to disable this feature. | | user-online-message-after | 120000 | Delay in milliseconds. 120000 = 2 minutes; 10000 = 10 seconds; 60000 = 1 minute. The timer starts when the popup opens, is cancelled on close, and restarts after every user or assistant message. |

Contact actions in `user-online-message`

Write normal text first, then add any combination of the following tags. Tags are removed from the message body and rendered as action buttons.

| Tag | Result | | --- | --- | | <whatsapp: https://wa.me/919019910043> | Opens WhatsApp in a new tab. | | <email: [email protected]> | Opens the visitor's email app. | | <mobile_number: 1800 309 8859> | Starts a phone call on supported devices. | | <web: Help:https://help.example.com/> | Opens a website. The part before the second colon becomes the button label. |

In an HTML attribute, always escape < as <, > as >, and URL query-string & as &, exactly as in the Orbitel snippet. In React or a JavaScript config object, use normal characters instead.

Optional CDN attributes

Add any of these to the <orbitel-chatbot> element:

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  launcher="default"
  launcher-label="Chat with TARA"
  input-placeholder="Ask TARA anything..."
  status-text="TARA is online"
  show-branding="false"
  powered-by-text="Orbitel"
  close-on-backdrop="true"
  close-on-escape="true"
  auto-open="false"
></orbitel-chatbot>

| Attribute | Allowed values | Effect | | --- | --- | --- | | launcher | default, none, slot | Chooses the default floating button, no SDK button, or a customer-owned slotted button. | | launcher-label | text | Shows text next to the icon on the default launcher. | | input-placeholder | text | Changes the message-input placeholder. | | status-text | text | Changes the small header status; default is Online. | | show-branding | true, false | Shows or hides the “Powered by …” footer. | | powered-by-text | text | Changes the brand name in the footer. | | close-on-backdrop | true, false | Controls whether clicking outside the popup closes it. | | close-on-escape | true, false | Controls whether the Escape key closes it. | | auto-open | true, false | Opens the popup automatically once after loading. |

Styling without changing SDK code

Use CSS variables directly on the element:

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  style="
    --orbitel-font-family: Arial, sans-serif;
    --orbitel-launcher-size: 64px;
    --orbitel-launcher-radius: 18px;
    --orbitel-launcher-bottom: 32px;
    --orbitel-launcher-side: 32px;
    --orbitel-launcher-background: #fcaf1b;
    --orbitel-popup-width: 420px;
    --orbitel-popup-height: 650px;
    --orbitel-popup-bottom: 108px;
    --orbitel-popup-side: 32px;
    --orbitel-popup-radius: 24px;
    --orbitel-header-background: #fcaf1b;
    --orbitel-popup-background: #ffffff;
    --orbitel-popup-border-color: #f0c46b;
  "
></orbitel-chatbot>

See All supported CSS variables for the full list and defaults.

Custom CDN launcher button

To keep the popup but use your own HTML button, use launcher="slot" and add a child element with slot="launcher". Clicking it automatically opens or closes the chat.

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  launcher="none"
>
  <button slot="launcher" class="orbitel-chat-button" type="button">
    Chat with TARA
  </button>
</orbitel-chatbot>

If the customer wants the launcher completely outside the widget, set launcher="none" and use the methods below.

JavaScript controls and events

<orbitel-chatbot
  id="orbitel-chat"
  bot-id="YOUR_BOT_ID"
  launcher="none"
></orbitel-chatbot>

<button id="open-orbitel-chat" type="button">Chat with TARA</button>

<script>
  customElements.whenDefined('orbitel-chatbot').then(() => {
    const chat = document.getElementById('orbitel-chat');

    document.getElementById('open-orbitel-chat').addEventListener('click', () => {
      chat.toggle();
    });

    chat.addEventListener('orbitel-open', () => console.log('Chat opened'));
    chat.addEventListener('orbitel-close', () => console.log('Chat closed'));
    chat.addEventListener('orbitel-state-change', (event) => {
      console.log(event.detail.isOpen); // true or false
    });
  });
</script>

Available methods are chat.open(), chat.close(), chat.toggle(), and chat.isOpen().

🎛 Attributes

| Attribute | Required | Default | Description | |-----------------|----------|-------------------|--------------------------------------------------| | bot-id | ✅ Yes | — | Unique chatbot identifier | | access-key | No | — | 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 | | user-online-message | No | — | Follow-up message displayed after inactivity; supports the contact tags shown above | | user-online-message-after | No | 120000 (2 minutes) | Inactivity delay in milliseconds; 30000 = 30 seconds, 60000 = 1 minute, and 120000 = 2 minutes | | launcher | No | default | default, none, or slot | | launcher-label | No | — | Text displayed beside the default launcher icon | | input-placeholder | No | Type your message... | Text shown in the message input | | show-branding | No | true | Set to false to hide the footer branding | | status-text | No | Online | Status shown below the bot name | | powered-by-text | No | Orbitel | Brand name in the footer | | close-on-backdrop | No | true | Set to false to prevent backdrop clicks from closing the popup | | close-on-escape | No | true | Set to false to disable closing with the Escape key | | auto-open | No | false | Set to true to open automatically once when the widget loads |

Complete React prop example

These are every attribute-style prop currently accepted by the widget. Use the string 'false' for show-branding, because web-component attributes are strings. The style, ref, and children props are standard React props.

const chatStyle = {
  '--orbitel-launcher-size': '60px',
  '--orbitel-popup-width': '420px',
  '--orbitel-popup-radius': '20px',
} as React.CSSProperties;

React.createElement('orbitel-chatbot', {
  // Required
  'bot-id': 'YOUR_BOT_ID',

  // Chat content and look
  'bot-name': 'Chat with us',
  'bot-avatar': 'https://example.com/avatar.png',
  'welcome-msg': 'Hello! How can I help you?',
  'primary-color': '#35005C',
  position: 'bottom-right', // or 'bottom-left'

  // Inactivity assistance message
  'user-online-message': 'Need expert help? <email: [email protected]>',
  'user-online-message-after': 10_000, // milliseconds

  // Launcher: 'default', 'none', or 'slot'
  launcher: 'default',
  'launcher-label': 'Need help?',

  // Popup content
  'input-placeholder': 'Type your question...',
  'show-branding': 'false',

  // Standard React props
  style: chatStyle,
  ref: chatRef,
});

launcher="slot" additionally accepts a child element with slot="launcher". See Let the SDK wire up your HTML button.

Inactivity message behavior

user-online-message-after defaults to 120000 milliseconds (2 minutes) and is measured from the moment the popup opens. The timer is cancelled when the popup closes, starts fresh when it opens again, and restarts whenever the user or assistant sends a message. The configured assistance message is shown only once per browser-tab app session, even if the chat session is recreated. Use 30000 for 30 seconds, 60000 for one minute, and 120000 for two minutes. In HTML attributes, write & in URLs as shown in the CDN example so query-string parameters remain valid.

All supported CSS variables

Pass these in the element's style prop/attribute to customize the default launcher and popup layout. They are optional.

| CSS variable | Default | Purpose | | --- | --- | --- | | --orbitel-launcher-size | 56px | Default launcher height and minimum width | | --orbitel-launcher-bottom | 24px | Launcher distance from the bottom | | --orbitel-launcher-side | 24px | Launcher distance from the left or right edge | | --orbitel-launcher-radius | 50% | Launcher corner radius | | --orbitel-popup-width | 380px | Popup width | | --orbitel-popup-height | calc(100vh - 155px) | Popup height | | --orbitel-popup-max-height | calc(100vh - 24px) | Popup maximum height | | --orbitel-popup-bottom | 85px | Popup distance from the bottom | | --orbitel-popup-side | 24px | Popup distance from the left or right edge | | --orbitel-popup-radius | 16px | Popup corner radius | | --orbitel-font-family | inherited | Font used by the popup and default launcher | | --orbitel-launcher-background | primary-color gradient | Default launcher background | | --orbitel-header-background | primary-color gradient | Popup header background | | --orbitel-popup-background | white | Popup background color | | --orbitel-popup-border-color | #e5e7eb | Popup border color | | --orbitel-popup-shadow | default shadow | Popup box shadow |

Configuration object API (recommended for React and JavaScript)

Instead of passing many hyphenated attributes, React and JavaScript users can pass one config object with camelCase names. Object values take precedence over HTML attributes and can be updated at runtime.

import type { OrbitelChatbotOptions } from '@orbitellabs/chatbot-sdk';

const config: OrbitelChatbotOptions = {
  botId: '019abf21-29d4-723a-b17e-88fb39a86aba',
  accessKey: 'xyz',
  botName: 'Chat with us',
  botAvatar: '/img.png',
  welcomeMessage: 'Hello, This is Pooja from Orbitel. How can I help you?',
  primaryColor: '#35005C',
  position: 'bottom-right',
  userOnlineMessage: 'Need expert help? <email: [email protected]>',
  userOnlineMessageAfter: 10_000,
  launcher: 'default',
  launcherLabel: 'Chat with us',
  inputPlaceholder: 'Ask your question...',
  showBranding: false,
  statusText: 'Pooja is online',
  poweredByText: 'Orbitel',
  closeOnBackdrop: true,
  closeOnEscape: true,
  autoOpen: false,
};

React.createElement('orbitel-chatbot', { config });

For CDN or vanilla JavaScript, set the same object after the element exists:

<orbitel-chatbot id="orbitel-chat"></orbitel-chatbot>
<script>
  customElements.whenDefined('orbitel-chatbot').then(() => {
    document.getElementById('orbitel-chat').config = {
      botId: 'YOUR_BOT_ID',
      launcher: 'none',
      statusText: 'Support is online',
      closeOnBackdrop: false,
    };
  });
</script>

To modify the configuration later, preserve the existing values:

const chat = document.getElementById('orbitel-chat');
chat.config = { ...chat.config, launcherLabel: 'Talk to support' };

🔥 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.

Launcher modes

By default, the SDK renders its floating launcher button. Use the launcher attribute to choose a different integration:

| Value | Result | | --- | --- | | default | SDK floating launcher (the default) | | none | No launcher; open and close the chat yourself | | slot | Use a customer-owned child element with slot="launcher" |

Use your own button

Set launcher="none", give the widget an id, and call its public methods. The SDK handles session creation and restoration when open() is called.

<orbitel-chatbot
  id="orbitel-chat"
  bot-id="019abf21-29d4-723a-b17e-88fb39a86aba"
  access-key="xyz"
  bot-name="Chat with us"
  primary-color="#35005C"
  launcher="none"
></orbitel-chatbot>

<button type="button" onclick="document.getElementById('orbitel-chat').toggle()">
  Chat with Orbitel
</button>

Every widget exposes these methods:

const chat = document.getElementById('orbitel-chat');

chat.open();     // Opens the popup and starts/resumes the chat session
chat.close();    // Closes the popup; the session remains available
chat.toggle();   // Opens a closed popup or closes an open one
chat.isOpen();   // Returns true or false

Let the SDK wire up your HTML button

Use launcher="slot" and put any HTML element inside the widget with slot="launcher". Its click automatically calls toggle(). You retain full control over the markup, classes, and CSS.

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_ACCESS_KEY"
  launcher="slot"
>
  <button slot="launcher" class="support-button" type="button">
    Talk to an expert
  </button>
</orbitel-chatbot>

Do not pass arbitrary button HTML through an attribute: it is unsafe and does not work reliably with framework event handlers. The slot and the public methods support the same use case safely.

React custom button

import React, { useRef } from 'react';
import '@orbitellabs/chatbot-sdk';

type OrbitelChatbot = HTMLElement & {
  toggle: () => void;
  open: () => void;
  close: () => void;
};

export function Support() {
  const chatRef = useRef<OrbitelChatbot>(null);

  return (
    <>
      {React.createElement('orbitel-chatbot', {
        ref: chatRef,
        'bot-id': 'YOUR_BOT_ID',
        'access-key': 'YOUR_ACCESS_KEY',
        launcher: 'none',
      })}
      <button type="button" onClick={() => chatRef.current?.toggle()}>
        Chat with us
      </button>
    </>
  );
}

Chat state events

Listen for state changes to update a customer-owned launcher, for example to change its text or icon while the chat is open.

const chat = document.getElementById('orbitel-chat');

chat.addEventListener('orbitel-open', () => console.log('Chat opened'));
chat.addEventListener('orbitel-close', () => console.log('Chat closed'));
chat.addEventListener('orbitel-state-change', (event) => {
  console.log(event.detail.isOpen);
});

Appearance and text options

You can customize the built-in launcher label, the message input text, and the branding footer with attributes:

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  launcher-label="Need help?"
  input-placeholder="Ask Orbitel a question..."
  show-branding="false"
></orbitel-chatbot>

For layout and shape, set these CSS variables on the custom element. They work in plain HTML and every framework because they cross into the widget's Shadow DOM.

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_ACCESS_KEY"
  style="
    --orbitel-launcher-size: 64px;
    --orbitel-launcher-bottom: 32px;
    --orbitel-launcher-side: 32px;
    --orbitel-launcher-radius: 18px;
    --orbitel-popup-width: 440px;
    --orbitel-popup-height: 650px;
    --orbitel-popup-bottom: 108px;
    --orbitel-popup-side: 32px;
    --orbitel-popup-radius: 24px;
  "
></orbitel-chatbot>

Available variables: --orbitel-launcher-size, --orbitel-launcher-bottom, --orbitel-launcher-side, --orbitel-launcher-radius, --orbitel-popup-width, --orbitel-popup-height, --orbitel-popup-max-height, --orbitel-popup-bottom, --orbitel-popup-side, and --orbitel-popup-radius.

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@orbitellabs/chatbot-sdk

✨ Features

📦 Installation

Via npm

Via CDN (no install needed)

🚀 Quick Start

React — Orbitel example

React — recommended configuration-object API

Using npm (ES Module)

CDN — static HTML, WordPress, Webflow, Wix, Shopify, or any website

CDN — recommended configuration-object API

Orbitel CDN integration reference

What this setup does

Attribute-by-attribute behavior

Contact actions in user-online-message

Optional CDN attributes

Styling without changing SDK code

Custom CDN launcher button

JavaScript controls and events

🎛 Attributes

Complete React prop example

Inactivity message behavior

All supported CSS variables

Configuration object API (recommended for React and JavaScript)

🔥 Framework Usage

Plain HTML / Static Site

React

Vue

Angular

WordPress / Webflow / Wix / Elementor

PHP / Laravel / Blade

🧩 Programmatic API

Launcher modes

Use your own button

Let the SDK wire up your HTML button

React custom button

Chat state events

Appearance and text options

Reset the widget

Destroy all widgets

📌 Notes & Best Practices

📄 License

Contact actions in `user-online-message`