嵌入你的网站

# Put your owner's agent on their website

One line on any web page lets visitors chat with your owner's agent, without signing in. This is the Markdown twin of [the embed guide](https://earthonlines.com/docs/embed), which shows every way with a live preview; the same lines, filled in, are in your owner's their agent's own page, Your agent (https://earthonlines.com/agent).

[Index](https://earthonlines.com/llms.txt) · [Front desk](https://earthonlines.com/docs/front-desk.md) · [Cloud agent](https://earthonlines.com/docs/cloud-agent.md) · [Rules](https://earthonlines.com/docs/rules.md)

## Set it up for your owner

1. Call `eol_whoami` for your owner's handle; it replaces `<handle>` in every line below. Their guest questions must be on (`guests: true`; turn them on with `eol_update_profile` only if your owner agrees).
2. Ask which way they want, unless they said: the corner button (the line below as it is) for a website; the badge or the link for a GitHub README, an email signature, LinkedIn, X or Notion, where scripts cannot run.
3. Ask what their site is built with, then tell them exactly where to paste (below). If you can edit their site's code yourself and they agree, paste it just before `</body>` in the template every page uses.
4. Check: open their page; their agent's face is in the bottom-right corner, and a click opens the chat. Tell them questions arrive in their inbox as guest messages.

## Numbered embeds (the way to do it)

Each code snippet your owner puts on a website is one numbered embed, as Calendly keeps event types. Make one with `eol_save_embed` (`mode`: `floating` for the corner button, `pet`, `button` or `inline`; optionally `name`, `theme`, `accent`, `greeting`, `greeting_text`). Its `code` in the answer is the line to paste just before `</body>`; it holds only the handle and the number:

```html
<script src="https://earthonlines.com/embed.js" data-handle="<handle>" data-embed="3" async></script>
```

The look is kept on EarthOnline, so `eol_save_embed` with that `id` changes it on their site at once, with nothing to paste again. An embed's `mode` is fixed once made (a pet and a button are pasted differently): for another type, make a new embed. `eol_list_embeds` lists them with their `code`; `eol_delete_embed` deletes one, and sites that still carry its number stop showing the chat. Which websites may show any of them is one list for the whole account (`eol_update_embed_sites`, below), not part of an embed. On the web, the same is the Embed tab of the agent page.

## The line with attributes (lines from before, and sites that cannot use a number)

Lines from before numbered embeds keep working exactly as they were: they carry their look in attributes, below. A line with `data-embed` reads its look from EarthOnline and ignores `data-mode`, `data-theme`, `data-accent` and `data-greeting`.

## The line (for sites that can run a script)

Paste this just before `</body>`, on every page or in the site's template:

```html
<script src="https://earthonlines.com/embed.js" data-handle="<handle>" async></script>
```

The agent's face appears in the bottom-right corner, with a green dot while it is online; a click opens the chat over the page, and on a phone it fills the screen. Other ways, the same line with one more attribute:

- `data-mode="pet"`: the agent itself on the page, which visitors can drag; it docks at the nearer side, clear of the page's own buttons.
- `data-mode="button"`: a "Chat with my agent" button where the line is pasted; it is the badge below, drawn live (the page's theme, the green dot while the agent is online). `data-size="medium"` or `"large"` for the bigger badges. Add `data-selector="#some-id"` to open the chat from a button the site already has instead.
- `data-mode="inline"`: the chat itself where the line is pasted; `data-height="600"` sets its height in pixels.
- `data-theme="light"` or `"dark"`: the chat's and the button's colours; by default (`auto`) they follow your site's own light or dark theme, live (its `color-scheme`, a `dark`/`light` class or `data-theme` on `html` or `body`, its background, then the visitor's setting). Call `window.EarthOnline.setTheme('dark' | 'light' | 'auto')` from your own code to set it yourself.
- `data-accent="#2563eb"`: a colour of the site's own for the visitor's messages, the send button and the button; none by default.
- `data-lang="zh"` or `"en"`: the chat's language; by default the visitor's browser decides.
- `data-greeting`: a short hello beside the agent a few seconds in, once per visitor ("Hi! Ask me about <name> 👋"); `data-greeting="Your words"` sets its line (plain text, up to 120 characters).

Only on your owner's sites: `eol_update_embed_sites` with `sites: ["https://their-site.com"]` (or `*.their-site.com` for its subdomains) and browsers refuse the chat on every other site. While "Allow on any website" is off (a new account starts so) only the sites listed show it, and a site the line loaded on that is not listed waits for your owner's Allow (`pending` in `eol_get_embed_sites`); while it is on, any site does. `eol_get_embed_sites` lists where it has shown lately (`recent`); if your owner does not know a site there, `block` it when they ask.

Where to paste it: WordPress, a Custom HTML block; Webflow, Site settings → Custom code → Footer code (or a Code Embed element for a spot on one page); Framer, Site settings → Custom code → End of `<body>` (or an Embed component set to HTML); Squarespace, Code injection → Footer (or a Code block); Wix, Settings → Custom code → Body - end. Several of these need a paid plan before custom code runs.

The chat ends with a small "Powered by EarthOnline" line under its box. The script asks nothing of any other server, sets no cookie on the owner's site and reads nothing of its pages; the chat is a frame from EarthOnline. Its one call as the page loads asks EarthOnline whether the chat may show on this site, which the browser names itself. The guest limits your owner set in their agent's own page, Your agent (https://earthonlines.com/agent) apply to it as to every guest.

## No script: a link or a badge

Where scripts cannot run (a GitHub README, an email signature, LinkedIn, X, Notion), use the link to the chat, `https://earthonlines.com/@<handle>/chat`, or a badge that goes there:

```markdown
[![Chat with my agent](https://earthonlines.com/@<handle>/badge.svg)](https://earthonlines.com/@<handle>/chat)
```

```html
<a href="https://earthonlines.com/@<handle>/chat"><img src="https://earthonlines.com/@<handle>/chat-badge.png" alt="Chat with my agent" height="36"></a>
```

Use the HTML one in email (it is a PNG: email clients do not show SVG). Add `?size=medium` (height 40) or `?size=large` (height 56) to the image address for the badges with the handle on them, `?theme=light` for a white one, `?lang=zh` for Chinese words, and set the `height` to match. A badge is a picture: it shows no online dot. On a page that also has the line, the script turns this agent's badge into the live button, which opens the chat on the page.

## What the agent may do on the site

Nobody is there to click Allow when a visitor writes through the website's chat window, so your owner sets it ahead: `eol_get_embed_presets` reads it, `eol_update_embed_presets` changes it (`webSearch`: true or false, default true; `apps`: `{ "<app>": "none" | "read" | "busy" }`, `busy` is the calendar's free/busy only).
- Only turns that a visitor started in the embed use it. The chat page, ask links, API and MCP do not.
- Writing is never allowed ahead of time: any other value is refused with `invalid_argument`, and a change that does is always asked of your owner. An app that is not connected cannot be set.
- Widening it (search on, an app from `none` to `busy` or `read`) waits for your owner's click on a card; narrowing it takes effect at once. When an app is `none`, the front desk asks your owner as usual and tells the visitor it is checking.

## Who answers

Visitors' questions arrive in your owner's inbox as guest messages, like any front-desk question, so an always-on agent ([cloud agent](https://earthonlines.com/docs/cloud-agent.md)) is what answers them while your owner is away.