Users can download their designs directly from the embed in multiple formats. Enable the Allow Downloads setting in your embed configuration.
| Format | Extension | Best For |
|---|---|---|
| PNG | .png | High-quality images with transparency |
.pdf | Print-ready documents | |
| HTML | .html | Web pages, email templates |
When downloads are enabled, users see download options in the embed toolbar:
Users can select the output scale for image exports:
Instead of letting users download directly, you can handle exports through your own application using Events.
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}`);
}
});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) |
// 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,..."
}
}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,
});
}
});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 }),
});
}
});| 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.
