Editor Embedding

Embed the rooomAvatars Editor in an iframe and initialize it via URL parameters.

Embed the rooomAvatars Editor as an iframe and pass the API token and initial settings through URL parameters.

Overview

The embedding flow is:

1. Build the iframe src with your API token in the URL hash and optional config in query parameters.
2. Load the iframe.
3. Optionally send rooom-avatars-config messages to update settings at runtime.
4. Listen for rooom-avatars-completed to receive the avatar ID and model URL.

Prerequisites

• A URL where the editor is hosted.
• An API token for the rooomAvatars REST API.

Steps

1. Create an iframe whose src points to the editor URL. Pass the API token in the URL hash (#token=...) and any display flags as query parameters.
2. Listen for the rooom-avatars-completed message to receive the result.

Examples

Create an iframe with the API token and a transparent background:

<iframe
  id="rooom-avatars"
  src="https://editor.avatars.rooom.com/?transparent#token=YOUR_API_TOKEN"
  allow="camera"
  title="rooomAvatars Editor"
></iframe>

Pass an initial config and avatar name via query parameters:

<iframe
  id="rooom-avatars"
  src="https://editor.avatars.rooom.com/?transparent&config=%7B%22body%22%3A%7B%22gender%22%3A%22feminine%22%7D%7D&avatarName=My%20Avatar#token=YOUR_API_TOKEN"
  allow="camera"
  title="rooomAvatars Editor"
></iframe>

Listen for rooom-avatars-completed:

const iframe = document.getElementById('rooom-avatars');
const iframeOrigin = new URL(iframe.src).origin;

window.addEventListener('message', (event) => {
  if (event.origin !== iframeOrigin) return;
  if (event.source !== iframe.contentWindow) return;

  const { type, source, data } = event.data ?? {};
  if (source !== 'rooom-avatars') return;

  if (type === 'rooom-avatars-completed') {
    console.log('avatarId:', data.avatarId);
    console.log('modelUrl:', data.modelUrl);
    console.log('previewUrl:', data.previewUrl);
  }
});

More details:

• URL Parameters
• Iframe Messaging
• Configuration Schema