Downloads

const iframe = document.querySelector("iframe");

// Request PNG content
iframe.contentWindow.postMessage(
  {
    type: "orshot:request:template",
    requestId: `req-${Date.now()}`,
    format: "png", // png, pdf, or html
  },
  "https://orshot.com"
);

// Listen for response
window.addEventListener("message", (event) => {
  if (!event.origin.includes("orshot.com")) return;

  if (event.data.type === "orshot:template:content") {
    const { content, format, mimeType, templateName } = event.data.data;

    // content is base64 data URL for images/PDF
    // or HTML string for html format
    console.log(`Received ${format} content for ${templateName}`);
  }
});

Download Events

When users download from the embed, events are fired to your parent page (if events are enabled):

Event	Description
`orshot:download:png`	Downloaded as PNG (single page or ZIP for multi-page)
`orshot:download:pdf`	Downloaded as PDF (single or multi-page)
`orshot:download:html`	Downloaded as HTML (single page or ZIP for multi-page)

Event Payload

// Single page download
{
  type: "orshot:download:png",
  timestamp: "2024-01-15T10:30:00.000Z",
  data: {
    templateId: 123,
    templateName: "My Design",
    pageIndex: 0,
    scale: 2,
    content: "data:image/png;base64,..."
  }
}

// Multi-page download (ZIP or multi-page PDF)
{
  type: "orshot:download:png",
  timestamp: "2024-01-15T10:30:00.000Z",
  data: {
    action: "zip", // "zip" for PNG/HTML, "multipage" for PDF
    templateId: 123,
    templateName: "My Design",
    pageCount: 3,
    scale: 2
  }
}

// Copy to clipboard
{
  type: "orshot:download:png",
  timestamp: "2024-01-15T10:30:00.000Z",
  data: {
    action: "clipboard",
    templateId: 123,
    templateName: "My Design",
    pageIndex: 0,
    scale: 2,
    content: "data:image/png;base64,..."
  }
}

Use Cases

Track Downloads

Monitor what users export for analytics:

window.addEventListener("message", (event) => {
  if (!event.origin.includes("orshot.com")) return;

  if (event.data.type.startsWith("orshot:download:")) {
    const format = event.data.type.replace("orshot:download:", "");

    // Track in your analytics
    analytics.track("embed_download", {
      format,
      templateId: event.data.data.templateId,
      templateName: event.data.data.templateName,
    });
  }
});

Custom Download Flow

Process exports through your backend:

window.addEventListener("message", async (event) => {
  if (!event.origin.includes("orshot.com")) return;

  if (event.data.type === "orshot:template:content") {
    const { content, format, templateId } = event.data.data;

    // Send to your backend for processing
    await fetch("/api/exports", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ content, format, templateId }),
    });
  }
});

Configuration

Setting	Description
Allow Downloads	Enable/disable the download button in embed UI
Enable Events	Receive download events via postMessage

Both settings work independently - you can enable downloads UI while also receiving events, or disable downloads and handle exports programmatically.

On this page