Beyond Unreal

Web & embed

The same character you build for Unreal also runs in the browser.

You spent time giving your character a voice, a personality, a knowledge base, and a face. That work should not stay locked inside a desktop build. IAMX lets you drop the exact same character — same brain, same voice, same lip sync — onto any web page with a single line of embed code. No 3D pipeline to ship, no download for your visitors, no separate configuration to maintain. The avatar renders natively in the browser, streams live voice, and talks to your users the moment the page loads.

Everything is driven from the panel at iamx.live. The character you configure there is the source of truth. Whether a person meets it on a kiosk running Unreal, or on a marketing page in Chrome on their phone, they are talking to the same entity — with the same instructions, the same tools, and the same memory. Change the greeting in the panel and it changes everywhere at once.

One character, many surfaces. The Unreal build and the web embed are two windows onto the same cloud character — not two things you build twice.

How to add it

Adding a web avatar is a copy-and-paste job. You place a small snippet on your page where you want the avatar to appear, and IAMX takes care of the rest — rendering, audio, connection, and the conversation loop. There is no build step and no framework requirement. It works on a plain static HTML page just as well as inside React, Vue, or a CMS block.

1. Get the character's connection ID

Open your character in the panel and enable the Web surface. The panel shows a connection ID for that character — this is the single value that links a surface to a character. Copy it. You will paste it into the embed snippet below.

2. Paste the embed snippet

Drop this where you want the avatar to render. The script tag boots the runtime; the element with your connection ID tells it which character to load.

<!-- Place this where the avatar should appear -->
<div id="iamx-avatar" data-character="YOUR_CONNECTION_ID"></div>

<!-- Load the IAMX web runtime once, near the end of the page -->
<script src="https://iamxlive.com/embed.js" async></script>

That is the whole integration. The data-character attribute carries the connection ID you copied from the panel. When the runtime loads, it finds the target element, renders the avatar into it, and opens the live connection to your character in the cloud.

Prefer an isolated frame? The same character is available as an inline embed, which keeps the runtime fully sandboxed from the rest of your page:

<iframe
  src="https://iamxlive.com/embed/YOUR_CONNECTION_ID"
  allow="microphone; autoplay"
  style="width:420px; height:640px; border:0; border-radius:16px">
</iframe>

The avatar needs microphone permission to hold a voice conversation, and autoplay permission to speak. If you use the iframe form, include allow="microphone; autoplay" or the browser will block audio input and output.

3. Position and size it

The avatar fills whatever container you give it, so layout is ordinary CSS. Common placements:

Inline block

A sized div inside your content flow — good for a product page hero or a docs sidebar.

Floating widget

A fixed-position corner bubble that follows the user as they scroll, like a live concierge.

Full surface

A full-height panel or dedicated page where the avatar is the whole experience.

The snippet above is illustrative — copy the exact, current embed code from your character's Web surface in the panel, since it is pre-filled with your real connection ID.

What works on the web

The web avatar is not a cut-down preview. It runs the same conversational character you configured for Unreal, powered by the same cloud brain. The capabilities that matter for a live, face-to-face interaction all carry over.

Real-time voice conversation

The user speaks, the character listens, understands, and answers out loud — a natural back-and-forth with no push-to-talk friction. It handles interruptions and picks up mid-thought, just like the desktop experience.

Lip sync

The mouth moves in time with every word the character speaks, generated live from the outgoing voice. Nothing is pre-baked — whatever the character says, the face says with it.

Look-at & presence

The avatar holds eye contact and keeps its gaze on the person it is talking to, so the exchange feels attentive rather than like a video on loop.

The same brain

Same personality, same instructions, same knowledge, same connected tools. Answers on the web match answers on the kiosk because they come from the identical cloud character.

Feature parity at a glance

Capability	Unreal build	Web embed
Real-time voice conversation	Yes	Yes
Live lip sync from speech	Yes	Yes
Look-at / eye contact	Yes	Yes
Same personality & instructions	Yes	Yes
Knowledge base & connected tools	Yes	Yes
Model choice (GPT, Claude, Gemini, Ollama)	Yes	Yes
Cinematic scene, lighting & camera control	Yes	Simplified — avatar-focused
Zero install for the visitor	Desktop app	Yes — runs in the browser

The web surface is tuned to be lightweight and instantly available, so the deep environment control you get in an Unreal scene — full cinematic staging, custom lighting rigs, elaborate sets — is intentionally streamlined in the browser. What stays identical is the part that talks back: the voice, the face, and the intelligence behind them.

Choosing surfaces per character

Each character decides for itself where it can appear. In the panel you toggle surfaces on a per-character basis — a character can be Unreal-only, web-only, or both. This lets you, for example, run a polished cinematic character on a physical kiosk while a lighter version of a support character lives on your website, all managed from the same place.

The connection ID is the through-line. It is what links any surface — Unreal, web embed, or inline frame — back to a single character. Copy the ID, paste it into the surface, and that surface becomes another window onto the same character. Rotate or revoke the ID in the panel and every embed using it updates immediately.

How a surface connects

Configure once — build the character's personality, voice, knowledge, and tools in the panel.
Enable the Web surface — flip it on and the panel issues a connection ID for that character.
Embed with the ID — paste the snippet (or iframe) carrying that connection ID onto your page.
Go live — the runtime resolves the ID to your cloud character and opens a live voice session.
Update anywhere — edits in the panel propagate to every surface pointing at that character, with no re-deploy.

Next steps

If you have not built a character yet, start with the Quickstart to create one in the panel, then come back here to put it on the web. To wire the same character into a desktop experience, see the Install guide and the Blueprint API. You can also try a live character right now on the demo & panel, ask questions on the forum, read walkthroughs on the blog, or grab the latest build from releases.

Building something with the web embed? Share it on the forum — we feature community integrations, and the source for the runtime and plugin lives on GitHub.