Message API/docs/components/collaboration/implementation

Workflow Guide

Complete end-to-end interactive implementation guide for collaboration.

Step-by-Step Interactive Workflow

Follow this complete guide to integrate real-time collaboration. Each step includes production-ready code for your host application.

Host Sends

1. HTML

Prepare your document viewer container with an iframe and necessary security attributes.

html

<!-- Document Viewer Container -->
<div class="viewer-wrapper">
  <iframe 
    id="viewer-iframe" 
    src="YOUR_CANVAS_URL" 
    data-viewer-iframe
    allow="autoplay; clipboard-read; clipboard-write; fullscreen"
    style="width: 100%; height: 600px; border: none;">
  </iframe>
</div>

<!-- Interface Controls -->
<div class="viewer-controls">
  <button id="btn-collab">Initialize Collaboration</button>
  <button onclick="activateTool('MEASURE_LENGTH')">Measure Length</button>
</div>

Host Sends

2. User Set (Identity Setup)

The very first logic step is identifying who the participant is.

javascript

// Complete User Set Implementation
const iframe = document.querySelector('[data-viewer-iframe]');

function setUserIdentity() {
  const userPayload = {
    username: "eng_77",
    displayName: "Alexander Smith",
    email: "alex@engineering-pro.com"
  };

  iframe.contentWindow.postMessage({
    type: "setUser",
    payload: userPayload
  }, '*');
  
  console.log('User identity sent to Canvas');
}

Host Sends

3. Enable Sync Control

Explicitly enable the collaboration synchronization state.

javascript

/**
 * Toggles the real-time sync bridge
 */
function enableSync() {
  iframe.contentWindow.postMessage({
    type: "collaboration",
    payload: { enabled: true }
  }, '*');
  
  document.getElementById('btn-collab').innerText = "Collaboration Active";
}

Host Sends

4. Collaborative Tool Selection

Trigger tools that broadcast actions to all connected participants.

javascript

/**
 * Activate a tool and broadcast to the session
 */
function activateTool(actionId) {
  iframe.contentWindow.postMessage({
    type: 'toolControl',
    payload: { 
      group: 'measurement', 
      action: actionId 
    }
  }, '*');
}