---
title: "Embedding"
description: "The embed snippet, sizing, and how it inherits your accent."
source: https://hiy.ai/docs/embed
---

# Embedding

Put the same chat inside your own site. Copy the snippet from **Channels**.

## The snippet

It's one line, and it's the one **Channels → Embedded chat bar → Install** copies:

```html
<script src="https://hiy.ai/embed.js" data-twin="your-name" data-mode="bar" async></script>
```

The loader adds a compact bar at the bottom of the host page and touches nothing
else — no framework to clash with, no stylesheet in or out. A restricted agent
needs its token here too: add `data-token="…"`,
minted on your own server. That token is **readable by the visitor, and it rides
in a URL** — the loader puts it in the frame's address, so it reaches browser
history, the `Referer` on outbound links, and any log or analytics that records
URLs. If your token carries facts about the person asking, nothing may go in it
that they are not entitled to see about themselves; see
[attested attributes](/docs/developers#attested-attributes). The minting recipes
for [Next.js, Node.js, WordPress and static hosts](/docs/developers#recipes-for-the-inline-embed)
emit the plain snippet, which renders the agent as a block in the page; add
`data-mode="bar"` to any of them to get the ask bar instead.

You can write the iframe yourself instead — `/embed/your-name` is a real page:

```html
<iframe
  src="https://hiy.ai/embed/your-name"
  width="100%"
  height="600"
  style="border:0;border-radius:16px"
  title="Ask my AI twin"
></iframe>
```

Add `?token=…` for a restricted agent. Publish copies the script; the iframe is
the same panel with the sizing left to you.

## Sizing

These numbers are for the iframe you write yourself. Give it at least `500px` of height — below that the conversation feels cramped. `600–700px` suits most pages. Width is best left at `100%` so it adapts to your layout.

The script loader takes no instruction: it sizes itself at 520px tall, full
width up to a 680px cap, centred. There's no attribute for either and no
setting in the dashboard — if you need a different size, write the iframe.

The signed-in **Channels** workspace is where you choose the reusable template
for the Chat widget or inline chat and preview its visitor experience. It does
not currently add arbitrary loader attributes: position, auto-open and custom
iframe sizing remain host/embed concerns, so the console does not offer
settings that this loader cannot consume.

## How it looks

The embed is deliberately **neutral**, not the wallpaper you see elsewhere on hiy: it sits inside *your* design, so it shouldn't fight it. It follows whoever's looking at it — their own device's light or dark setting, the same signal most sites already use to theme themselves — rather than any choice made on hiy.ai. That holds even if you, the site owner, have picked dark mode on hiy.ai yourself: it doesn't carry over. It picks up the accent colour you chose in Voice & rules either way.

## What it includes

The full chat, with citations and honest gaps intact, plus the AI disclosure. Follow-up requests work in the embed too, unless you've turned them off.

## Framing

The embed route is the one part of hiy that's meant to be iframed, and it's configured to allow it. The rest of the app isn't.

## The embedded chat bar

The bar stays at the bottom of the host page and opens the same agent
experience as the widget. You can use the generated snippet as-is:

```html
<script src="https://hiy.ai/embed.js" data-twin="your-name" data-mode="bar" async></script>
```

The bar is available on every plan and is intentionally small enough to stay
out of the way on a phone.

## The floating bubble

Add `data-mode="bubble"` to that script tag and instead of sitting in the
page, your twin floats bottom-right as a chat button — the pattern people know
from support widgets.

```html
<script src="https://hiy.ai/embed.js" data-twin="your-name" data-mode="bubble" async></script>
```

Nothing loads until a visitor actually opens it, so the bubble costs your page
none of its speed. On a phone it opens near-full-screen rather than as a tiny
porthole. Esc closes it, and tapping the button again does the same — the
bubble is never keyboard-only.

One deliberate exception, worth knowing before you read it as a bug: if a
visitor has a **booking sheet** open inside the conversation, the first Esc
closes that sheet and the second closes the bubble. One press used to do both
and take the conversation off screen with it. See [what a
visitor sees](/docs/for-visitors) for the visitor's side of it.

**Note:** The bubble is part of **Founding**. On the Free plan the snippet loads but the
panel explains it isn't switched on rather than opening — so pasting it early
won't quietly do nothing. The embedded chat bar above works on every plan.

## The credit line

Your embed carries a small "Powered by hiy.ai" line, beside the Report link and
the "Processed by hiy.ai · Privacy" pointer. On the **chat bar** that row sits
along the bar's own bottom edge, readable before anyone asks anything; under the
**bubble** and the **inline block** it sits beneath the widget. On **Founding**
the credit comes off, along with the word "hiy" in the chat itself.

What stays either way: the Report link, the processed-by pointer, the AI
disclosure, and the citations behind grounded answers. No plan removes those —
see [The hiy.ai credit](/docs/attribution).