Chat Widget

Embeddable customer support chat for your website

Quick Start

1. Add the Script Tag

<!-- One-line integration - just add this script tag -->
<script src="https://your-domain.vercel.app/chat-widget.js" 
        data-api-url="https://your-api.com/chat"
        data-primary-color="#A8C5E4"
        data-position="bottom-right"
        data-title="Chat Support"
        data-subtitle="We are here to help"></script>

<!-- Or initialize manually -->
<script src="https://your-domain.vercel.app/chat-widget.js"></script>
<script>
  window.ChatWidget.init({
    apiUrl: 'https://your-api.com/chat',
    primaryColor: '#A8C5E4',
    position: 'bottom-right',
    title: 'Chat Support',
    subtitle: 'We are here to help'
  });
</script>

2. Configuration Options

apiUrl - Your backend API endpoint (required)
primaryColor - Main theme color
position - Widget position (bottom-right or bottom-left)
title - Header title
subtitle - Header subtitle
welcomeMessage - Initial bot message
placeholder - Input placeholder text

3. API Format

Your API should accept POST requests with the following format:

{
  "message": "User's message"
}

Response:
{
  "response": "Bot's reply"
}

Features

Fully Customizable

Control colors, text, positioning, and behavior through a centralized config

Voice Input

Built-in speech-to-text support for hands-free messaging

Streaming Support

Real-time streaming responses with multiple format support (SSE, OpenAI, NDJSON, Text)

Start Screen

Optional welcome screen before chat starts

TypeScript

Fully typed with TypeScript for better developer experience

Lightweight

Optimized bundle size for fast loading

Development

Install dependencies

npm install

Start development server

npm run dev

Build Next.js application

npm run build

Build embeddable widget bundle

npm run build:widget