chat-pro-visitor-widget

Embeddable visitor chat widget — floating button + chat panel — for the chat-pro multi-tenant SaaS chat backend.

• Pre-chat name prompt, persisted per-visitor
• Real-time messaging via Socket.io with auto-reconnect
• 90-minute IndexedDB cache so history reopens instantly
• Built as ESM / CJS / UMD, React 18 as a peer dep (reuses host app's React)

Install

npm install chat-pro-visitor-widget react react-dom

Use inside a React app

import { useEffect } from 'react';
import { initChat } from 'chat-pro-visitor-widget';

export default function App() {
  useEffect(() => {
    const handle = initChat({
      apiKey: 'pk_your_public_api_key',    // from chat-pro /setup
      apiUrl: 'https://your-chat-backend.example.com',
    });
    return () => handle.destroy();
  }, []);
  return <YourApp />;
}

Use on a plain HTML page

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/chat-pro-visitor-widget/dist/index.umd.js"></script>
<script>
  VisitorChatWidget.initChat({
    apiKey: 'pk_your_public_api_key',
    apiUrl: 'https://your-chat-backend.example.com',
  });
</script>

API

initChat(options)

| Option | Required | Default | Notes | |---|---|---|---| | apiKey | ✅ | — | Public API key (pk_…). Safe to ship in browser JS. | | apiUrl | ❌ | http://localhost:4000 | chat-pro backend base URL. | | visitorId | ❌ | from localStorage, else server-issued | Override to resume a specific session. |

License

MIT