Skip to main content

Quick Start

Add the following script tag to your HTML, just before the closing </body> tag:
<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

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

Local Development

When developing locally, point the script at your local dev server:
<script
  src="http://localhost:3000/v1/widget.js"
  data-assistant-id="YOUR_ASSISTANT_ID"
  async
></script>
The local widget script is served from the Next.js dev server. Make sure you have run pnpm dev before loading the page.

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

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