Put a live avatar on your site

One iframe or one script tag. The avatar listens on the visitor's microphone, answers out loud through a live language model, and renders as a real-time 3D head in the browser: no video stream, no plugin, no account. Free during the beta with the key free; a key of your own stores your prompt, avatar and voice and removes the limits.

The easiest way: one iframe

If you can paste HTML into your page, you can add the avatar. No script, no account, no code: one line, and the prompt is part of it. Create yours in the editor (create your account, make the avatar yours, copy the line from its Export tab) or write it by hand with the free key:

<iframe src="https://moholo.ai/embed?key=free&avatar=ana&prompt=You%20are%20Ana%2C%20the%20concierge%20of%20Casa%20Solana..."
        allow="microphone; camera; autoplay; fullscreen" allowfullscreen
        style="border:0;width:100%;height:560px;max-width:100%;border-radius:12px"></iframe>

The prompt goes in the address, so use the setup page to encode it (spaces, commas and quotes become %20 and friends). With a paid key the prompt, avatar and voice are stored with the key, and the line shrinks to src="https://moholo.ai/embed?key=YOURKEY"; you change the prompt by writing to us, not by touching the page.

WordPress

1. Edit the page or post, add a block, choose Custom HTML.
2. Paste the iframe line. Click Preview: the avatar appears in the editor.
3. Publish. The page must be served over https for the microphone (every WordPress host does this).

Self-hosted WordPress and WordPress.com Business/Commerce plans accept iframes in Custom HTML. The free and Personal WordPress.com plans strip iframes and scripts; those need the Business plan or a host that allows embeds. Wix, Squarespace, Webflow, Shopify and Framer: use their "Embed" or "Custom code" element and paste the same line. The <script> tag below does the same thing with a little less typing where scripts are allowed.

Your own model, unlimited minutes: the same iframe

In the editor's Export tab, choose "my own model key" and paste your Gemini API key: it is stored on our servers only, the conversation runs on your Google account, and the page still carries only the iframe. Nothing to host. (If you prefer to keep the model key on your own server, the bring-your-own-model API below is the alternative.)

Paste this where the avatar should appear (script version)

Parameters

Quality levels

Every avatar is compacted with Moholo's proprietary geometry, appearance and rig compaction and ships in several detail levels: low (25k gaussians, phones), medium (50k), high (100k) and full. Set one per device with data-quality, or leave the attribute out and the avatar picks automatically from the screen: coarse-pointer phones get low, a small frame medium, a normal desktop frame high, a large one full. A level that is not available for an avatar falls back to the next one up, so a request can never fail.

Two ways to run the conversation

The avatar is always rendered and animated on the visitor's device. What differs is who runs the conversation.

Your page already plays the audio (any audio-to-audio model): animate it

If your page already runs the conversation, for example a WebRTC session with a realtime model, the avatar only needs the audio you are already playing. Three lines, nothing else changes, nothing reaches Moholo but the request for the avatar files:

<script src="https://moholo.ai/embed.js" data-key="mk_…" data-avatar="ana" data-llm="client" data-playback="0"></script>
<script>
  Moholo.on('ready', function () { Moholo.attach(remoteStream); });   // a MediaStream, an <audio> element, or a Web Audio node
</script>

Moholo.attach(src) taps the audio inside your page, streams it into the avatar and closes each reply after 700 ms of silence ({gap, threshold} options). data-playback="0" keeps the avatar silent because your page is already playing the sound; Moholo.mute(false) turns its playback back on. The visitor's microphone is yours: the avatar does not open it unless you call Moholo.mic(true). Interrupt with Moholo.stop(), captions with Moholo.caption(text). Your model, your key, your servers; the lips are computed on the visitor's device.

Your own audio server (no JavaScript on your page)

If you run your own speech-to-speech model, point the avatar at it: in the editor's Export tab choose "my own audio server" and enter its wss:// address, or put data-audio="wss://voice.your.site/moholo" on the embed tag. The visitor's browser opens one WebSocket to your server per visit and the avatar's lips are driven on the visitor's device from the audio you send. Moholo never carries the audio: our servers only serve the avatar files.

A complete working server in 60 lines of Python is here: own_audio_server_example.py (pip install aiohttp numpy, then python3 own_audio_server_example.py; it answers with a built-in test sound until you give it a model); replace its reply() with your model. The socket reconnects by itself if your server restarts. With your own audio server the animation always runs on the visitor's device and nothing from the conversation reaches Moholo, so the Pro hosted minutes are not used.

