A white-label design editor. Inside your product.

<iframe
  src="https://orshot.com/embeds/YOUR_EMBED_ID?userId=user_123"
  title="Design editor"
  allow="clipboard-write"
  style="width: 100%; height: 720px; border: none;"
></iframe>

import { OrshotEmbed } from "@orshot/embed-react";

export function Editor() {
  return (
    <div style={{ height: 720 }}>
      <OrshotEmbed
        embedId="YOUR_EMBED_ID"
        templateId="TEMPLATE_ID"
        modifications={{ headline: "Summer sale" }}
        onTemplateUpdate={(t) => save(t)}
      />
    </div>
  );
}

<script setup>
import { OrshotEmbed } from "@orshot/embed-vue";
</script>

<template>
  <div style="height: 720px">
    <OrshotEmbed
      embed-id="YOUR_EMBED_ID"
      template-id="TEMPLATE_ID"
      :modifications="{ headline: 'Summer sale' }"
      @template:update="save"
    />
  </div>
</template>

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

  switch (type) {
    case "orshot:template:update":
      saveDesign(data.id, data.pagesMeta);
      break;
    case "orshot:download:png":
    case "orshot:download:pdf":
      trackDownload(data);
      break;
  }
});

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

// Fill layers by parameter name, or open another template pre-filled
iframe.contentWindow.postMessage(
  {
    type: "orshot:embed:control",
    templateId: "481",
    modifications: {
      headline: "Summer sale",
      hero_image: "https://example.com/photo.jpg",
      "page2@headline": "Only on slide 2",
    },
  },
  "*",
);

// Ask for the user's current design (png, pdf or html)
iframe.contentWindow.postMessage(
  { type: "orshot:request:template", requestId: "export-1", format: "pdf" },
  "*",
);

window.addEventListener("message", (event) => {
  if (event.data.type === "orshot:template:content") {
    upload(event.data.data.content); // data URI
  }
});

// A button you add in the dashboard, e.g. "Add to App",
// sends the rendered design straight to your page
window.addEventListener("message", (event) => {
  if (event.data.type === "orshot:custom_action") {
    const { base64, format, buttonId } = event.data;
    attachToOrder(buttonId, base64, format);
  }
});