Message API/docs/components/placement/stamp

Stamp

Control the viewer stamp panel and upload remote stamp URLs from the host application.

Overview

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

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

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

Open and Close

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

Open Stamp UI

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

Close Stamp UI

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

Upload Stamps

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

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

Upload stamp URLs

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
  }
}, '*');

Handle uploadStampResult

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 });
});

Recommended Workflow

Keep the host workflow simple and send the command only after the viewer 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.

Complete Example

This example wires stamp open, close, and upload actions to the current viewer 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);
});
Complete Example