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.

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

pnpm install @kumebots/web-chatbot

Usage

React Applications

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:

<!-- 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:

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

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

Response:

{
  "response": "Bot response here"
}