Skip to content
bitHuman
Join DiscordSign inSign up

Developers · Web

A talking avatar for your website or web app

Paste an iframe or load the floating widget. bitHuman's managed agent runs the conversation with your persona, and with your own language model or voice keys if you want them, so there is no voice server to run.

From 12 October 2026, API and SDK use requires the Creator plan or higher.

First frame in the docsWebsite widget

Install

One iframe
<iframe src="https://www.bithuman.ai/embed/A23WJF0199" allow="microphone *" style="width:100%;height:600px;border:0"></iframe>

What you need: nothing (from the docs)

Your first frame, step by step The full Web guide

Add a conversation

The avatar needs something to say. On the web, bitHuman's managed agent runs the whole conversation for you.

  • The managed agent (the default)

    Your persona is the agent's system prompt; the conversation runs on bitHuman's servers.

    Persona

  • Your own model, with no worker to run

    Point the agent at any OpenAI-compatible endpoint, or connect your own voice provider, through the Providers API.

    Providers

  • A LiveKit web client for your own agent

    Build your own video UI and subscribe to a cloud-rendered avatar in your LiveKit room.

    LiveKit

With the web embed, the conversation runs on bitHuman's servers, even when the avatar renders in the tab.

Where it renders

In the bitHuman cloud by default, or in the visitor's tab with WebGPU (render=local), falling back to cloud rendering when the browser has no usable GPU.

With the web embed, the conversation runs on bitHuman's servers, even when the avatar renders in the tab.

Render in the visitor's tab (docs)

React and Next.js

There is no npm package: the embed is an iframe in any framework. For a floating avatar, one script tag adds the website widget to any page, Next.js included.

React
export function Avatar({ code }) {
  return <iframe src={`https://www.bithuman.ai/embed/${code}`} allow="microphone *" style={{ width: "100%", height: 600, border: 0 }} title="Talking avatar" />;
}

Website widget, with a Next.js snippet (docs)

Requirements

  • HTTPS (or localhost) and allow="microphone *" on the iframe, or the browser blocks the microphone.
  • The page that holds the iframe must not send Cross-Origin-Embedder-Policy.
  • A private agent needs an embed token minted on your server; a public agent needs no credential.

What it costs

What it costs to run an avatar in your app
ItemOn the device (Essence 2, Expression 2)bitHuman cloud avatarManaged voice chat (all-inclusive)
Credits per minute of active session time2410
At top-up rates ($1 = 100 credits)about $0.02about $0.04about $0.10

From 12 October 2026, API and SDK use requires the Creator plan or higher.

Rates from GET https://api.bithuman.ai/v1/pricing, as published on docs.bithuman.ai/pricing.

The full table, with a worked example Budget an app (docs)

Examples you can clone

All examples

Before you ship

A public agent needs no credential in the page. A private agent needs an embed token that your server mints with your API secret, so the secret never reaches the browser. Embed tokens (docs) →

The full checklist

Not available on this platform

  • An npm package: the embed is an iframe, or one script tag for the widget, in any framework.
  • Offline operation: the web embed needs a connection throughout.

Questions? Ask on Discord

Join the bitHuman Discord