@intelli-inc/chat-widget
v1.0.8
Published
The AI website widget for your business website
Readme
@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
npm install @intelli-inc/chat-widgetor
yarn add @intelli-inc/chat-widgetor
pnpm add @intelli-inc/chat-widgetQuick Start
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:
// 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:
// 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 with its own layout:
// 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:
NEXT_PUBLIC_ASSISTANT_ID=your_assistant_id_hereNext.js (Pages Router)
Add the widget to _app.tsx for every page, or to a specific page component for a single page.
Every page:
// 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:
// 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
// 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 AppCreate a .env file:
VITE_ASSISTANT_ID=your_assistant_id_hereVite requires the
VITE_prefix for environment variables to be exposed to client code.
Create React App
// 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 AppCreate a .env file:
REACT_APP_ASSISTANT_ID=your_assistant_id_hereCreate React App requires the
REACT_APP_prefix for environment variables.
Plain React (no framework)
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:
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:
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.