React Chat Widget

A lightweight, customizable, and production-ready chat widget for React applications.

Features

• 🚀 Easy Integration: Drop-in component with minimal setup.
• 🎨 Customizable: Control colors, position, titles, and fonts.
• 💾 Persistence: Auto-saves chat history to localStorage.
• 🚧 Maintenance Mode: Built-in support for maintenance banners and read-only states.
• 📱 Responsive: Mobile-first design that works on all devices.
• 🤖 AI Powered: Connects directly to Google Gemini models.

Installation

npm install @maiglonl/chat-widget
# or
yarn add @maiglonl/chat-widget

Usage

1. Import the component in your root App or layout file.
2. Configure usage with your style preferences.
3. Set your API Key securely (preferably via a backend proxy for production, though direct API key is supported for demos).

import { ChatWidget } from "@maiglonl/chat-widget";

function App() {
  return (
    <div>
      <YourWebsiteContent />

      <ChatWidget
        title="Customer Success"
        subtitle="Ask us anything!"
        theme={{
          primaryColor: "#6F33B7",
          position: "bottom-right",
        }}
      />
    </div>
  );
}

API Reference

| Prop | Type | Default | Description | | ------------------- | ------- | ----------------------------- | ----------------------------------------------------- | | title | string | "Support Chat" | Header text. | | subtitle | string | "We reply instantly" | Sub-header status text. | | theme | object | { primaryColor: '#2563eb' } | Color and position (bottom-right | bottom-left). | | isMaintenanceMode | boolean | false | Disables input and shows a warning banner. | | isOffline | boolean | false | Sets status indicator to grey and label to "Offline". | | defaultIsOpen | boolean | false | Whether the widget loads open. |