Implementing custom UI

In the previous example we shown how to use Avaturn SDK with Avaturn standard UI and receive callbacks on user actions. Here we show how one can use custom UI for avatar editor.

To prevent Avaturn from drawing it's own UI, you need to pass disableUi=true argument to sdk.init():

const scene = await sdk.init(container, {
  url: '<URL_RETURNED_BY_AVATURN_API>',
  iframeClassName: '<CSS_CLASS_NAME_FOR_IFRAME>',
  disableUi: true,
});

You can then receive list of assets and bodies when it's ready:

sdk.on('load', () => {
  sdk.getBodyList().then((list) => ...);
  sdk.getAssetList().then((list) => ...);
})

Then you can activate specific asset or body as following:

sdk.setActiveAsset(id).then(() => {
  console.log(`Asset changed: ${id}`);
});

sdk.setActiveBody(id).then(() => {
  console.log(`Body changed: ${id}`);
});

See SDK api reference for all available methods. Note, that in disableUi mode, you will not receive .on() callbacks other than .on('load', fn).