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

# Installation

> Add the IllumiChat widget to your website

## Quick Start

Add the following script tag to your HTML, just before the closing `</body>` tag:

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

Replace `YOUR_ASSISTANT_ID` with the assistant ID from your IllumiChat dashboard (**Settings > Widget** on the assistant page).

## Framework Guides

<CodeGroup>
  ```html Plain HTML theme={null}
  <!DOCTYPE html>
  <html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- Your page content -->

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

  ```tsx React / Next.js theme={null}
  // components/IllumiChatWidget.tsx
  'use client';

  import Script from 'next/script';

  export function IllumiChatWidget() {
    return (
      <Script
        src="https://widget.illumichat.com/v1/widget.js"
        data-assistant-id="YOUR_ASSISTANT_ID"
        strategy="lazyOnload"
      />
    );
  }

  // Then in your layout:
  // import { IllumiChatWidget } from '@/components/IllumiChatWidget';
  // <IllumiChatWidget />
  ```

  ```php WordPress theme={null}
  <!-- Add to your theme's footer.php, before </body> -->
  <script
    src="https://widget.illumichat.com/v1/widget.js"
    data-assistant-id="YOUR_ASSISTANT_ID"
    async
  ></script>
  ```

  ```vue Vue.js theme={null}
  <template>
    <div id="app">
      <!-- Your app content -->
    </div>
  </template>

  <script>
  export default {
    mounted() {
      if (!document.getElementById('illumichat-widget')) {
        const script = document.createElement('script');
        script.id = 'illumichat-widget';
        script.src = 'https://widget.illumichat.com/v1/widget.js';
        script.async = true;
        script.dataset.assistantId = 'YOUR_ASSISTANT_ID';
        document.body.appendChild(script);
      }
    },
    beforeUnmount() {
      const el = document.getElementById('illumichat-widget');
      if (el) el.remove();
    }
  };
  </script>
  ```
</CodeGroup>

## Local Development

When developing locally, point the script at your local dev server:

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

<Note>
  The local widget script is served from the Next.js dev server. Make sure you have run `pnpm dev` before loading the page.
</Note>

## Domain Restrictions

For security, widgets can be restricted to load only on specific domains. If domain restrictions are enabled and your domain is not on the list, the widget will not render.

**To configure allowed domains:**

1. Open your assistant's **Settings** page
2. Go to the **Widget** tab
3. Under **Allowed Domains**, add each domain where the widget should work
4. Save your changes

<Warning>
  If you use domain restrictions, add **both** `www.example.com` and `example.com` if your site is accessible at both addresses. Also add `localhost` for local development.
</Warning>

## Verifying the Installation

After adding the script tag:

1. Open your page in a browser
2. Look for the chat bubble in the bottom-right corner
3. Click it to open the chat panel
4. Send a test message to confirm the assistant responds

If the widget does not appear, open your browser's developer console (F12) and check for error messages. Common issues include an incorrect assistant ID, domain restrictions, or a network error loading the script.

## Next Steps

<CardGroup cols={2}>
  <Card title="Configuration" icon="sliders" href="/widget/configuration">
    Customize the widget's appearance, behavior, and authentication.
  </Card>

  <Card title="SDK Reference" icon="brackets-curly" href="/widget/sdk-reference">
    Use the JavaScript API to control the widget programmatically.
  </Card>
</CardGroup>
