Integrate into your website

Avaturn can be easily embedded into your website! It's free.

DOWNLOAD

• Please find a complete example at CodeSandbox.
• See three.js example here: link :::

Basic integration

You can use <iframe> element to embed Avaturn into your web page. Add this to your web page:

<iframe
  width="100%"
  height="100%"
  src="https://demo.avaturn.dev"
  frameborder="0"
  allow="camera *; clipboard-write"
  allowfullscreen
></iframe>

This is how it could look:

You can tune the styles of the iframe (at least height and width to make it look good on your web site). You can also embed it full screen (demo, CodeSandbox).

This example embeds demo.avaturn.dev domain. This is ok for initial test, but this domain has limitations. Please create your own domain <your-app-name>.avaturn.dev with all features unlocked at developer portal.

:::

---

Receiving an avatar

So far we've just embedded Avaturn, but we need to be able to interact with it. Specifically, we need to receive avatar once it's created. This is done using messaging mechanics. Once a user finishes customizing their avatar and presses Save button, Avaturn sends a message to your web page.

{
  "source": "avaturn", // always 'avaturn', you should check this value when receiving the message
  "date": "...", // `Date.now()` for the moment when the message was created
  "eventName": "...", // event name is one of ["v2.avatar.exported"]
  "data": {
    "url": "...",
    "urlType": "..." // 'httpURL' | 'dataURL'
  }
}

On you webpage you can receive the event like this.

function subscribe(event) {
  /* Here we process the events from the iframe */

  let json;
  try {
    json = JSON.parse(event.data);
  } catch (error) {
    console.log('Error parsing the event data.');
    return;
  }

  if (json.source !== 'avaturn') {
    return;
  }

  // Get avatar GLB URL
  if (json.eventName === 'v2.avatar.exported') {
    // PROCESS RECEIVED AVATAR HERE
    // `json` now holds the message
    // `json.data.url` is url for the avatar
  }
}

---

Putting it all together

Please find end-to-end example here: