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

# Agent widget

> The drop-in widget that puts Clara on your website - chat, voice, or avatar experiences from a single component.

Every Clara agent ships with a drop-in widget: a React component that renders Clara on your website with a single component and an `agentId`. Appearance, position, branding, and behavior are configured on the agent in your Clara dashboard - change them once and every embed updates on the next session.

## Experience modes

One agent can offer different conversation experiences:

| Mode           | What visitors see                                    | Best for                                     |
| -------------- | ---------------------------------------------------- | -------------------------------------------- |
| **Chat**       | Text conversation                                    | Fast, low-friction inbound engagement        |
| **Voice-only** | Clara's voice with a pulsing visualizer              | Fast, phone-like conversations without video |
| **Talk**       | Full avatar conversation - Clara sees, hears, speaks | Premium, human-feeling product experiences   |
| **Dual**       | Both a Talk and a Chat entry point                   | Let buyers choose how they engage            |

See [Voice-only mode](/docs/capabilities/voice-only) and the [avatar gallery](/docs/capabilities/avatar-gallery) for the visual side.

## Installing the widget

```bash theme={null}
npm install @truviz/widget
```

```tsx theme={null}
import "@truviz/widget/style.css";
import { TrugenChat } from "@truviz/widget";

export default function TrugenWidget() {
  return (
    <TrugenChat
      agentId="YOUR_AGENT_ID"
      userName="USER_NAME"
      userId="USER_ID"
      context="CONTEXT"
    />
  );
}
```

| Prop       | Required | Purpose                                                            |
| ---------- | -------- | ------------------------------------------------------------------ |
| `agentId`  | Yes      | Your Clara agent ID from the dashboard                             |
| `userName` | No       | Display name Clara addresses the visitor by                        |
| `userId`   | No       | Internal user ID attached to the conversation record for analytics |
| `context`  | No       | Free-form session context, for example the page the visitor is on  |

Full installation steps, including site builders, in [Website embed](/docs/embed/website-embed).

## What you can configure

Widget appearance and behavior are set on the agent in the dashboard:

* **Position** - where the widget floats on the page
* **Colors and theme** - solid or gradient accents, dark or light default
* **Branding** - company name, logo, agent display name
* **Buttons and text** - custom call-to-action labels
* **Suggested topics** - starter prompts for visitors
* **Allowed domains** - restrict which origins can embed the widget

See [Widget customization](/docs/capabilities/widget-customization) for the full reference.

<Note>
  Browser support: Chrome 90+, Edge 90+, Firefox 88+, Safari 14+. HTTPS is required for camera and microphone sessions.
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="Widget customization" icon="sliders" href="/docs/capabilities/widget-customization">
    Position, colors, branding, and domain restrictions.
  </Card>

  <Card title="Website embed" icon="browser" href="/docs/embed/website-embed">
    Step-by-step installation on any site.
  </Card>
</CardGroup>