Already have a voice agent? Add a face in three calls

If your page already receives reply audio from a voice agent, the whole integration is Moholo.speak(pcm, rate) for each audio chunk as it arrives, Moholo.end() (or speak(chunk, rate, {end:true})) as soon as the last chunk is known, and Moholo.stop() when the visitor interrupts. Send end() on the event that marks the end of the audio, not of the whole response: for OpenAI Realtime that is response.output_audio.done, which arrives before response.done; a late end() holds the last mouth shape until it arrives. You do not need Moholo.mic() or the utterance event: your agent keeps listening the way it does today. The face starts about 0.3 s after your first chunk and stays within a few tens of milliseconds of the voice for the rest of the reply.

LiveKit or Pipecat: the avatar as a plugin toggle

If your agent runs on LiveKit Agents or Pipecat, nothing above is needed. The agent keeps publishing audio as it does today; a server plugin tells the room which avatar to show, and a browser plugin hands the agent's audio track to the avatar, rendered and lip-synced on the visitor's device. No video track, no rendering minute, no change to your pipeline, tools or turn detection.

# LiveKit Agents (pip install livekit-plugins-moholo)
from livekit.plugins import moholo
avatar = moholo.AvatarSession(avatar="ana")
await avatar.start(session, room=ctx.room)        # before session.start(...)

// browser (npm i @moholo/livekit) - React: <MoholoAvatar/> from @moholo/livekit-react
import { attachMoholoAvatar } from '@moholo/livekit';
attachMoholoAvatar(room, { container: document.querySelector('#avatar') });

# Pipecat (pip install pipecat-moholo): one processor in the pipeline
pipeline = Pipeline([transport.input(), rtvi, stt, llm, tts, MoholoAvatar(avatar="ana"), transport.output()])

// browser (npm i @moholo/pipecat)
attachMoholoAvatar(pipecatClient, { container: document.querySelector('#avatar') });

The avatar plays the agent's voice itself, in sync with the lips, so leave the agent's audio track unattached (no track.attach(), no <RoomAudioRenderer/>); pass playback: 'app' if your app must keep its own player. Typed text in the avatar's box goes to the agent (LiveKit lk.chat, Pipecat sendText); the visitor's microphone is the room's. Packages, examples and the server-to-browser contract: github.com/moholo-founder/moholo-plugins.

Set up: bring your own live model (your server keeps the key)

Three pieces. Whatever model you use must stream audio: a request-and-reply model followed by a text-to-speech call puts 4 to 6 seconds between the question and the first word, a live model puts 0.5 to 1.5 s. The example below is Google's Gemini Live; OpenAI's Realtime API or any other engine that streams 16-bit PCM works the same way.

1. The tag

<script src="https://moholo.ai/embed.js" data-key="free" data-avatar="ana" data-llm="client"
        data-width="100%" data-height="560" data-bg="https://your.site/lobby-blurred.jpg"></script>
<script src="/concierge.js"></script>

2. Your server: one live session per visitor

A websocket endpoint that opens the model session with your key. Up: the visitor's utterances (binary, int16 mono 16 kHz, already cut at pauses by the avatar) and typed text. Down: the model's audio chunks the moment they exist, plus transcripts and turn boundaries. Python with google-genai and aiohttp, trimmed from the Casa Solana example:

import asyncio, json
from google import genai; from google.genai import types
from aiohttp import web, WSMsgType
client = genai.Client(api_key=YOUR_GEMINI_KEY)
CFG = types.LiveConnectConfig(response_modalities=['AUDIO'], system_instruction=YOUR_PROMPT,
    speech_config=types.SpeechConfig(voice_config=types.VoiceConfig(prebuilt_voice_config=types.PrebuiltVoiceConfig(voice_name='Aoede'))),
    input_audio_transcription=types.AudioTranscriptionConfig(), output_audio_transcription=types.AudioTranscriptionConfig(),
    realtime_input_config=types.RealtimeInputConfig(automatic_activity_detection=types.AutomaticActivityDetection(disabled=True)))

