# Downloads

> Export templates as PNG, PDF, or HTML from the embed

- **URL**: https://orshot.com/docs/orshot-embed/downloads

---

Users can download their designs directly from the embed in multiple formats. Enable the **Allow Downloads** setting in your embed configuration.

## Available Formats

| Format | Extension | Best For                              |
| ------ | --------- | ------------------------------------- |
| PNG    | `.png`    | High-quality images with transparency |
| PDF    | `.pdf`    | Print-ready documents                 |
| HTML   | `.html`   | Web pages, email templates            |

## User Interface

When downloads are enabled, users see download options in the embed toolbar:

### Current Page Options

- **Copy as PNG** - Copy the current page to clipboard
- **Save as PNG** - Download current page as PNG image
- **Save as PDF** - Download current page as PDF document
- **Save as HTML** - Download current page as HTML file

### Multi-Page Options (when template has multiple pages)

- **Save all as PNG** - Download all pages as a ZIP file containing PNGs
- **Save all as PDF** - Download all pages as a single multi-page PDF
- **Save all as HTML** - Download all pages as a ZIP file containing HTML files

### Scale Options

Users can select the output scale for image exports:

- **1x** - Original size
- **2x** - Double resolution (recommended)
- **3x** - Triple resolution

## Programmatic Downloads

Instead of letting users download directly, you can handle exports through your own application using [Events](https://orshot.com/docs/orshot-embed/events).

### Disable Direct Downloads

1. Turn off **Allow Downloads** in embed settings
2. Enable **Events** to receive download events
3. Request content programmatically from your parent page

### Request Content Example```javascript
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```javascript
// 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:```javascript
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:```javascript
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.