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

# Install the Widget

Add the RogerIQ script to a website and initialize it with a project ID.

# Install the Widget

Install the widget by loading the hosted script and calling `RogerIQ("init", ...)`.

## Basic Snippet

```html
<script>
  window.RogerIQReadyQueue = window.RogerIQReadyQueue || [];
  window.RogerIQ = function () {
    window.RogerIQReadyQueue.push(Array.from(arguments));
  };
  RogerIQ("init", {
    projectId: "prj_..."
  });
</script>
<script async src="https://api.rogeriq.com/widget/v1/rogeriq.js"></script>
```

## SPA Install

For client-rendered apps, initialize once near the app root.

```tsx
import { useEffect } from "react";

export function RogerWidget() {
  useEffect(() => {
    window.RogerIQ?.("init", {
      projectId: "prj_...",
      theme: "auto"
    });
  }, []);

  return null;
}
```

## Typed SDK

RogerIQ also exposes a typed SDK wrapper around the `window.RogerIQ` command queue.

```ts
import { RogerIQ } from "@rogeriq/widget-sdk";

const widget = RogerIQ.init({ projectId: "prj_..." });
widget.open();
widget.identify({ email: "ada@example.com" });
```

## Verify Install

1. Load a page with the snippet.
2. Confirm the launcher appears.
3. Open the widget.
4. Search for a knowledge article.
5. Send a message and confirm it appears in Inbox.

Do not install the widget with an API key. The widget only needs `projectId` and optional public runtime config.