npm package: @istem-lab/botanza-chat
Description: Professional AI-powered chat widget for seamless customer interactions
Author: IStem Lab
Latest version: 0.0.3

# Botanza Chat Widget

A professional, AI-powered chat widget built with Stencil.js for seamless customer interactions. Easily integrate into any website with minimal setup.

## Features

- 🚀 **Easy Integration** - Simple HTML tag with extensive customization
- 🎨 **Fully Customizable** - Themes, colors, position, and behavior
- 📱 **Mobile Responsive** - Optimized for all screen sizes
- 🔌 **API Ready** - Connect to any backend or AI service
- ⚡ **Lightweight** - Built as web components for optimal performance
- 🌐 **Framework Agnostic** - Works with React, Vue, Angular, or plain HTML
- ♿ **Accessible** - WCAG compliant with keyboard navigation
- 🎯 **TypeScript Support** - Full type definitions included

## Demo

Check out our [live demo](https://your-demo-url.com) to see the widget in action.

## Installation

### NPM Package (Recommended)

```bash
npm install botanza-chat
```

### CDN

```html
<script
  type="module"
  src="https://unpkg.com/botanza-chat/dist/botanza-chat/botanza-chat.esm.js"
></script>
```

## Quick Start

### Basic Usage

```html
<!DOCTYPE html>
<html>
  <head>
    <script
      type="module"
      src="https://unpkg.com/botanza-chat/dist/botanza-chat/botanza-chat.esm.js"
    ></script>
  </head>
  <body>
    <botanza-chat
      bot-name="AI Assistant"
      welcome-message="Hi! How can I help you today?"
      api-endpoint="https://your-api.com/chat"
    ></botanza-chat>
  </body>
</html>
```

### React Integration

```jsx
import React from 'react';
import 'botanza-chat';

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <botanza-chat
        botName="Support Bot"
        welcomeMessage="Welcome! How can I assist you?"
        apiEndpoint="https://api.example.com/chat"
        theme="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        position="bottom-right"
      />
    </div>
  );
}

export default App;
```

## Configuration Options

| Property             | Type      | Default                                               | Description                                                             |
| -------------------- | --------- | ----------------------------------------------------- | ----------------------------------------------------------------------- |
| `bot-name`           | `string`  | `"Assistant"`                                         | Display name of the bot                                                 |
| `bot-avatar`         | `string`  | `""`                                                  | URL to bot avatar image                                                 |
| `theme`              | `string`  | `"linear-gradient(135deg, #667eea 0%, #764ba2 100%)"` | Header background theme                                                 |
| `primary-color`      | `string`  | `"#667eea"`                                           | Primary color for buttons and user messages                             |
| `welcome-message`    | `string`  | `"Hi! How can I help you today?"`                     | Initial bot message                                                     |
| `placeholder`        | `string`  | `"Type your message..."`                              | Input placeholder text                                                  |
| `position`           | `string`  | `"bottom-right"`                                      | Widget position: `bottom-right`, `bottom-left`, `top-right`, `top-left` |
| `width`              | `string`  | `"400px"`                                             | Chat window width                                                       |
| `height`             | `string`  | `"600px"`                                             | Chat window height                                                      |
| `api-endpoint`       | `string`  | `""`                                                  | Your chat API endpoint                                                  |
| `api-key`            | `string`  | `""`                                                  | API authentication key                                                  |
| `auto-open`          | `boolean` | `false`                                               | Automatically open chat on load                                         |
| `auto-open-delay`    | `number`  | `3000`                                                | Delay before auto-opening (ms)                                          |
| `show-toggle-button` | `boolean` | `true`                                                | Show the toggle button                                                  |
| `open`               | `boolean` | `false`                                               | Control chat window visibility                                          |

## API Integration

### Request Format

The widget sends POST requests to your API endpoint with this format:

```json
{
  "message": "User's message text",
  "conversation_id": "unique-session-id",
  "timestamp": "2024-01-01T12:00:00.000Z"
}
```

### Response Format

Your API should respond with:

```json
{
  "message": "Bot's response text",
  "data": {
    // Optional additional data
  }
}
```

## Advanced Examples

### Custom Styling

```html
<botanza-chat
  bot-name="Custom Bot"
  theme="linear-gradient(45deg, #ff6b6b, #ffd93d)"
  primary-color="#ff6b6b"
  width="450px"
  height="700px"
  bot-avatar="https://example.com/bot-avatar.png"
></botanza-chat>
```

### With Authentication

```html
<botanza-chat
  bot-name="Secure Bot"
  api-endpoint="https://secure-api.com/chat"
  api-key="your-secret-key"
></botanza-chat>
```

## Development

```bash
# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# Run tests
npm test
```

## License

MIT License - see [LICENSE](LICENSE) file for details.

## Support

- 🐛 Issues: [GitHub Issues](https://github.com/istemlab/bot_frontend/issues)
- 📖 Documentation: [Full Documentation](https://docs.botanza.com)

---

Made with ❤️ by [IStem Lab](https://istemlab.com)