> ## Documentation Index
> Fetch the complete documentation index at: https://docs.illumichat.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget Overview

> Embed AI-powered chat on your website

The IllumiChat Widget lets you embed an AI-powered chat interface on any website. Visitors can interact with your custom assistants directly from your site -- no login required.

## Use Cases

<CardGroup cols={2}>
  <Card title="Customer Support" icon="headset">
    Let visitors ask questions and get instant AI-powered answers 24/7.
  </Card>

  <Card title="Lead Generation" icon="user-plus">
    Capture visitor information through the built-in lead form and feed it into your contacts.
  </Card>

  <Card title="Documentation Help" icon="book">
    Connect your docs as knowledge so visitors can search and get answers from your content.
  </Card>

  <Card title="Internal Tools" icon="building">
    Use authenticated mode for internal portals where employees interact with company assistants.
  </Card>
</CardGroup>

## How It Works

<Steps>
  <Step title="Create an assistant">
    Set up an assistant with custom instructions and connect it to your knowledge base.
  </Step>

  <Step title="Add the widget script">
    Drop a single script tag into your website's HTML.
  </Step>

  <Step title="Visitors start chatting">
    A chat bubble appears on your site. Visitors click it to open the chat panel and interact with your assistant.
  </Step>
</Steps>

## Key Features

* **Zero-code installation** -- A single script tag is all you need
* **Customizable appearance** -- Match your brand colors, position, and theme
* **Multiple auth modes** -- Anonymous, authenticated (Auth0), or auto-detect
* **Lead capture** -- Collect visitor information before or during conversations
* **Session persistence** -- Conversations persist across page navigations
* **Domain restrictions** -- Control which domains can load the widget
* **Programmatic API** -- Open, close, send messages, and listen to events from JavaScript
* **Mobile responsive** -- Works on all screen sizes

## Quick Start

Add this script tag to your HTML, replacing `YOUR_ASSISTANT_ID` with your assistant's ID:

```html theme={null}
<script
  src="https://widget.illumichat.com/v1/widget.js"
  data-assistant-id="YOUR_ASSISTANT_ID"
  async
></script>
```

<Tip>
  Find your assistant ID in the assistant's **Settings > Widget** tab in the IllumiChat dashboard.
</Tip>

## Next Steps

<CardGroup cols={2}>
  <Card title="Installation" icon="code" href="/widget/installation">
    Framework-specific installation guides for React, Next.js, WordPress, and more.
  </Card>

  <Card title="Configuration" icon="sliders" href="/widget/configuration">
    Customize appearance, behavior, authentication, and lead capture.
  </Card>

  <Card title="SDK Reference" icon="brackets-curly" href="/widget/sdk-reference">
    Full JavaScript API for programmatic widget control.
  </Card>
</CardGroup>