npm package: @orbitel/chatbot-sdk
Description: 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.
Latest version: 1.0.3

# 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>`:

```html
<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:

```html
<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

```html
<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:

```html
<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`:

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

➡ Allow web components:

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

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

➡ Use in template:

```html
<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`:

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

➡ Use in JSX (works as native element):

```jsx
<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`:

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

➡ Use in template:

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

---

### 6️⃣ PHP / Laravel / Blade

```html
<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

```js
window.OrbitelChatbot.reset();
```

### ❌ Remove bot

```js
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**