@conversation-explorer/react

Embeddable, white-label conversation viewer as a React component. Renders a Conversation Explorer workspace's conversations — list and threaded detail — with live updates, fully style-isolated in a Shadow DOM.

Install

npm install @conversation-explorer/react
# or: yarn add @conversation-explorer/react

react and react-dom (>=18) are peer dependencies.

Usage

import { ConversationViewer } from '@conversation-explorer/react'

export function Support() {
  return <ConversationViewer workspaceKey="wk_…" />
}

Create the workspace key in your dashboard (Settings → Embed Keys), where you also set the allowed origins and white-label branding (colors, logo, title).

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | workspaceKey | string | — | Public, read-only embed key (wk_…). Required. | | conversationId | string | — | Pin to one conversation. Omit to show the list. | | apiBase | string | https://api.conversationexplorer.com | Override the API origin. | | theme | 'light' \| 'dark' \| 'auto' | from key config | Force a theme mode. | | realtime | boolean | true | Subscribe to live messages over Socket.IO. | | onReady | () => void | — | Fired after the first load. | | onError | (error: Error) => void | — | Fired on a load error. |

Notes

• Style isolation: the viewer renders inside a Shadow DOM, so host-page CSS can't leak in and the widget's CSS can't leak out. Theme it via the dashboard customization (colors map to --ce-* custom properties).
• Security: the wk_ key is public and read-only. Access is gated by the Origin allowlist on the key — add your site's origin in the dashboard.
• Inline alternative: for non-React sites, use the drop-in <script src="…/embed.js" data-workspace-key="wk_…"> snippet (also available from the dashboard).

License

MIT