Stamp

Use `stampControl` to open or close the canvas stamp placement UI.

Use `uploadStamp` to send one or more remote stamp URLs into the active canvas session and observe the result through `uploadStampResult`.

• Open: show the stamp placement UI inside the active canvas session.
• Close: dismiss the stamp placement UI programmatically.
• Upload remote stamps: provide one or more stamp URLs and optionally request that the canvas opens the stamp panel after upload.
• Optional request ID: include `requestId` when you want to correlate logs on the host side.

Send `stampControl` with the required `command` field.

iframe.contentWindow.postMessage({
  type: 'stampControl',
  payload: { command: 'open', requestId: 'stamp-1' }
}, '*');

iframe.contentWindow.postMessage({
  type: 'stampControl',
  payload: { command: 'close', requestId: 'stamp-2' }
}, '*');

Send `uploadStamp` with one or more remote URLs when the host needs to preload stamps into the canvas session.

The canvas responds with `uploadStampResult`, including per-item results and whether the panel ended in an opened state.

iframe.contentWindow.postMessage({
  type: 'uploadStamp',
  payload: {
    requestId: 'stamp-upload-1',
    urls: [
      'https://example.com/stamps/approved.png',
      'https://example.com/stamps/rejected.png'
    ],
    openStampPanel: true
  }
}, '*');

window.addEventListener('message', (event) => {
  if (event.data.type !== 'uploadStampResult') return;

  const { success, requestId, opened, results } = event.data.payload;
  console.log('uploadStampResult', { success, requestId, opened, results });
});

Keep the host workflow simple and send the command only after the canvas is ready.

• 11. Wait for readiness: Make sure the iframe session is active before sending stamp commands.
• 22. Open placement: Send `stampControl` with `command: "open"` when the user starts stamp placement.
• 33. Upload stamps when needed: Send `uploadStamp` with one or more remote URLs and decide whether `openStampPanel` should be `true` or `false`.
• 44. Observe `uploadStampResult`: Use the response payload to inspect per-item success and final panel state.
• 55. Close when needed: Send `command: "close"` to dismiss it programmatically.

This example wires stamp open, close, and upload actions to the current canvas iframe.

const viewerOrigin = '*';
const iframe = document.querySelector('iframe');

function openStampPlacement() {
  iframe.contentWindow.postMessage({
    type: 'stampControl',
    payload: {
      command: 'open',
      requestId: 'stamp-open-' + Date.now()
    }
  }, viewerOrigin);
}

function closeStampPlacement() {
  iframe.contentWindow.postMessage({
    type: 'stampControl',
    payload: {
      command: 'close',
      requestId: 'stamp-close-' + Date.now()
    }
  }, viewerOrigin);
}

function uploadStampUrls() {
  iframe.contentWindow.postMessage({
    type: 'uploadStamp',
    payload: {
      requestId: 'stamp-upload-' + Date.now(),
      urls: [
        'https://example.com/stamps/approved.png',
        'https://example.com/stamps/rejected.png'
      ],
      openStampPanel: true
    }
  }, viewerOrigin);
}

document.getElementById('openStampBtn').addEventListener('click', openStampPlacement);
document.getElementById('closeStampBtn').addEventListener('click', closeStampPlacement);
document.getElementById('uploadStampBtn').addEventListener('click', uploadStampUrls);

window.addEventListener('message', (event) => {
  if (event.data.type !== 'uploadStampResult') return;
  console.log('Stamp upload result', event.data.payload);
});

Continue with related placement workflows.

• Symbols: Symbols
• Placement API: API References
• Canvas Setup: Canvas