Orbitel Chatbot Web Component

A lightweight, embeddable AI chatbot widget that works with any website — HTML, PHP, WordPress, Angular, Vue, React, Webflow, Laravel, or custom JS apps — without needing frameworks or builds.

✨ 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
• 🧩 Framework-agnostic
• 🔌 Multiple instances allowed
• ⚙️ Configurable via HTML attributes
• 🔄 Optional API control (reset/remove widget)

📦 Installation

Add this CDN script before </body>:

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

This loads the widget globally and registers the custom element <orbitel-chatbot>.

Once included, you can simply drop the widget on your page like this:

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_API_KEY"
  bot-name="Support Bot"
  bot-avatar="/avatar.png"
  primary-color="#35005C"
  position="bottom-right"
></orbitel-chatbot>

🎛 Available Attributes

| Attribute | Required | Default | Description | |----------------|----------|---------------------|-------------| | bot-id | Yes | - | Unique chatbot identifier | | access-key | Yes | - | Authentication key | | bot-name | No | Orbitel Chatbot | Display name | | bot-avatar | No | /logo.png | Avatar image URL | | primary-color| No | #35005C | Widget theme color | | position | No | bottom-right | Chat bubble location |

🔥 Using in Different Environments

1️⃣ Plain HTML / Static Site

<script src="https://cdn.jsdelivr.net/npm/@orbitel/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"
  position="bottom-right"
></orbitel-chatbot>

2️⃣ WordPress / Elementor / Webflow / Wix

Paste in footer or embed widget:

<script src="https://cdn.jsdelivr.net/npm/@orbitel/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"
  position="bottom-right"
></orbitel-chatbot>

3️⃣ Angular

➡ Add CDN to index.html:

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

➡ Allow web components:

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

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

➡ Use in template:

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_API_KEY"
  bot-name="Support Bot"
  bot-avatar="/avatar.png"
  position="bottom-right"
></orbitel-chatbot>

4️⃣ React

➡ Add CDN to /public/index.html:

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

➡ Use in JSX (works as native element):

<orbitel-chatbot
  bot-id="YOUR_BOT_ID"
  access-key="YOUR_API_KEY"
  bot-name="Support Bot"
  bot-avatar="/avatar.png"
  position="bottom-right"
/>

5️⃣ Vue

➡ Add CDN to public/index.html:

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

➡ Use in template:

<orbitel-chatbot bot-id="YOUR_BOT_ID" access-key="YOUR_API_KEY"></orbitel-chatbot>

6️⃣ PHP / Laravel / Blade

<script src="https://cdn.jsdelivr.net/npm/@orbitel/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"
  position="bottom-right"
></orbitel-chatbot>

🧩 Global API Access

Once the script loads, a helper object is available:

🔄 Reset bot

window.OrbitelChatbot.reset();

❌ Remove bot

window.OrbitelChatbot.remove();

📌 Notes & Best Practices

✔ Place CDN script near bottom of body
✔ Multiple widgets allowed
✔ Shadow DOM protects styling
✔ Works inside SPA frameworks without config

🤝 Contributing

Open issues, request features, or submit PRs — contributions welcome!

📄 License

MIT License — free for commercial & personal use.

Made with ❤️ by Orbitel.ai