chatstack-widget

v1.5.1

Published

2 months ago

Embeddable chat widget for websites with React support

Downloads

0High
0Medium
0Low

houthami

chat widget customer-support chatbot react typescript embeddable

🤖 ChatStack Widget

Embeddable chat widget for websites with React support. Simple, customizable, and easy to integrate.

✨ Features

🎨 Customizable - Configure colors, position, and theme
⚛️ React Support - Works with both vanilla JS and React
📱 Responsive - Mobile-friendly design
🎯 TypeScript - Full type definitions included
🚀 Easy Integration - Get started in minutes

📦 Installation

npm install chatstack-widget

🚀 Quick Start

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/chatstack-widget@latest/dist/index.js"></script>
</head>
<body>
    <script>
        ChatStack.initChatStack({
            apiKey: 'your_api_key_here',
            position: 'bottom-right'
        });
    </script>
</body>
</html>

React (Hook)

import { useChatStack } from 'chatstack-widget';

function App() {
  const { isReady, error } = useChatStack({
    apiKey: 'your_api_key_here',
    position: 'bottom-right',
    enabled: true,
    onReady: () => console.log('Widget ready!'),
    onError: (err) => console.error('Widget error:', err)
  });

  return <div>Your app content</div>;
}

React (Component)

import { ChatStackWidgetComponent } from 'chatstack-widget';

function App() {
  return (
    <div>
      <ChatStackWidgetComponent
        apiKey="your_api_key_here"
        position="bottom-right"
        enabled={true}
        onReady={() => console.log('Ready!')}
      />
    </div>
  );
}

React (Component with Render Props)

import { ChatStackWidgetComponent } from 'chatstack-widget';

function App() {
  return (
    <ChatStackWidgetComponent apiKey="your_api_key_here">
      {({ isReady, error }) => (
        <div>
          Status: {isReady ? '✅ Ready' : '⏳ Loading'}
          {error && <p>Error: {error.message}</p>}
        </div>
      )}
    </ChatStackWidgetComponent>
  );
}

🎨 Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | required | Your ChatStack API key | | position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Widget position | | enabled | boolean | true | Enable/disable widget (React only) | | containerSelector | string | 'body' | DOM selector for widget container | | onReady | () => void | - | Callback when widget is ready | | onError | (error: Error) => void | - | Callback when error occurs |

🎯 API Endpoints

Your backend needs to implement these endpoints:

GET `/api/assistants/{apiKey}`

Returns assistant configuration:

{
  "id": "assistant_123",
  "name": "Support Bot",
  "icon": "🤖",
  "color": "#667eea",
  "theme": "light",
  "initialMessage": "Hello! How can I help you?"
}

POST `/api/chat/{apiKey}`

Handles chat messages:

Request:

{
  "message": "Hello, I need help"
}

Response:

{
  "reply": "Hi! I'm here to help. What do you need assistance with?"
}

🛠️ Development

# Clone repository
git clone https://github.com/houthami/chatstack-lib.git
cd chatstack-widget

# Install dependencies
npm install

# Build
npm run build

# Watch mode
npm run dev

📝 License

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Support

For issues and questions, please open an issue.

Made with ❤️ by Hassan Outhami