Embed the Creative Simulator via <iframe>

// Save a specific frame of a video product as JPG: pause/seek first, then exportImage.
send({ type: "kreativsimulator:seek", frame: 120 });
send({ type: "kreativsimulator:exportImage", filename: "poster", width: 1920, height: 1080 });

// Export WITHOUT the tenant logo (top left): the field wins over the URL.
// ?logo=0 on the iframe URL switches it off for every export of this embed.
send({ type: "kreativsimulator:export", filename: "creation", width: 1920, height: 1080, logo: false });
send({ type: "kreativsimulator:exportImage", filename: "poster", logo: false });

{ source: "kreativsimulator", v: 1, type: "ready",
  product: "ec5472c2", locale: "de",
  products: [{ code: "ec5472c2", name: "City-Light …" }, …],
  // product library only: products = the first 30, the total count is here
  productsTotal: 240,
  loaders: [{ name: "Loader A", aspectRatio: 2.96 }, …],
  // shape of the current stage (backing: long side 1280), stage mode and
  // export presets relative to that shape (short side 360/720/1080)
  render: { width: 1280, height: 720, aspectRatio: 1.7778, stage: "auto",
            presets: [{ label: "Small (640×360)", width: 640, height: 360 },
                      { label: "Standard (1280×720)", width: 1280, height: 720 },
                      { label: "Large (1920×1080)", width: 1920, height: 1080 }] },
  // photo products (productType "bild"): effects[] = two always-present static
  // presets (static-5s, static-10s) + named Ken-Burns effects; default = static-5s.
  // video products report isPhoto:false, effects:[], selectedEffect:null.
  isPhoto: true,
  effects: [{ id: "static-5s", name: "Static (5s)", durationFrames: 125 },
            { id: "static-10s", name: "Static (10s)", durationFrames: 250 },
            { id: "fx-a", name: "Effect A", durationFrames: 125 }, …],
  selectedEffect: "static-5s" }

{ source: "kreativsimulator", v: 1, type: "productChanged", code: "ec5472c2",
  loaders: [{ name: "Loader A", aspectRatio: 2.96 }, …],
  // the shape can change with the product (a photo is not 16:9) → resize your iframe box
  render: { width: 1280, height: 854, aspectRatio: 1.4988, stage: "auto", presets: [ … ] },
  isPhoto: true,
  effects: [{ id: "static-5s", name: "Static (5s)", durationFrames: 125 },
            { id: "static-10s", name: "Static (10s)", durationFrames: 250 },
            { id: "fx-a", name: "Effect A", durationFrames: 125 }, …],
  selectedEffect: "static-5s" }

// reply to getEffects {code}: a product's effect list WITHOUT activating it.
// same fields as productChanged (incl. the static presets), plus code.
// video products report isPhoto:false, effects:[], selectedEffect:null.
{ source: "kreativsimulator", v: 1, type: "effects", code: "ec5472c2",
  isPhoto: true,
  effects: [{ id: "static-5s", name: "Static (5s)", durationFrames: 125 },
            { id: "static-10s", name: "Static (10s)", durationFrames: 250 },
            { id: "fx-a", name: "Effect A", durationFrames: 125 }, …],
  selectedEffect: "static-5s" }

// playback state: on play/pause, ~4×/s while playing, after seek/stop/step, and on getState
// for photo products, frameCount equals the active effect's duration
{ source: "kreativsimulator", v: 1, type: "playbackState",
  frame: 120, playing: true, frameCount: 250, fps: 25 }

// confirmation after setChrome, with the new visibility state.
// views / selection / library are added only when the view picker, the selection or the library is enabled.
{ source: "kreativsimulator", v: 1, type: "chromeChanged",
  header: false, sidebar: false, playback: true, timeline: true, export: false, effects: false }

// fullscreen state — on every change (e.g. ESC); for syncing your own button
{ source: "kreativsimulator", v: 1, type: "fullscreenChanged", fullscreen: true }

// the stage (canvas shape) changed: after setStage, setProduct{stage} or a product
// switch with a different aspect ratio. Same fields as the render block.
{ source: "kreativsimulator", v: 1, type: "stageChanged",
  width: 1280, height: 1280, aspectRatio: 1, stage: "explicit", presets: [ … ] }

