Developer

Appearance

Editor Embedding

Embed the rooomAvatars Editor in an iframe, pass startup settings through URL parameters, and exchange runtime updates with postMessage.

Quick Start ​

Embed the editor inside an iframe. Pass the API token in the hash fragment and initial settings in the URL query string.

html
<iframe
  src="https://editor.avatars.rooom.com/?transparent#token=API_TOKEN"
  title="rooomAvatars Editor"
  allow="camera"
  style="width: 100%; height: 600px; border: none;"
></iframe>

Replace API_TOKEN with the token for your rooomAvatars integration.

Full Example ​

This example demonstrates how to:

  1. Load the editor with a transparent background
  2. Pass the API token (API_TOKEN)
  3. Listen for the completion message
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>rooomAvatars Example</title>
  <style>
    body { margin: 0; padding: 2rem; font-family: sans-serif; }
    #editor-container { width: 100%; max-width: 800px; height: 600px; margin: 0 auto; }
    iframe { width: 100%; height: 100%; border: 1px solid #ccc; border-radius: 8px; }
  </style>
</head>
<body>

  <div id="editor-container">
    <!-- The iframe src will be set by JavaScript -->
    <iframe id="rooom-avatars-iframe" allow="camera"></iframe>
  </div>

  <script>
    // 1. Build the editor URL
    // Replace API_TOKEN with your actual token
    const editorUrl = `https://editor.avatars.rooom.com/?transparent#token=API_TOKEN`;

    // 2. Load the editor
    const iframe = document.getElementById('rooom-avatars-iframe');
    iframe.src = editorUrl;

    // 3. Listen for messages from the editor
    window.addEventListener('message', (event) => {
      // Security check: ensure the message comes from the editor origin
      if (event.origin !== 'https://editor.avatars.rooom.com') return;

      // Verify the message comes from our specific iframe
      if (event.source !== iframe.contentWindow) return;

      // Filter out messages that are not from rooomAvatars
      if (event.data?.source !== 'rooom-avatars') return;

      // Handle the completion event
      if (event.data.type === 'rooom-avatars-completed') {
        console.log('Avatar created successfully!');
        console.log('Avatar ID:', event.data.data.avatarId);
        console.log('Avatar Name:', event.data.data.name);
        console.log('Model URL:', event.data.data.modelUrl);
        console.log('Final Config:', event.data.data.config);

        alert(`Avatar saved! ID: ${event.data.data.avatarId}`);
      }
    });
  </script>
</body>
</html>

Components ​

URL Parameters ​

Use URL Parameters to configure display options and pass the API token in the hash fragment.

Iframe Messaging ​

Use Iframe Messaging to send runtime updates and receive editor events through window.postMessage.

Configuration Schema ​

Use Configuration Schema to build the avatar settings object shared by URL parameters, messages, and API requests.

Key Features ​

  • iframe integration with a fixed editor origin.
  • API token delivery through the URL hash fragment, not through a query parameter.
  • Initial avatar settings through a URL-encoded JSON query parameter.
  • Runtime configuration updates through rooom-avatars-config messages.
  • Completion messages that include the avatar ID, model URL, preview URL, name, and configuration.