Chat Widget

A customizable chat widget component for React applications that provides live chat support and FAQ functionality.

Features

• Live chat support with real-time messaging
• FAQ section with expandable categories and questions
• Customizable positioning (bottom-right, bottom-left, top-right, top-left)
• Theme customization
• Loading indicator customization
• Multi-language support
• Sign-in integration
• Responsive design

Installation

npm install @your-org/chat-widget

Usage

import { ChatWidget } from '@your-org/chat-widget';

function App() {
  return (
    <ChatWidget
      domain_name="your-domain"
      userEmail="[email protected]"
      position="bottom-right"
      language="en"
      theme={{
        primaryColor: '#007AFF',
        backgroundColor: '#FFFFFF',
        textColor: '#000000',
        loadingColor: '#007AFF',
        errorColor: '#FF3B30'
      }}
      loadingIndicator={{
        type: 'dots',
        color: '#007AFF',
        size: 8
      }}
    />
  );
}

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | domain_name | string | Yes | - | Your domain name for configuration | | userEmail | string | null | No | null | User's email address | | position | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | No | 'bottom-right' | Position of the chat widget | | language | 'en' | 'tr' | 'de' | 'es' | 'pt' | No | 'en' | Language for chat and FAQ content | | theme | object | No | See below | Custom theme configuration | | loadingIndicator | object | No | See below | Loading indicator configuration |

Theme Configuration

theme: {
  primaryColor?: string;    // Default: '#007AFF'
  backgroundColor?: string; // Default: '#FFFFFF'
  textColor?: string;      // Default: '#000000'
  loadingColor?: string;   // Default: '#007AFF'
  errorColor?: string;     // Default: '#FF3B30'
}

Loading Indicator Configuration

loadingIndicator: {
  type?: 'dots' | 'spinner'; // Default: 'dots'
  color?: string;            // Default: '#007AFF'
  size?: number;             // Default: 8
}

Language Support

The chat widget supports multiple languages for both chat and FAQ content. Available languages:

• English (en)
• Turkish (tr)
• German (de)
• Spanish (es)
• Portuguese (pt)

The language setting affects:

• Chat interface text
• FAQ content
• System messages
• Error messages

FAQ content is loaded from language-specific files:

https://your-storage-url/${domain_name}/faq-${language}.json

FAQ Content Structure

The FAQ content should be provided in a JSON file with the following structure:

{
  "categories": [
    {
      "name": "Category Name",
      "items": [
        {
          "question": "FAQ Question",
          "answer": "FAQ Answer"
        }
      ]
    }
  ]
}

Development

# Install dependencies
npm install

# Start development server
npm start

# Build for production
npm run build

License

MIT