Embedding an avatar

If you want an avatar on a page and you do not need to control the UI, embed the hosted avatar surface. This is the integration path we recommend by default: no media code to write, no WebRTC to debug, and microphone and reconnection behaviour are handled for you.

The embed

<iframe
  src="https://zorgelines.com/en/demo?avatar=f7f6fe47f93446c1"
  allow="microphone; autoplay"
  style="width: 100%; height: 100%; border: 0;"
></iframe>

allow="microphone" is required — without it the browser blocks microphone access inside the frame and the avatar can never hear anything. This is the single most common integration mistake.

URL parameters

Parameter	Purpose
avatar	Avatar id from your catalog. Required in practice
token	Access token, for avatars that are not publicly reachable
subtitles	on renders live subtitles under the avatar

The locale is the path segment: /en/, /ar/, /ru/. Arabic renders right-to-left throughout.

Sizing

The avatar is portrait by default — it is a person, framed head and shoulders. Give the frame a real height; a 200-pixel-tall strip will letterbox badly. On mobile, full-viewport works best.

Requirements on the page

• HTTPS. Browsers refuse microphone access on insecure origins.
• A user gesture before the session starts. Browsers will not autoplay audio otherwise; the built-in surface already handles this with its start button.
• No restrictive Content-Security-Policy frame-src that excludes our domain.

Your own domain

For customer-facing production deployments we normally serve the avatar from a subdomain you control — avatar.yourcompany.com — with your certificate, so the embed and the parent page share a brand and there are no third-party cookie or frame concerns. This is set up during onboarding.

When embedding is not enough

Build against the API directly when you need custom controls, your own avatar layout, native mobile rendering, or the conversation surfaced somewhere other than a web view. Start at the API reference.