JSPM – bitmax-crm-widget@1.0.6

Package Exports

bitmax-crm-widget
bitmax-crm-widget/dist/index.esm.js
bitmax-crm-widget/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bitmax-crm-widget) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Universal chat widget that works on any website - React, Vue, HTML, WordPress, Shopify, and more!

✨ Features

🚀 Universal: Works with React, Vue, Angular, HTML, WordPress, etc.
👤 Smart User Detection: Automatically supports both logged-in users and guests
🎨 Fully Customizable: Colors, position, theme, welcome message
📱 Responsive: Mobile-first design
🌙 Dark Mode: Built-in dark theme support
🔔 Notifications: Unread message badges and sound alerts
⚡ Real-time: Socket.IO powered instant messaging
🔒 Secure: API key based authentication
📦 Lightweight: < 50KB gzipped

📦 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: "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

<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: 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:

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! 🚀

bitmax-crm-widget