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

# Website embed

> Put Clara on your website - install the widget package, render the component, and go live in minutes.

Clara lives on your website as a drop-in widget. One package, one component, one agent ID - and she's engaging visitors.

## Before you begin

* A Clara agent ID from your dashboard - create an agent first if you haven't (see [Quickstart](/docs/quickstart))
* A React-based site, or one of the supported [site builders](/docs/embed/site-builders)
* HTTPS on the pages where you embed Clara

## 1. Install the package

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

## 2. Render the widget

Import the stylesheet and the component, then render it with your agent ID:

```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 "Visitor on the pricing page" |

## 3. Personalize per page

The `context` prop is how Clara knows why the visitor is there. Pass different context per page:

```tsx theme={null}
<TrugenChat
  agentId="YOUR_AGENT_ID"
  context="Visitor is viewing the pricing page"
/>
```

* Pricing page: `"Visitor is comparing plans and pricing"`
* Docs page: `"Visitor is reading technical documentation"`
* Post-demo request: `"Visitor just submitted a demo request form"`

Clara uses the context to shape her opening questions and which qualifying questions she emphasizes.

## 4. Go live

1. Open your site in a browser.
2. Start a conversation with Clara and confirm she answers from your knowledge base.
3. Test one qualification flow end to end - questions asked, logged, and a test booking.

<Warning>
  Enable [allowed domains](/docs/capabilities/widget-customization) in production so only your origins can embed the widget.
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="Widget customization" icon="sliders" href="/docs/capabilities/widget-customization">
    Position, colors, branding, and suggested topics - from the dashboard.
  </Card>

  <Card title="Site builders" icon="layer-group" href="/docs/embed/site-builders">
    WordPress, Framer, Shopify, and Wix setup.
  </Card>
</CardGroup>