// confirmation after a successful setCreative. kind = detected type,
// live: true = live stream (not seekable).
{ source: "kreativsimulator", v: 1, type: "creativeLoaded",
  url: "https://…/live.m3u8", loader: "Loader A", kind: "stream", live: true }

{ source: "kreativsimulator", v: 1, type: "error", message: "…", code, loader }

// views enabled only: the shown view changed (end customer in the iframe, setView).
// fallback: true = the requested view does not exist (any more) → default view shown.
// Pass `view` as `impressionKey` when you order.
{ source: "kreativsimulator", v: 1, type: "viewChanged",
  code: "ec5472c2", view: "0e23675447", fallback: false }

// selection enabled only: its content after every change and after it is restored
// from the browser. param = the full state as the value for ?sel= ("" = empty).
{ source: "kreativsimulator", v: 1, type: "selectionChanged", count: 2,
  items: [{ code: "ec5472c2", view: null, name: "City-Light …", ready: true }, …],
  param: "1.eyJ…" }

// share link created (copied = on the clipboard). param = the value for ?sel=.
{ source: "kreativsimulator", v: 1, type: "selectionLinkCopied",
  url: "https://demo.kreativsimulator.com/?sel=1.eyJ…", param: "1.eyJ…", copied: true }

// slideshow created (slideshow enabled only).
{ source: "kreativsimulator", v: 1, type: "slideshowCreated",
  url: "https://demo.kreativsimulator.com/s/Abc…", expiresAt: "2026-10-03T12:00:00.000Z" }

// "Token only" access: products are missing because of the access.
// "missing" = no token, "expired" = token/session expired or already used,
// "denied" = no access. Answer: a new token via setAccessToken.
{ source: "kreativsimulator", v: 1, type: "accessRequired", reason: "expired" }

// ready and productChanged carry two extra fields when views are enabled:
views: [{ key: "6c02edffc6", name: "Wide shot", isDefault: true,
          visibleLoaders: ["Loader A"],            // placeholders visible in this view
          previewUrl: "/api/vc/v1/products/ec5472c2/impressions/6c02edffc6/creative?w=320&kind=preview" },
        { key: "0e23675447", name: null, isDefault: false, … }],
view: "6c02edffc6"                                  // the view shown now

// Products without views (film, classic photo products): views: [], view: null.

// Your own picker: hide the "Views (n)" button (?views=0), show the previews, switch:
send({ type: "kreativsimulator:setChrome", views: false });
const img = new URL(v.previewUrl, iframe.src).href;  // previewUrl is relative to the simulator
send({ type: "kreativsimulator:setView", view: "0e23675447" });  // view: null = default view

https://virtualcampaign-prod.nbg1.your-objectstorage.com/assets-public/<token>/web_720.webp

// A published asset from the VirtualCampaign asset management — same host as
// the simulator, so no CORS setup on your side. Pick the web_* variant you need.
send({
  type: "kreativsimulator:setCreative",
  url: "https://virtualcampaign-prod.nbg1.your-objectstorage.com/assets-public/7f3a…/web_720.webp",
  loader: "Loader A",
});

// A live stream as the creative: HLS (.m3u8) or DASH (.mpd), live or on demand.
// Any public http(s) URL works — no CORS needed, the simulator falls back to its
// own media proxy. Public HLS live test stream (Unified Streaming):
send({
  type: "kreativsimulator:setCreative",
  url: "https://demo.unified-streaming.com/k8s/live/stable/scte35.isml/.m3u8",
  loader: "Loader A", // optional — without it, all placeholders
  // kind: "stream",  // only needed if the URL has no .m3u8 / .mpd ending
});

window.addEventListener("message", (e) => {
  const m = e.data;
  if (!m || m.source !== "kreativsimulator") return;
  if (m.type === "creativeLoaded") console.log(m.kind, m.live ? "LIVE" : "VOD"); // "stream" LIVE
  if (m.type === "error") console.warn(m.message); // e.g. "hls …" if the stream fails
});

<iframe id="ks" src="https://demo.kreativsimulator.com/"
        style="width:100%;height:720px;border:0" allow="fullscreen"></iframe>

