Chat CRM Widget

Universal Help & Support widget with Chat and Ticketing System that works on any website - React, Vue, HTML, WordPress, Shopify, and more!

✨ Features

🎯 Help & Support Menu

• Start Query: Real-time chat with support agents
• Raise Ticket: Complete ticketing system with full management

💬 Query/Chat System

• ⚡ Real-time: Socket.IO powered instant messaging
• 👤 Smart User Detection: Automatically supports both logged-in users and guests
• 🔔 Notifications: Unread message badges and sound alerts
• 📸 Camera Support: Agent can request camera snapshots

🎫 Ticketing System (NEW in v1.2.0)

• 📝 Create Tickets: Submit support tickets with priority and category
• 📊 Track Status: View open, pending, and closed tickets
• 🔍 History: Complete ticket history with filtering
• 🎨 Professional UI: Full-page overlay with modern design
• 📱 Fully Responsive: Works perfectly on all devices

🎨 Customization & Design

• 🚀 Universal: Works with React, Vue, Angular, HTML, WordPress, etc.
• 🎨 Fully Customizable: Colors, position, theme, welcome message
• 🌙 Dark Mode: Built-in dark theme support for all components
• 📱 Mobile-First: Responsive design for all screen sizes
• 🔒 Secure: API key based authentication
• 📦 Lightweight: < 50KB gzipped

---

📸 Screenshots

Chat Interface

Real-time chat interface with instant messaging support

Query Raise Interface

Start a query/chat with support agents

Ticket Raise Interface

Create support tickets with priority and category selection

Ticket Management

View and track all your support tickets

Agent Panel - Query Management

Agent view: All customer queries in one dashboard

Agent Panel - Ticket Management

Agent view: Complete ticket management and response system

---

📦 Installation

Option 1: NPM (for React/Vue/Node projects)

npm install bitmax-crm-widget

Option 2: CDN (for HTML/WordPress/any website)

---

🚀 Quick Start

React / MERN Application

import { ChatCRMWidget } from 'bitmax-crm-widget';

function App() {
  return (
    <>
      {/* Your app content */}
      
      
    
  );
}

HTML / Vanilla JavaScript

  <title>My Website</title>


  
  
  
  
  

---

👤 User Detection (Logged-in vs Guest)

Automatic Guest Users

By default, all visitors are treated as guests:

What your agents see:

• Name: "Guest User"
• Email: Not provided
• Status: Guest

---

Logged-in Users (Pre-fill Data)

Pass user data for logged-in customers:

import { ChatCRMWidget } from 'bitmax-crm-widget';
import { useAuth } from './context/AuthContext'; // Your auth system

function App() {
  const { user, isLoggedIn } = useAuth();

  return (
    
  );
}

What your agents see:

• Name: "John Doe"
• Email: "john@example.com"
• Phone: "+1234567890"
• User ID: "USER_12345"

---

⚙️ Configuration Options

Option	Type	Default	Description
apiKey	string	Required	Your organization's API key
apiUrl	string	Backend URL	Chat CRM backend URL
primaryColor	string	#4F46E5	Brand color (hex)
position	string	bottom-right	Widget position
userData	object	null	Logged-in user data
welcomeMessage	string	Welcome text	First message shown
companyName	string	Support	Header title
autoOpen	boolean	false	Auto-open on load
showNotifications	boolean	true	Show unread badges
playSound	boolean	false	Play notification sound
theme	string	light	light, dark, or auto
zIndex	number	9999	CSS z-index

Position Options

• bottom-right (default)
• bottom-left
• top-right
• top-left

---

🎨 Customization Examples

Custom Branding

Dark Theme

Auto-open with Sound

---

🌐 Platform-Specific Integration

Next.js

// components/ChatWidget.js
'use client'; // For Next.js 13+ App Router

import { ChatCRMWidget } from '@chat-crm/widget';

export default function ChatWidget() {
  return (
    
  );
}

// app/layout.js
import ChatWidget from '@/components/ChatWidget';

export default function RootLayout({ children }) {
  return (
    
      
        {children}
        
      
    
  );
}

Vue.js

<template>
  <div id="app">
    
    
  </div>
</template>

WordPress

Add to your theme's footer.php:

---

📱 Mobile Apps

React Native (WebView)

import { WebView } from 'react-native-webview';

const injectedJS = `
  (function() {
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/bitmax-crm-widget/dist/chat-widget.min.js';
    script.onload = function() {
      ChatCRMWidget.init({
        apiKey: 'your_key',
        userData: ${JSON.stringify(userData)}
      });
    };
    document.body.appendChild(script);
  })();
`;

---

🔐 Security Best Practices

Environment Variables

# .env
VITE_CHAT_API_KEY=your_api_key_here
VITE_CHAT_API_URL=https://chat-crm-backend-7mzo.onrender.com

Domain Restrictions

Contact your Chat CRM admin to whitelist only your domains.

---

🧪 Testing

Development Mode

Check Console

Open browser DevTools → Console:

• ✅ "Connected to Chat CRM" = Working
• ❌ Errors = Check API key and URL

---

📊 What Your Agents See

When a user chats via the widget, your CRM dashboard shows:

Guest User:

📋 New Query
Name: Guest User
Email: Not provided
Message: "How much does it cost?"
Organization: [Your Organization]

Logged-in User:

📋 New Query
Name: John Doe ✅
Email: john@example.com ✅
Phone: +1234567890 ✅
User ID: USER_12345
Message: "Where is my order?"
Organization: [Your Organization]

---

🔄 Updates

Widget auto-updates when you refresh the page (CDN version).

For NPM version:

npm update bitmax-crm-widget

---

📝 License

MIT License - Free to use in commercial projects

---

🆘 Support

• Documentation: https://docs.chat-crm.com
• Issues: https://github.com/your-org/chat-crm-widget/issues
• Email: support@chat-crm.com

---

🎉 That's It!

You now have a professional chat widget supporting both guest users and logged-in customers!

Test it:

1. Add widget to your site
2. Open it and send a message
3. Check your CRM dashboard - message appears there!
4. Reply from CRM - user sees it instantly!

Enjoy! 🚀