npm package: @intelli-inc/chat-widget
Description: The AI website widget for your business website
Author: Intelli Holdings, Inc.
Latest version: 1.0.8

# @intelli-inc/chat-widget

A drop-in React component that adds an AI-powered chat widget to your website, powered by the Intelli AI assistant.

## Installation

```bash
npm install @intelli-inc/chat-widget
```

or

```bash
yarn add @intelli-inc/chat-widget
```

or

```bash
pnpm add @intelli-inc/chat-widget
```

## Quick Start

```jsx
import { IntelliWidget } from '@intelli-inc/chat-widget'

<IntelliWidget assistantId="your_assistant_id_here" />
```

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `assistantId` | `string` | Yes | Unique identifier for your Intelli assistant instance |

## Framework Guides

### Next.js (App Router)

The component ships with the `'use client'` directive built in, so it works out of the box in Server Component trees.

#### On every page (recommended)

Add the widget to your root layout so it appears site-wide:

```tsx
// app/layout.tsx
import { IntelliWidget } from '@intelli-inc/chat-widget'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <IntelliWidget assistantId={process.env.NEXT_PUBLIC_ASSISTANT_ID!} />
      </body>
    </html>
  )
}
```

#### On a single page only

If you only want the widget on a specific route, add it to that page instead of the layout:

```tsx
// app/support/page.tsx
import { IntelliWidget } from '@intelli-inc/chat-widget'

export default function SupportPage() {
  return (
    <main>
      <h1>Support</h1>
      <p>Need help? Chat with our AI assistant.</p>
      <IntelliWidget assistantId={process.env.NEXT_PUBLIC_ASSISTANT_ID!} />
    </main>
  )
}
```

#### On a group of pages

Wrap the relevant routes in a [route group](https://nextjs.org/docs/app/building-your-application/routing/route-groups) with its own layout:

```tsx
// app/(with-chat)/layout.tsx
import { IntelliWidget } from '@intelli-inc/chat-widget'

export default function ChatLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <IntelliWidget assistantId={process.env.NEXT_PUBLIC_ASSISTANT_ID!} />
    </>
  )
}
```

Any pages inside `app/(with-chat)/` will show the widget; pages outside will not.

#### Environment variable

Create a `.env.local` file in your project root:

```env
NEXT_PUBLIC_ASSISTANT_ID=your_assistant_id_here
```

### Next.js (Pages Router)

Add the widget to `_app.tsx` for every page, or to a specific page component for a single page.

**Every page:**

```tsx
// pages/_app.tsx
import type { AppProps } from 'next/app'
import { IntelliWidget } from '@intelli-inc/chat-widget'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <IntelliWidget assistantId={process.env.NEXT_PUBLIC_ASSISTANT_ID!} />
    </>
  )
}
```

**Single page:**

```tsx
// pages/support.tsx
import { IntelliWidget } from '@intelli-inc/chat-widget'

export default function SupportPage() {
  return (
    <main>
      <h1>Support</h1>
      <IntelliWidget assistantId={process.env.NEXT_PUBLIC_ASSISTANT_ID!} />
    </main>
  )
}
```

### Vite + React

```tsx
// src/App.tsx
import { IntelliWidget } from '@intelli-inc/chat-widget'

function App() {
  return (
    <>
      {/* your app content */}
      <IntelliWidget assistantId={import.meta.env.VITE_ASSISTANT_ID} />
    </>
  )
}

export default App
```

Create a `.env` file:

```env
VITE_ASSISTANT_ID=your_assistant_id_here
```

> Vite requires the `VITE_` prefix for environment variables to be exposed to client code.

### Create React App

```tsx
// src/App.tsx
import { IntelliWidget } from '@intelli-inc/chat-widget'

function App() {
  return (
    <>
      {/* your app content */}
      <IntelliWidget assistantId={process.env.REACT_APP_ASSISTANT_ID!} />
    </>
  )
}

export default App
```

Create a `.env` file:

```env
REACT_APP_ASSISTANT_ID=your_assistant_id_here
```

> Create React App requires the `REACT_APP_` prefix for environment variables.

### Plain React (no framework)

```tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { IntelliWidget } from '@intelli-inc/chat-widget'

const root = ReactDOM.createRoot(document.getElementById('root')!)
root.render(
  <React.StrictMode>
    <IntelliWidget assistantId="your_assistant_id_here" />
  </React.StrictMode>
)
```

## Non-React / Plain HTML Usage

If you are not using React, use the `createWidgetScripts` helper to generate the required HTML script tags:

```js
import { createWidgetScripts } from '@intelli-inc/chat-widget'

const html = createWidgetScripts('your_assistant_id_here')
// Inject `html` into your page's <body>
```

## TypeScript

The package ships with full TypeScript support. You can import the props type directly:

```tsx
import { IntelliWidget } from '@intelli-inc/chat-widget'
import type { IntelliWidgetProps } from '@intelli-inc/chat-widget'
```

## How It Works

When the component mounts, it dynamically loads the Intelli widget script and initializes the chat interface using your `assistantId`. The widget appears as a chat button in the corner of your website. The component includes duplicate-script protection, so rendering it multiple times won't cause issues.

## Features

- Drop-in React component with zero configuration
- Next.js App Router compatible (`'use client'` included)
- Duplicate script injection protection
- TypeScript support with exported prop types
- Compatible with React 18 and React 19

## License

This package is licensed under the [MIT License](LICENSE).