Embed a 3D avatar on your site

Configure it by clicking, watch the code rewrite itself, then copy the tag. No build step, no framework.

What you end up with: One script tag that puts a live, animated avatar on any page you control.

3 minute walkthrough, beginner level.

  1. The playground is the documentation

    Editor on the left, live avatar on the right. It is not a video or a screenshot of an IDE: the preview is the real web component running the exact code in the box.

    HTML, React, and Vue tabs emit the same component with the syntax each ecosystem expects.

    /

  2. Pick a body by clicking one

    Each swatch swaps the avatar in the preview and rewrites the src attribute in the code. These are the same hosted GLBs your production embed will load.

    Any model you forge or upload can go here too. Swap the src for your own URL.

    /

  3. Toggle the behaviour, not the CSS

    Responsive sizing, a nameplate, the chat dock, eager loading. Each chip is one attribute on the tag, so what you turn on here is exactly what ships.

    Background chips cover the common cases: transparent over your hero, or a dark or light plate.

    /

  4. The code is editable, both ways

    Clicking a chip writes into the editor, and typing in the editor updates the preview. Break it on purpose to see how it fails before you paste it into your own page.

    /

  5. Copy the tag and you are done

    One script tag and one element. It works in a static HTML file, a WordPress theme, a Shopify template, or a React app, because it is a web component and not a framework plugin.

    /

Open the playground

Related