Embed widget

One script tag. It renders the avatar, handles the microphone, typed questions, captions, the AI badge and the camera, and starts a session only when the visitor begins.

The script tag

<script src="https://cdn.avaclone.ai/v1/widget.js"
        data-agent="pub_…"
        data-mode="launcher"
        data-position="bottom-right"
        data-theme="auto"
        data-accent="#0052FF"
        data-label="Talk to us"
        async></script>

Field	Type	Meaning
data-agent	required	The publishable id from the agent's Embed tab. Public by design: it only works on the domains you listed.
data-mode	launcher \| inline	launcher (default): a round button in a corner that opens a panel; closing the panel shrinks it back into the button. inline: the avatar fills the element named by data-target (give the element a height).
data-target	CSS selector	Where to render in inline mode, e.g. #avatar. Give the element a size; the widget fills it.
data-position	bottom-right \| bottom-left	Corner for the launcher and its panel.
data-theme	auto \| light \| dark	Panel colors. auto follows the visitor's system setting.
data-accent	color	Buttons and the launcher ring. Any CSS color.
data-label	text	The small label under the launcher.
data-api	URL	Only for self-hosted or staging deployments; defaults to https://app.avaclone.ai/api/v1.

What the visitor sees

The avatar’s idle loop plays at once (no minutes used) with the AI avatar badge.
Pressing the microphone or typing a question starts the session. The avatar greets, listens, answers aloud with live lip-sync, and shows captions.
A visitor can interrupt by speaking; the avatar stops and listens.
Silence for the agent’s quiet cut-off ends the session; the idle loop returns. Resume Conversation, or another question, picks the conversation up: the agent remembers what was said and greets the visitor with its return greeting instead of the first one. The same happens after a reload in the same tab; a new tab starts a new conversation.
The agent knows the visitor’s date and time: the widget passes along the browser’s time zone (never a location), so “what time is it?” gets the visitor’s own answer.
Out of minutes or over the live cap, the panel says so politely instead of failing.

The camera

When the agent has vision on, the panel shows a camera button. With the camera on, a small preview tile appears and a notice says nothing is recorded. The widget keeps only the last three seconds of frames in memory. When the visitor refers to something in view (“what is this?”, “read the label”), the agent asks for one still, picks the sharpest recent frame, and answers about it. The agent never describes or identifies people. At most ten stills a minute. Building your own UI instead? The SDK’s sendImage shows the agent an image from any camera, file or canvas; see Vision in the API docs.

Hosted page and iframe

Every published agent has a page at https://app.avaclone.ai/a/<publishable id>: the avatar large and centred, a scrollable log of the visit’s questions and answers under it, and a “Made with AvaClone” line at the foot. Share the link directly, or put it behind a QR code or on a kiosk. To frame it, add ?embed=1: that is the compact panel, edge to edge, sized by the frame:

<iframe src="https://app.avaclone.ai/a/pub_…?embed=1"
        allow="microphone; camera; autoplay"
        style="width:380px;height:620px;border:0;border-radius:24px"></iframe>

The allow attribute matters: without it the browser blocks the microphone inside the frame.

Domains

The widget calls POST /api/v1/sessions/from-embed with the publishable id. The server checks the page’s origin against the embed’s allowed domains and only then issues a session. The hosted page on app.avaclone.ai always works, and so does localhost for development. A listed domain covers its subdomains, so example.com admits www.example.com and shop.example.com. Paste the domain as you have it; a scheme or path is trimmed. If a publishable id leaks, rotate it there; the old one stops at once.

Content Security Policy

If your site sets a CSP, allow:

script-src  https://cdn.avaclone.ai
connect-src https://app.avaclone.ai wss://rt.avaclone.ai
media-src   https://app.avaclone.ai
img-src     https://app.avaclone.ai data: blob:

Appearance from the dashboard

The Embed tab sets captions on or off, the launcher label, theme and accent. They apply when the widget loads without changing the tag; a data- attribute on the tag wins over the dashboard. The “Powered by AvaClone” line shows on the trial and Starter and is removed on Pro and above.

Single-page sites

On a React, Vue or Next.js site the page the widget sits on can go away without a reload. Call window.AvaCloneWidget.destroy() when it does: the microphone and camera turn off, the conversation ends and the widget leaves the page. Add the script tag again to bring it back.

Beyond the widget

For a fully custom UI (your own buttons, layouts, or a kiosk app) use the browser SDK with sessions created by your server through the API.