JSPM – @istem-lab/botanza-chat@0.0.3

Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@istem-lab/botanza-chat) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 to see the widget in action.

Installation

NPM Package (Recommended)

npm install botanza-chat

CDN

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

Quick Start

Basic Usage

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

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:

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

Response Format

Your API should respond with:

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

Advanced Examples

Custom Styling

<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

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

Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

# Run tests
npm test

License

MIT License - see LICENSE file for details.

Support

🐛 Issues: GitHub Issues
📖 Documentation: Full Documentation

Made with ❤️ by IStem Lab

@istem-lab/botanza-chat