# Web: embed and WebGPU URL: https://docs.bithuman.ai/platforms/web > Put a live, talking avatar on any web page with one iframe. It renders in the bitHuman cloud, or in the visitor's tab with WebGPU. The web surface is one URL: `https://www.bithuman.ai/embed/`. Put it in an ` ``` Expected: the avatar appears, asks for the microphone, and answers when you speak. Keep the `*` in `allow`, or the microphone is blocked. To try it without a page, open [https://www.bithuman.ai/embed/A23WJF0199](https://www.bithuman.ai/embed/A23WJF0199). ## Complete example A whole page with a live avatar: one HTML file and a local web server. ### Requirements | You need | Notes | |---|---| | A current browser | Chrome, Edge, Safari or Firefox | | A local web server | the page must be served over `http://localhost` or HTTPS for the microphone to work | | Nothing else | no account for the sample avatar; your own agent works the same way while its Anonymous Share setting is on, and its sessions bill you | ### Get the code Save this as `index.html`: ```html bitHuman web embed ``` ### Run it ```bash python3 -m http.server 8765 --bind 127.0.0.1 ``` Open `http://127.0.0.1:8765/` and allow the microphone. ### Expected output The avatar greets you within a few seconds. Speak, or type into the **Type or speak…** box, and it answers out loud with its lips in sync. The red button ends the session. ### How it works The iframe loads the hosted viewer for agent `A23WJF0199`. The viewer opens a real-time session: your microphone audio goes to the agent, and the agent's voice and video come back. `allow="microphone *"` lets the iframe ask for the microphone; without the `*` the browser blocks it. URL parameters are on [Web](https://docs.bithuman.ai/platforms/web); session events on [Embedding](https://docs.bithuman.ai/api/embedding). ### Make it your own - **Your own avatar:** replace `A23WJF0199` with your agent code. Anyone with the code can open it and sessions bill your account; turn off Anonymous Share in the agent's sharing settings to stop that. - **Push what it says:** from your backend, `POST /v1/agent/{code}/speak` makes a live avatar say a line ([Agents](https://docs.bithuman.ai/api/agents)). - **Size and layout:** any width and height work; keep roughly a 7:12 portrait shape for Expression 2 avatars. ## Integrate into your app Add parameters to the URL: | Parameter | Values | Effect | |---|---|---| | `render` | `cloud` (default), `local` | Where the avatar renders: our servers, or the visitor's tab | | `rendering_mode` | `browser`, `avatar` | Long form of `render=local`; `avatar` renders in the tab and lip-syncs the visitor's own microphone, with no conversation | | `greetingLang` | a language code, for example `es` | Language of the first greeting | | `greetingMsg` | text | The first thing the avatar says | A private agent also takes `token`, and a session can pin its model with `model`; both are on [Embedding](https://docs.bithuman.ai/api/embedding). Other parameters are ignored. ### Render in the visitor's tab (WebGPU) `render=local` renders the avatar in the visitor's browser tab with WebGPU. It works for any avatar you can embed and is off by default: without it, every session renders in the bitHuman cloud and streams to the page. - **One download:** the avatar's web bundle (50–200 MB) downloads to the browser once, then comes from the cache. Tell visitors before it starts on a metered connection. - **Fallback:** a browser without a usable GPU is switched to cloud rendering, so every visitor gets lip-sync. - **Where the conversation runs:** with the web embed, the conversation runs on bitHuman's servers, even when the avatar renders in the tab (`render=local`). - **Private agents:** the embed token the iframe already uses covers it ([Embedding](https://docs.bithuman.ai/api/embedding)). *Diagram: The web embed with render=local.* With render=local the avatar renders in the visitor's browser tab with WebGPU. The conversation runs on bitHuman's servers, even when the avatar renders in the tab: the microphone audio goes to bitHuman and the voice reply comes back. Check for a usable GPU before you choose `render=local`: ```js async function hasRealGPU() { if (!navigator.gpu) return false; const once = async () => { try { return (await navigator.gpu.requestAdapter()) ?? null; } catch { return null; } }; const adapter = (await once()) ?? (await once()); // the first request can return null while the GPU starts return !!adapter && adapter.isFallbackAdapter !== true && adapter.info?.isFallbackAdapter !== true; } const mode = (await hasRealGPU()) ? "local" : "cloud"; iframe.src = `https://www.bithuman.ai/embed/A23WJF0199?render=${mode}`; ``` Do not send `Cross-Origin-Embedder-Policy` from the page that holds the iframe: the embed does not send one itself, so the browser refuses to load it. ### React and other frameworks There is no npm package: the embed is an iframe in any framework. In React: ```jsx export function Avatar({ code }) { return