<script>
  const iframe = document.getElementById("ks");
  const send = (msg) => iframe.contentWindow.postMessage(msg, "*");

  window.addEventListener("message", (e) => {
    const m = e.data;
    if (!m || m.source !== "kreativsimulator") return;

    if (m.type === "ready") {
      // Build your own buttons from the product list
      for (const p of m.products) {
        const btn = document.createElement("button");
        btn.textContent = p.name;
        btn.onclick = () =>
          send({ type: "kreativsimulator:setProduct", code: p.code });
        document.body.appendChild(btn);
      }
      // Build your own resolution picker + export button from m.render.presets
      const sel = document.createElement("select");
      for (const r of m.render.presets) {
        const o = document.createElement("option");
        o.value = r.width + "x" + r.height;
        o.textContent = r.label;
        sel.appendChild(o);
      }
      const exportBtn = document.createElement("button");
      exportBtn.textContent = "Export";
      exportBtn.onclick = () => {
        const [width, height] = sel.value.split("x").map(Number);
        send({ type: "kreativsimulator:export", filename: "creation", width, height });
      };
      document.body.append(sel, exportBtn);
    }

    // The product is active now → only here may you target a placeholder.
    if (m.type === "productChanged") {
      const first = m.loaders[0];                // take the name from the event
      if (first) {
        send({
          type: "kreativsimulator:setCreative",
          url: "https://cdn.your-agency.com/creative.png",
          loader: first.name,                    // this placeholder only
        });
      }
    }

    if (m.type === "error") console.warn("KS error:", m.message);
  });

  // Creative on ALL placeholders (no loader) — fine right after `ready`:
  // send({ type: "kreativsimulator:setCreative", url: "https://cdn.your-agency.com/creative.png" });
</script>

curl -X POST https://api.virtualcampaign.dev/v1/kreativsimulator/embed-tokens \
  -H "Authorization: Bearer <API-KEY>" \
  -H "Content-Type: application/json" \
  -d '{"site":"<your-tenant>"}'

{
  "token": "vcke_…",
  "expiresAt": "2026-09-25T12:05:00.000Z",
  "site": "<your-tenant>",
  "embedUrl": "https://<your-tenant>.kreativsimulator.com/#vcToken=vcke_…"
}

// Call this only for signed-in visitors. You check that as usual.
async function kreativsimulatorEmbedUrl() {
  const res = await fetch("https://api.virtualcampaign.dev/v1/kreativsimulator/embed-tokens", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.VC_KREATIVSIMULATOR_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ site: "<your-tenant>" }),
  });
  if (!res.ok) throw new Error(`Kreativsimulator token: ${res.status}`);
  const { embedUrl } = await res.json();
  return embedUrl;
}

<iframe src="https://<your-tenant>.kreativsimulator.com/?lang=de&product=ec5472c2#vcToken=vcke_…"
        title="Kreativsimulator" style="width:100%;height:720px;border:0" allow="fullscreen"></iframe>

window.addEventListener("message", async (e) => {
  if (e.data?.source !== "kreativsimulator" || e.data.type !== "accessRequired") return;
  const { token } = await fetch("/my-server/kreativsimulator-token").then((r) => r.json());
  iframe.contentWindow.postMessage({ type: "kreativsimulator:setAccessToken", token }, "*");
});

<iframe id="ks" src="https://demo.kreativsimulator.com/"
        title="Kreativsimulator" style="width:100%;height:720px;border:0"
        allow="clipboard-write; fullscreen"></iframe>
<script>
  window.addEventListener("message", (e) => {
    if (e.data?.source !== "kreativsimulator") return;
    // the full selection as the value for ?sel= — store it, e.g. in the user account
    if (e.data.type === "selectionChanged") saveSelection(e.data.param);   // your function
    if (e.data.type === "selectionLinkCopied") console.log("share link:", e.data.url);
    if (e.data.type === "slideshowCreated") console.log("slideshow until", e.data.expiresAt);
  });
  // later, on any device: open the stored selection on your page
  // document.getElementById("ks").src =
  //   "https://demo.kreativsimulator.com/?sel=" + encodeURIComponent(storedParam);
</script>