Skip to main content

Avaturn web SDK

Our web SDK provides tools to embed Avaturn into a web project and customize the experience. It allows to

  • Receive callbacks on user actions (garment change, body change, export).
  • Customize the list of assets available for a particular user.
  • Create custom UI for avatar editor. SDK provides an interface to switch assets programmatically so you can bind those actions in the way you want.
INFO

Avaturn web SDK only works in conjunction with Avaturn API and is only available in the paid package.

Basic SDK integration guide

Here we show how to get started using Avaturn web SDK in web environment.

As a prerequisite, you need to create a project at developer portal and activate API access.

Installation​

Currently we only have example for JS/TS environments, though the library can be used with Unity, Unreal, etc.

On web you can install SDK with

npm install @avaturn/sdk

Basic usage​

Use /v1/sessions/new API request to get a link and pass it to sdk.init(...) function. Avaturn embeds itself as an iframe, but you don't need to create an <iframe> element on your page. Rather than that, you need to pass a DOM element, that SDK will use as parent for everything it initializes. You can also pass a class name for the created iframe.

<div id="avaturn-sdk-container"></div>
<script async>
  import { AvaturnSDK } from '@avaturn/sdk';

  const container = document.getElementById('avaturn-sdk-container');
  const sdk = new AvaturnSDK();
  await sdk.init(
    container,
    {
      url: '<URL_RETURNED_BY_AVATURN_API>', // required
      iframeClassName: '<CSS_CLASS_NAME_FOR_IFRAME>' // optional
    }
  );
</script>