bitmax-crm-widget

v1.2.45

Published

2 days ago

Universal Chat CRM Widget with Help & Support and Ticketing System - Works on any website (React, Vue, HTML, WordPress, etc.)

0High
0Medium
0Low

armanansari1218

chat widget crm customer-support live-chat react vue angular websocket socket.io

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)

<script src="https://unpkg.com/bitmax-crm-widget/dist/chat-widget.min.js"></script>

🚀 Quick Start

React / MERN Application

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

function App() {
  return (
    <>
      {/* Your app content */}
      
      <ChatCRMWidget 
        apiKey="your_api_key_here"
        apiUrl="https://chat-crm-backend-7mzo.onrender.com"
        primaryColor="#4F46E5"
      />
    </>
  );
}

HTML / Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->
  
  <!-- Chat Widget -->
  <script src="https://unpkg.com/bitmax-crm-widget/dist/chat-widget.min.js"></script>
  <script>
    ChatCRMWidget.init({
      apiKey: 'your_api_key_here',
      apiUrl: 'https://chat-crm-backend-7mzo.onrender.com',
      primaryColor: '#4F46E5'
    });
  </script>
</body>
</html>

👤 User Detection (Logged-in vs Guest)

Automatic Guest Users

By default, all visitors are treated as guests:

<ChatCRMWidget apiKey="your_key" />

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 (
    <ChatCRMWidget 
      apiKey="your_api_key"
      userData={isLoggedIn ? {
        name: user.name,
        email: user.email,
        phone: user.phone,
        userId: user.id // Your internal user ID
      } : null}
    />
  );
}

What your agents see:

Name: "John Doe"
Email: "[email protected]"
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

<ChatCRMWidget 
  apiKey="bitmax_key"
  primaryColor="#FF6B35"
  companyName="Bitmax Support"
  welcomeMessage="👋 Hi! Need help with Bitmax?"
  position="bottom-left"
/>

Dark Theme

<ChatCRMWidget 
  apiKey="your_key"
  theme="dark"
  primaryColor="#8B5CF6"
/>

Auto-open with Sound

<ChatCRMWidget 
  apiKey="your_key"
  autoOpen={true}
  playSound={true}
  showNotifications={true}
/>

🌐 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 (
    <ChatCRMWidget 
      apiKey={process.env.NEXT_PUBLIC_CHAT_API_KEY}
    />
  );
}

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ChatWidget />
      </body>
    </html>
  );
}

Vue.js

<template>
  <div id="app">
    <!-- Your app content -->
    <ChatCRMWidget 
      :apiKey="chatApiKey"
      :userData="currentUser"
    />
  </div>
</template>

<script>
import { ChatCRMWidget } from 'bitmax-crm-widget';

export default {
  components: { ChatCRMWidget },
  data() {
    return {
      chatApiKey: process.env.VUE_APP_CHAT_KEY,
      currentUser: null
    };
  }
};
</script>

WordPress

Add to your theme's footer.php:

<!-- Before </body> tag -->
<script src="https://unpkg.com/bitmax-crm-widget/dist/chat-widget.min.js"></script>
<script>
  ChatCRMWidget.init({
    apiKey: '<?php echo get_option('chat_crm_api_key'); ?>',
    <?php if (is_user_logged_in()): ?>
      userData: {
        name: '<?php echo wp_get_current_user()->display_name; ?>',
        email: '<?php echo wp_get_current_user()->user_email; ?>',
        userId: '<?php echo get_current_user_id(); ?>'
      }
    <?php endif; ?>
  });
</script>

📱 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);
  })();
`;

<WebView 
  source={{ uri: 'https://yourwebsite.com' }}
  injectedJavaScript={injectedJS}
/>

🔐 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

<ChatCRMWidget 
  apiKey={import.meta.env.VITE_CHAT_API_KEY}
  apiUrl={import.meta.env.VITE_CHAT_API_URL}
/>

Domain Restrictions

Contact your Chat CRM admin to whitelist only your domains.

🧪 Testing

Development Mode

<ChatCRMWidget 
  apiKey="test_key"
  apiUrl="http://localhost:5000"
  autoOpen={true} // Opens automatically for testing
/>

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: [email protected] ✅
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: [email protected]

🎉 That's It!

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

Test it:

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

Enjoy! 🚀