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

# Your website UI

> Keep your own card, button, or modal. Click it and the Trikon agent starts speaking. No corner bubble.

Use this when the site already has a marketing card, “Tap to talk” button, or modal. You design the UI. Trikon only handles voice.

Clicking your element asks for the microphone and the agent starts speaking **on that same click**. Nothing extra opens unless you set `data-panel="overlay"`.

## Snippet

Copy **Your website UI** from **Settings → Web Embed**. Keep both the card and the script:

```html theme={null}
<article id="talk-card" data-trikon-talk>
  Tap to talk
</article>
<script
  src="https://voice.trikon.tech/embed.js"
  data-public-key="tvk_pk_YOUR_PUBLIC_KEY"
  data-agent-id="SALES_AGENT_UUID"
  data-ui="custom"
  data-trigger="#talk-card"
  async></script>
```

Point `data-trigger` at your real card, or add `data-trikon-talk` to it.

## JavaScript API

`data-ui="custom"` exposes `window.TrikonVoice` on the host page:

| Method                              | What it does                                         |
| ----------------------------------- | ---------------------------------------------------- |
| `TrikonVoice.start()`               | Request mic and start the agent speaking immediately |
| `TrikonVoice.end()`                 | Hang up                                              |
| `TrikonVoice.open()`                | Show Trikon’s overlay modal                          |
| `TrikonVoice.close()`               | Close the overlay and end the call                   |
| `TrikonVoice.bind('#selector')`     | Treat extra elements as tap-to-talk targets          |
| `TrikonVoice.on('status', handler)` | `connecting`, `connected`, `disconnected`, `error`   |

```html theme={null}
<button type="button" id="open-demo">Talk to Arjun</button>
<script
  src="https://voice.trikon.tech/embed.js"
  data-public-key="tvk_pk_YOUR_PUBLIC_KEY"
  data-agent-id="SALES_AGENT_UUID"
  data-ui="custom"
  data-panel="overlay"
  async></script>
<script>
  document.getElementById('open-demo').addEventListener('click', function () {
    TrikonVoice.start();
  });
  TrikonVoice.on('status', function (event) {
    console.log('voice status', event.status);
  });
</script>
```

`data-panel="overlay"` shows a closeable modal while the call runs. Omit it to stay on your card.

## Advanced: session token only

If you are building your own player instead of using the script, call `POST /api/embed/session` from the **allowed website**:

<Note>
  `POST /api/embed/session`
</Note>

<ParamField body="publicKey" type="string" required>
  Your public widget key (`tvk_pk_…`) from **Settings → Web Embed**.
</ParamField>

<ParamField body="agentId" type="string" required>
  The UUID of the agent that should handle the call.
</ParamField>

<ParamField body="parentOrigin" type="string" required>
  The exact URL origin (e.g. `https://www.acme.com`) of the website hosting the session. Must match an allowlisted domain.
</ParamField>

```bash theme={null}
curl -X POST https://voice.trikon.tech/api/embed/session \
  -H "Content-Type: application/json" \
  -H "Origin: https://www.acme.com" \
  -d '{
    "publicKey": "tvk_pk_YOUR_PUBLIC_KEY",
    "agentId": "8f2c1d34-5b6a-4c7e-9f10-2a3b4c5d6e7f",
    "parentOrigin": "https://www.acme.com"
  }'
```

<ResponseField name="token" type="string">
  A short-lived JWT used to authenticate the WebSocket at `/ws/live?token=…&parentOrigin=…`.
</ResponseField>

Prefer the script snippet unless you are building a custom audio player.