@andreinasesar/react-chat-widget

v1.0.3

Published

a month ago

A modern, responsive chat widget built as a web component for easy integration into any website

Downloads

0High
0Medium
0Low

andreinasesar

react chat widget web-component micro-frontend customer-support chatbot ui-component

React Chat Widget

A modern, responsive chat widget built as a web component for easy integration into any website. Perfect for customer support, lead generation, or general assistance.

✨ Features

🚀 Easy Integration - Works with any website or framework
🎨 Fully Customizable - Colors, position, messages, and more
📱 Responsive Design - Works perfectly on desktop and mobile
🔧 Web Component - Standard web technology, no framework dependencies
⚡ Lightweight - Minimal bundle size with optimized performance
🎭 Modern UI - Clean, professional design with smooth animations

📦 Installation

Via CDN (Recommended)

<!-- Include CSS -->
<link rel="stylesheet" href="https://unpkg.com/@your-username/react-chat-widget@latest/dist/style.css">

<!-- Include JavaScript -->
<script src="https://unpkg.com/@your-username/react-chat-widget@latest/dist/chat-widget.umd.cjs"></script>

Via NPM

npm install @your-username/react-chat-widget

🚀 Quick Start

Basic Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://unpkg.com/@your-username/react-chat-widget@latest/dist/style.css">
</head>
<body>
    <!-- Your website content -->
    
    <!-- Chat Widget -->
    <chat-widget></chat-widget>
    
    <script src="https://unpkg.com/@your-username/react-chat-widget@latest/dist/chat-widget.umd.cjs"></script>
</body>
</html>

Customized Usage

<chat-widget 
    assistant-name="Sarah"
    primary-color="#ff6b6b"
    position="bottom-left"
    assistant-avatar="🤖"
    initial-message="Hello! How can I help you today?">
</chat-widget>

Programmatic Usage

// Create widget dynamically
const chatWidget = document.createElement('chat-widget');
chatWidget.setAttribute('assistant-name', 'Alex');
chatWidget.setAttribute('primary-color', '#8b5cf6');
chatWidget.setAttribute('position', 'bottom-right');
document.body.appendChild(chatWidget);

⚙️ Configuration Options

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | assistant-name | string | "Cara" | Name of the AI assistant | | primary-color | string | "#8b5cf6" | Main theme color (any CSS color) | | position | string | "bottom-right" | Widget position: "bottom-right" or "bottom-left" | | assistant-avatar | string | "👩‍💼" | Avatar emoji or text for the assistant | | initial-message | string | "Hi! I'm here to help..." | First message shown to users |

🎨 Styling Examples

Corporate Blue Theme

<chat-widget 
    assistant-name="Support"
    primary-color="#1e40af"
    assistant-avatar="💼">
</chat-widget>

Friendly Green Theme

<chat-widget 
    assistant-name="Helper"
    primary-color="#10b981"
    assistant-avatar="🌟"
    initial-message="Hi there! Ready to help you succeed! 🚀">
</chat-widget>

Tech Support Theme

<chat-widget 
    assistant-name="TechBot"
    primary-color="#6366f1"
    assistant-avatar="🤖"
    position="bottom-left">
</chat-widget>

🔧 Advanced Integration

React Applications

import { useEffect } from 'react';
import '@your-username/react-chat-widget/dist/style.css';

function App() {
  useEffect(() => {
    // Import the web component
    import('@your-username/react-chat-widget');
  }, []);

  return (
    <div>
      {/* Your app content */}
      <chat-widget 
        assistant-name="Assistant"
        primary-color="#8b5cf6" 
      />
    </div>
  );
}

Vue Applications

<template>
  <div>
    <!-- Your app content -->
    <chat-widget 
      assistant-name="Helper"
      primary-color="#8b5cf6"
    />
  </div>
</template>

<script>
import '@your-username/react-chat-widget/dist/style.css';
import '@your-username/react-chat-widget';

export default {
  name: 'App'
};
</script>

Angular Applications

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import '@your-username/react-chat-widget';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})
export class AppModule { }

<!-- app.component.html -->
<chat-widget 
  assistant-name="Angular Assistant"
  primary-color="#dd0031">
</chat-widget>

📱 Mobile Optimization

The chat widget is fully responsive and automatically adapts to mobile devices:

Adjusts size for smaller screens
Touch-friendly interactions
Optimized positioning
Smooth animations on mobile

🌐 Browser Support

✅ Chrome 60+
✅ Firefox 63+
✅ Safari 11+
✅ Edge 79+
✅ Mobile browsers

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

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

📞 Support

🔗 Links

Made with ❤️ for the web development community