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

# Install the widget

> Add the chat widget to your website, pass it details your site knows, and send its events to your analytics.

## Add the embed code

**1. Get the App ID**

Open the agent and go to the **Install** tab. Create the widget App ID if there isn't one. Regenerating it revokes
the old ID, so any page still using the old ID stops loading the widget.

**2. Paste the snippet**

Copy the **HTML Embed** snippet from the Install tab and paste it before the closing `</body>` tag on every page
where the widget should appear.

```html theme={}
<!-- Optional: add to <head> to warm up the connection -->
<link rel="preconnect" href="https://julian.11x.ai" />

<voice-widget-11x app-id="YOUR_WIDGET_APP_ID"></voice-widget-11x>

<script src="https://julian.11x.ai/widget/voice-widget.js" async></script>
```

The script loads in the background and doesn't block your page. Use the non-async variant on the Install tab only
if your setup needs the widget initialized before the page finishes loading.

**3. Limit where it loads**

In **Widget > Data & Compliance > Page Rules**, add your domains under **Allowed Origins** (for example
`*.example.com` or `https://www.example.com`). With no origins listed, any site can load the widget. You can also
limit an origin to certain pages, as an exact path (`/help`) or a section (`/help/*`).

> [!TIP]
>
> To try the widget on a live page before installing it, copy the console script from the Install tab and paste it into
> your browser's developer console. It's for testing only.

## Floating or inline

By default the widget is a floating launcher in a corner of the page. To place the chat inside your page instead, turn
on **Inline Embed** in **Widget > Appearance & Layout > Layout & Position** and put the `<voice-widget-11x>` element
where the panel should sit. An inline panel starts open; set **Inline Width** and **Inline Height** as CSS values such
as `100%`, `500px` or `60vh`.

You can make one page inline and keep the rest floating with a [page rule](https://docs.julian.11x.ai/chat/page-rules.md).

## Pass details your site already knows

Attributes on the widget element reach the agent.

```html theme={}
<voice-widget-11x
  app-id="YOUR_WIDGET_APP_ID"
  known-visitor-email="jordan@example.com"
  known-visitor-first-name="Jordan"
  known-visitor-last-name="Lee"
  plan-tier="enterprise"
></voice-widget-11x>
```

| Attribute | What it does |
| - | - |
| `known-visitor-email` | Identifies a logged-in or known visitor. Used for [known-visitor auto-open](https://docs.julian.11x.ai/chat/personalization.md#known-visitor-auto-open) |
| `known-visitor-first-name`, `known-visitor-last-name`, `known-visitor-phone` | Optional details that go with the known visitor |
| Any other attribute | Becomes an input variable, with dashes turned into underscores: `plan-tier` becomes `plan_tier` |

Reference a variable in the agent's instructions as `{{plan_tier}}`, and add it to the agent's input variables so it's
saved with each session. See [Personalization](https://docs.julian.11x.ai/chat/personalization.md) for other places a variable can come from.

## Send widget events to your analytics

The widget records events such as `chat_widget_opened`, `chat_session_started`, `chat_message_sent`,
`chat_nudge_shown`, `chat_nudge_clicked`, `chat_form_submitted`, `chat_calendar_booked` and `chat_link_clicked`.

If your site uses Tealium, add `enable-tealium="true"` to the widget element. Each event is then also sent to
`utag.link`, with the event name in `tealium_event`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.