npm package: @kumebots/web-chatbot
Description: A context-aware chatbot widget for React apps by Küme
Author: Küme
Latest version: 1.0.9

# Küme Web Chatbot

A lightweight, customizable and intelligent chat widget for React applications. This package provides a simple way to add a context-aware customer support chatbot to your website.

![Küme Chatbot Demo](https://via.placeholder.com/600x400?text=Kume+Chatbot+Demo)

<!-- Replace with your actual demo GIF/image when available -->

## Features

- 💬 Elegant, animated chat button and modal
- 🎨 Customizable appearance with branding options
- 📱 Fully responsive design
- 🔌 Easy integration with React applications
- 🌐 CDN support for non-React applications
- 🚀 Lightweight (<50KB minified)

## Installation

```bash
pnpm install @kumebots/web-chatbot
```

## Usage

### React Applications

```jsx
import React from "react";
import { ChatWidget } from "@kumebots/web-chatbot";

function App() {
  return (
    <div className="App">
      {/* Your app content */}

      {/* Add the chat widget */}
      <ChatWidget
        siteId="your-site-id"
        color="#00A1A1"
        position="bottom-right"
        welcomeMessage="¡Hola! ¿En qué puedo ayudarte hoy?"
      />
    </div>
  );
}

export default App;
```

### Script Tag (Non-React Applications)

Add the following script tags to your HTML file:

```html
<!-- React and ReactDOM dependencies -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- Küme Chatbot Widget -->
<script src="https://unpkg.com/@kumebots/web-chatbot/dist/kume-web-chatbot.umd.js"></script>

<!-- Initialize the widget -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    initKumeChat({
      siteId: "your-site-id",
      color: "#00A1A1",
      position: "bottom-right",
      welcomeMessage: "¡Hola! ¿En qué puedo ayudarte hoy?",
    });
  });
</script>
```

## Props

| Prop             | Type   | Required | Default                           | Description                                              |
| ---------------- | ------ | -------- | --------------------------------- | -------------------------------------------------------- |
| `siteId`         | string | Yes      | -                                 | Unique identifier for your website                       |
| `color`          | string | No       | #00A1A1                           | Custom color for the chat button (hex code)              |
| `position`       | string | No       | 'bottom-right'                    | Position of the widget ('bottom-right' or 'bottom-left') |
| `welcomeMessage` | string | No       | 'Hola, ¿cómo puedo ayudarte hoy?' | Custom welcome message from the bot                      |

## Advanced Usage

### Customizing the API Endpoint

By default, the chatbot connects to `https://api.kume.cl/chat`. You can modify this by editing the `API_URL` constant in `useChat.ts` if you're building from source.

### Building from Source

If you want to modify the widget or build it from source:

```bash
# Clone the repository
git clone https://github.com/kumebots/web-chatbot.git
cd web-chatbot

# Install dependencies
npm install

# Start the development server
npm run dev

# Build the package
npm run build
```

## API Integration

The chatbot expects your API endpoint to accept POST requests with the following structure:

Request:

```json
{
  "message": "User message here",
  "siteId": "your-site-id",
  "context": "Optional context data"
}
```

Response:

```json
{
  "response": "Bot response here"
}
```