async def live(request):
    ws = web.WebSocketResponse(); await ws.prepare(request)
    async with client.aio.live.connect(model='gemini-3.1-flash-live-preview', config=CFG) as s:
        await ws.send_json({'type': 'ready'})
        async def pump():                       # model -> browser. receive() ends at every turn: re-enter it
            while not ws.closed:
                async for m in s.receive():
                    sc = m.server_content
                    if not sc: continue
                    if sc.interrupted: await ws.send_json({'type': 'interrupted'})
                    if sc.output_transcription: await ws.send_json({'type': 'transcript', 'who': 'avatar', 'text': sc.output_transcription.text})
                    if sc.input_transcription: await ws.send_json({'type': 'transcript', 'who': 'user', 'text': sc.input_transcription.text})
                    for p in (sc.model_turn.parts if sc.model_turn else []):
                        if p.inline_data: await ws.send_bytes(p.inline_data.data)      # int16 mono 24 kHz
                    if sc.turn_complete: await ws.send_json({'type': 'turn_complete'})
        task = asyncio.create_task(pump())
        async for msg in ws:                     # browser -> model
            if msg.type == WSMsgType.BINARY:     # one utterance from the avatar's microphone
                await s.send_realtime_input(activity_start=types.ActivityStart())
                for i in range(0, len(msg.data), 32000):
                    await s.send_realtime_input(audio=types.Blob(data=msg.data[i:i+32000], mime_type='audio/pcm;rate=16000'))
                await s.send_realtime_input(activity_end=types.ActivityEnd())
            elif msg.type == WSMsgType.TEXT:     # typed question
                await s.send_client_content(turns=types.Content(role='user', parts=[types.Part(text=json.loads(msg.data)['text'])]), turn_complete=True)
        task.cancel()
    return ws

3. Your page: glue between the avatar and your socket

const ws = new WebSocket('wss://your.site/live'); ws.binaryType = 'arraybuffer'; let said = '';
ws.onmessage = e => {
  if (e.data instanceof ArrayBuffer) { Moholo.speak(new Int16Array(e.data), 24000); return; }   // lips follow within ~15 ms
  const j = JSON.parse(e.data);
  if (j.type === 'transcript' && j.who === 'avatar') Moholo.caption(said += j.text);
  if (j.type === 'turn_complete') { Moholo.end(); said = ''; }
  if (j.type === 'interrupted') Moholo.stop();
};
Moholo.on('utterance', m => ws.send(m.pcm));                                    // the visitor spoke
Moholo.on('text', m => ws.send(JSON.stringify({ type: 'text', text: m.text }))); // the visitor typed

The avatar owns audio playback in client mode: stop your own player, or the visitor hears a doubled voice (or set data-playback="0" and keep yours, see attach). The delay the avatar adds is its playback lead, about 0.3 s before the first word of each reply (data-lead; it grows by itself on a device that cannot keep up and is remembered there). Measured with this setup on the example site: typed question to first word 0.55 s, end of a spoken question to first word about 1.5 s on a warm session in the model's own region (the first turn of a new session, or a server far from the model, measures 2.5 to 3.5 s), the avatar adding about 15 ms of lip-sync error on top of the audio, which is accuracy, not delay. Keep the model's key on your server only; the page never sees it. A voice close to the one the avatar was distilled on gives the best lips: use the avatar's own voice from /api/avatars (Ana: "Sulafat", Mei: "Aoede"); any voice works. Complete, deployable source: Casa Solana (live) and casa-solana-example.zip (the whole site and server, 13 files; Cloud Run, key in Secret Manager).

Reference: the window.Moholo API

Plans

Everything is set up in the editor: create your account, pick the avatar and make it yours (look, motion, speech, scene), then finish in the Export tab: write the prompt, choose the voice and who runs the conversation, copy the line. No card for the trial.

Your model key is stored on our servers only and used to open the conversation for your visitors; it is never sent to the browser or written into your page. The page only ever carries your public embed key (mk_…), which is locked to the websites you list.

How this compares

Every other real-time avatar service renders video on datacentre GPUs and bills every minute the avatar is on screen, with or without your own model. Moholo renders on the visitor's device, which is why unlimited minutes can be a flat fee. Public list prices, September 2026, from the vendors' pricing pages:

Example: a hotel page with 2,000 conversations a month of 3 minutes each (6,000 minutes) costs about $600 to $2,200 per month on the cloud-video services above, and $10 on Moholo with your own model plus your model's own bill (Gemini Live: roughly $0.01 to $0.02 per minute, so about $60 to $120).

Requirements

Your page must be served over HTTPS for the microphone to work. The avatar needs WebGL2 (every current desktop and phone browser, including Android WebView apps); WebGPU is used when present but not required. In the hosted mode nothing from your page is sent to us except the parameters above, and the conversation runs between the visitor's browser and Moholo. In the bring-your-own-model mode the conversation never touches Moholo: only the avatar files are served.

Live example

Questions or a key for your site: founders@moholo.co.