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;
}

2. 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 "https://cdn.jsdelivr.net/npm/@avaturn/sdk/dist/index.js";

  function loadAvaturn() {
    const container = document.getElementById("avaturn-sdk-container");
    // REPLACE THE SUBDOMAIN WITH YOUR OWN
    const subdomain = "demo";
    const url = `https://${subdomain}.avaturn.dev`;
    // You can now use AvaturnSDK
    const sdk = new AvaturnSDK();
    sdk
      .init(container, { url })
      .then(() => {
        // Listen for export callback (when a user clicks "Next")
        sdk.on("export", (data) => {
          alert(
            "[callback] Avatar exported. See logs to explore the returned data."
          );
          // INSERT YOUR CODE TO HANDLE EXPORT HERE!
          // data of type https://sdk-docs.avaturn.me/types/ExportAvatarResult
          console.log(data);
        });
      });
  }

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

  // 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;
</script>

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

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 developer.avaturn.me. Subdomain demo has some limitation

...
const subdomain = "demo";
...

2. 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.

3. 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
})

---

FAQ

• **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.