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

# Website embed

> Put a Trikon Voice agent on your website with a public widget key. Visitors talk in the browser. They never sign in to Trikon.

Website embed is **not** the Developer API. The secret API key starts **phone calls** from your server. The public widget key starts **in-browser voice** on sites you allow.

| Credential                         | Where it lives               | What it is for                                        |
| ---------------------------------- | ---------------------------- | ----------------------------------------------------- |
| **Public widget key** (`tvk_pk_…`) | **Settings → Web Embed**     | Safe in HTML. Powers the website widget.              |
| **Secret API key** (`tvk_…`)       | **Settings → Developer API** | Server-side only. Starts billed outbound phone calls. |

<Warning>
  Do not paste the Developer API key into a website, WordPress snippet, or frontend JavaScript. Anyone who can view the page could place billed phone calls. Website install uses the public widget key only.
</Warning>

<CardGroup cols={2}>
  <Card title="Corner bubble" icon="comment" href="/embed/corner-bubble">
    Default launcher. A mic button in the bottom corner. Click it to open the agent.
  </Card>

  <Card title="Your website UI" icon="browser" href="/embed/custom-website-ui">
    Keep your own card or button. Click it and the agent starts speaking.
  </Card>

  <Card title="Ready-made card" icon="id-card" href="/embed/ready-made-card">
    Drop a tap-to-talk card anywhere on the page. It stays there. It does not follow scroll.
  </Card>
</CardGroup>

## Setup in the dashboard

<Tip>
  **Settings → Web Embed** generates the exact snippet. You do not need to write it by hand.
</Tip>

1. Open **Settings → Web Embed**.
2. Turn **Enable website embed** on (Pro plan).
3. Click **Generate key** and copy the `tvk_pk_…` value.
4. Add **1 entry per website domain** (e.g. `https://www.acme.com`) to authorize it, and pick a **Default Fallback Agent**. Localhost is always allowed for testing.
5. Copy the snippet for **Corner bubble**, **Your website UI**, or **Ready-made card**.

The same public widget key is used on every site. To run different agents on the same site, pass `data-agent-id`. If you omit it, the default fallback agent for that domain is used. Requested agents must belong to your workspace or the session is rejected.

Existing installs that only set `data-public-key`, `data-agent-id`, and `data-position` keep the corner bubble. Custom UI and the ready-made card are opt-in with `data-ui`.

## Calls, billing, and webhooks

Conversations are stored in **Call Logs** with origin `web embed`.

Billing uses those call logs the same way as other voice minutes (duration and tokens). If the workspace has a webhook URL under **Settings → Developer API**, the usual post-call webhook still fires. The payload includes `origin: "web embed"`.

## Multiple websites

* **One domain, many agents:** add **1 domain entry** (e.g. `https://www.acme.com`). Pass `data-agent-id="AGENT_UUID"` on each snippet. If it is omitted, the Default Fallback Agent for that domain is used.
* **Many domains:** add an entry per domain under **Settings → Web Embed**.
* Agents must belong to your workspace. Other workspaces’ IDs are rejected with `403 Forbidden`.

## Domain allowlist

The public key only works on origins you list. Use:

* A full origin: `https://www.acme.com`
* A host: `acme.com`
* A wildcard subdomain: `*.acme.com`

If a site is missing from the list, the widget refuses to start.

## Script attributes

| Attribute         | Default           | Purpose                                                                                                    |
| ----------------- | ----------------- | ---------------------------------------------------------------------------------------------------------- |
| `data-public-key` | required          | Public widget key                                                                                          |
| `data-agent-id`   | workspace default | Agent UUID                                                                                                 |
| `data-position`   | `right`           | Corner bubble only: `left` or `right`                                                                      |
| `data-ui`         | `bubble`          | `bubble`, `custom` (your UI), or `card` (hosted tap-to-talk card)                                          |
| `data-trigger`    | —                 | CSS selector. Clicks start speech (`custom` UI)                                                            |
| `data-container`  | —                 | Element that receives the hosted card                                                                      |
| `data-panel`      | `none`            | Set `overlay` only if you want Trikon’s modal. Custom UI and the ready-made card stay in place by default. |

## Regenerating the widget key

**Regenerate key** on **Web Embed** replaces the stored key. Update `data-public-key` on every website that embeds the agent.