Universal chat support widget for any website - secure Widget ID based initialization
npm install @ihoomanai/chat-widgetUniversal chat support widget for any website. Uses secure Widget ID based initialization - no API keys exposed in client code.
``bash`
npm install @ihoomanai/chat-widgetor
yarn add @ihoomanai/chat-widgetor
pnpm add @ihoomanai/chat-widget
`typescript
import { IhoomanChat } from '@ihoomanai/chat-widget';
IhoomanChat.init({
widgetId: 'wgt_your_widget_id', // Get this from your Ihooman dashboard
});
`
`javascript
const { IhoomanChat } = require('@ihoomanai/chat-widget');
IhoomanChat.init({
widgetId: 'wgt_your_widget_id',
});
`
`html`
Or with auto-initialization:
`html`
src="https://cdn.ihooman.ai/widget/latest/chat.min.js"
data-widget-id="wgt_your_widget_id"
>
`typescript`
IhoomanChat.init({
// Required
widgetId: 'wgt_your_widget_id',
// Optional
serverUrl: 'https://api.ihooman.ai', // Custom server URL
theme: 'light', // 'light' | 'dark'
position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
title: 'Chat Support',
subtitle: 'We typically reply within minutes',
welcomeMessage: 'Hi there! 👋 How can we help you today?',
placeholder: 'Type a message...',
primaryColor: '#00aeff',
gradientFrom: '#00aeff',
gradientTo: '#0066ff',
startOpen: false,
persistSession: true,
showTimestamps: true,
showTypingIndicator: true,
enableSounds: true,
enableFileUpload: true,
poweredBy: true,
// Callbacks
onReady: () => console.log('Widget ready'),
onOpen: () => console.log('Widget opened'),
onClose: () => console.log('Widget closed'),
onMessage: (message) => console.log('Message:', message),
onError: (error) => console.error('Error:', error),
});
Initialize the widget with configuration options. Returns a Promise that resolves when the widget is ready.
Open the chat widget window.
Close the chat widget window.
Toggle the chat widget window open/closed.
Destroy the widget and clean up all resources.
Send a message programmatically.
`typescript`
IhoomanChat.sendMessage('Hello, I need help!');
Set user information for personalization.
`typescript`
IhoomanChat.setUser({
name: 'John Doe',
email: 'john@example.com',
metadata: {
plan: 'premium',
},
});
Clear chat history and start a new conversation.
Subscribe to widget events.
`typescript`
IhoomanChat.on('message', (message) => {
console.log('New message:', message);
});
Unsubscribe from widget events.
Get the current widget state.
`typescript`
const state = IhoomanChat.getState();
console.log('Is open:', state.isOpen);
console.log('Messages:', state.messages);
- ready - Widget is initialized and readyopen
- - Widget window openedclose
- - Widget window closedmessage
- - Message sent or receivedconnected
- - WebSocket connecteddisconnected
- - WebSocket disconnectederror
- - An error occurred
This package includes TypeScript type definitions. All types are exported:
`typescript``
import type {
WidgetConfig,
WidgetState,
UserInfo,
Message,
WidgetEvent,
} from '@ihoomanai/chat-widget';
This widget uses Widget ID based initialization, which means:
- ✅ No API keys are exposed in client-side code
- ✅ Domain validation ensures the widget only works on authorized domains
- ✅ All sensitive operations happen server-side
- ✅ Real-time WebSocket communication with automatic reconnection
Get your Widget ID from the Ihooman Dashboard.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
MIT © Ihooman AI