# A companion on your website

Put a voice companion on your own site with one script tag: a button in the corner opens a live conversation, with nothing to host.

What you get:

- A button in the corner of your pages. A visitor presses it and talks with
  your companion out loud, in their own language.
- Nothing to host and no key in your pages. The conversation runs on
  companions.eesi.ai inside a small panel, so nothing of the call passes
  through your site.
- Visitors don't sign up or install anything.

## Run it

<Steps>
<Step title="Make the companion">
In the [console](https://platform.eesi.ai), open **Companions**, then **New
companion**. Describe it in a sentence and it drafts the name, the persona,
how it opens a call and its look. Pick its voice and language, talk with it,
then publish it. EESI checks new companions before they go live, usually
within a day.
</Step>
<Step title="List your sites">
On the companion's page, under **On your website**, list the sites it may
appear on, one per line (up to ten, `https://` only; `http://localhost` works
while you try it). Anywhere else, the browser refuses it.
</Step>
<Step title="Paste the tag">
Copy the tag from the same card. It names your companion by its link:

```html
<script src="https://companions.eesi.ai/embed.js" data-companion="your-companion" async></script>
```
</Step>
</Steps>

Your companion answers on your site once EESI has listed it. The microphone
is asked for inside the panel, by companions.eesi.ai. Closing the panel ends
the call.

| Attribute | What it does |
| --- | --- |
| `data-companion` | The companion's link name, as in `companions.eesi.ai/c/your-companion`. Required. |
| `data-label` | The button's words, up to 40 characters. Default "Talk to us". |
| `data-position` | `left` or `right` (the default). |

On a phone, the panel fills the screen.

## Next

<CardGroup cols={2}>
  <Card title="Characters" icon="user" href="/realtime/characters">
    Build the character in code instead, with your own tools and live state.
  </Card>
  <Card title="Client secrets" icon="key" href="/realtime/client-secrets">
    Run the conversation inside your own page, with your own design.
  </Card>
</CardGroup>