npm package: @ihooman/chat-widget
Description: iHooman AI chat support widget — thin loader that fetches the latest widget from the server at runtime
Author: iHooman AI
Latest version: 1.0.2

# @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

```bash
npm install @ihooman/chat-widget
```

## Usage

### Script Tag (simplest)

No npm needed. Add this to your HTML:

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

```js
import { IhoomanChat } from '@ihooman/chat-widget';

IhoomanChat.init({
  widgetId: 'YOUR_WIDGET_ID',
  serverUrl: 'https://api.ihooman.ai',
});
```

### React

```jsx
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

```jsx
// 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

```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](https://dashboard.ihooman.ai) and applied automatically.

## API

```js
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: 'john@example.com' });
```

## How It Works

This package is a ~2KB loader. When `init()` is called, it:

1. Loads the full widget script from `{serverUrl}/widget/chat.min.js`
2. The server-hosted script handles all UI rendering, theming, and chat functionality
3. 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