Skip to main content

Integrate Avaturn into web app

You can embed Avaturn into your website! It's free. We provide a library to make the integration as simple as possible. Though, we still expect the basic knowledge of HTML, CSS, and JS.

Quick start (plain HTML)

  1. Add to your HTML the following div element. You can also declare a css class avaturn-sdk-container, or use any
<div id="avaturn-sdk-container"></div>

You can define style for this container, e.g. to make it full screen:

#avaturn-sdk-container {
width: 100%;
height: 100%;
border: none;
  1. Add the following script to the body of HTML. It will launch Avaturn full screen on page load and print returned data when avatar is exported.
<script type="module">
// Loading directly from CDN, see FAQ about packaging
import { AvaturnSDK } from "";

function loadAvaturn() {
const container = document.getElementById("avaturn-sdk-container");
const subdomain = "demo";
const url = `https://${subdomain}`;
// You can now use AvaturnSDK
const sdk = new AvaturnSDK();
.init(container, { url })
.then(() => {
// Listen for export callback (when a user clicks "Next")
sdk.on("export", (data) => {
"[callback] Avatar exported. See logs to explore the returned data."
// data of type

// Start Avaturn on page load
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", loadAvaturn);
} else {

// You can also uncomment the following line to make `loadAvaturn` available globally as window.loadAvaturn
// This is useful if you want to e.g. load Avaturn on button click
window.loadAvaturn = loadAvaturn;

SDK will create an iframe inside avaturn-sdk-container and will start listening on avatar export. See full source code here:

Avaturn plain html example

A bit more details about the code above

  1. Subdomain In the following snippet you need to set your subdomain in this variable. You should create your project (subdomain) at Subdomain demo has some limitation
const subdomain = "demo";
  1. Styling the iframe. It's best to apply css to avaturn-sdk-container and keep CSS for iframe default, but you can also set CSS class for internal iframe like so (the class sdk-iframe should be defined in your CSS):
.init(container, { url, iframeClassName: 'sdk-iframe' })

See all init parameters in SDK reference.

  1. Export callback. When a user clicks "Next" button in the UI, the avatar GLB is generated. Process the result in the following callback:
sdk.on("export", (data) => {
// process the exported data here


  • **Q: What if I use a package manager? Can I bundle SDK? **

    Yes, you can install our package and import SDK as

    import { AvaturnSDK } from '@avaturn/sdk';
  • Q: Where can I read more about SDK?

    See this document and SDK reference, note, some functionality requires paid plan.

  • Q: Is there an example for react?

    Yes, see codesandbox example.