@ihooman/chat-widget
v1.0.2
Published
iHooman AI chat support widget — thin loader that fetches the latest widget from the server at runtime
Maintainers
ihoomanReadme
@ihooman/chat-widget
iHooman AI chat support widget for any website. This package is a thin runtime loader — it dynamically fetches the latest widget UI from the iHooman API server, so you never need to update the package for UI changes.
Install
npm install @ihooman/chat-widgetUsage
Script Tag (simplest)
No npm needed. Add this to your HTML:
<script
src="https://api.ihooman.ai/widget/chat.min.js"
data-widget-id="YOUR_WIDGET_ID"
data-server-url="https://api.ihooman.ai"
></script>JavaScript / ES Module
import { IhoomanChat } from '@ihooman/chat-widget';
IhoomanChat.init({
widgetId: 'YOUR_WIDGET_ID',
serverUrl: 'https://api.ihooman.ai',
});React
import { useEffect } from 'react';
import { IhoomanChat } from '@ihooman/chat-widget';
function App() {
useEffect(() => {
IhoomanChat.init({
widgetId: 'YOUR_WIDGET_ID',
serverUrl: 'https://api.ihooman.ai',
});
return () => IhoomanChat.destroy();
}, []);
return <div>Your app</div>;
}Next.js
// app/layout.tsx
'use client';
import { useEffect } from 'react';
export default function RootLayout({ children }) {
useEffect(() => {
import('@ihooman/chat-widget').then(({ IhoomanChat }) => {
IhoomanChat.init({
widgetId: 'YOUR_WIDGET_ID',
serverUrl: 'https://api.ihooman.ai',
});
});
}, []);
return <html><body>{children}</body></html>;
}Vue
<script setup>
import { onMounted, onUnmounted } from 'vue';
import { IhoomanChat } from '@ihooman/chat-widget';
onMounted(() => {
IhoomanChat.init({
widgetId: 'YOUR_WIDGET_ID',
serverUrl: 'https://api.ihooman.ai',
});
});
onUnmounted(() => IhoomanChat.destroy());
</script>Configuration
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| widgetId | string | required | Your Widget ID from the dashboard |
| serverUrl | string | https://api.ihooman.ai | API server URL |
| theme | 'light' \| 'dark' | 'dark' | Widget theme |
| position | string | 'bottom-right' | Widget position |
| startOpen | boolean | false | Open widget on page load |
All other configuration (colors, branding, welcome message, preset questions, etc.) is managed from the iHooman Dashboard and applied automatically.
API
IhoomanChat.open(); // Open the widget
IhoomanChat.close(); // Close the widget
IhoomanChat.toggle(); // Toggle open/close
IhoomanChat.destroy(); // Remove the widget
IhoomanChat.sendMessage('Hello'); // Send a message programmatically
IhoomanChat.setUser({ name: 'John', email: '[email protected]' });How It Works
This package is a ~2KB loader. When init() is called, it:
- Loads the full widget script from
{serverUrl}/widget/chat.min.js - The server-hosted script handles all UI rendering, theming, and chat functionality
- Widget config (colors, branding, behavior) is fetched from the server based on your Widget ID
This means UI updates, new features, and bug fixes are deployed server-side — no npm updates needed.
License
MIT — iHooman AI