Iframe integration

One hosted editor, embedded inside customer storefronts.

Product pages can open the designer with the right template, size, and return path so customers can edit artwork without leaving the buying flow.

embed.html

<iframe
  src="https://www.webprinteditor.com/embed/{sessionId}"
  title="Customize your design"
  width="100%"
  height="840"
  allow="clipboard-write"
></iframe>

01

Create a design session

The storefront sends product, return URL, and customer references to WebPrintEditor.

02

Load the right template

The editor opens with the selected product size, page setup, proofing guides, and starter artwork.

03

Load the iframe

The buyer customizes text, images, clipart, colors, and layout without leaving the product page.

04

Return to checkout

The final response contains a design ID, preview image, editable project, and print file links.

POST /api/embed/sessions

import crypto from "node:crypto";

const body = JSON.stringify({
    "tenantId": "tenant_modern_print",
    "productId": "product_business_card",
    "returnUrl": "https://modernprint.example/cart",
    "storefrontDomain": "modernprint.example",
    "customerReference": "cart_line_123",
    "startBlank": false,
    "metadata": {
      "storefront": "modernprint.example",
      "productPage": "/products/premium-business-card"
    }
  });
const timestamp = Math.floor(Date.now() / 1000).toString();
const signature = crypto
  .createHmac("sha256", process.env.WEBPRINTEDITOR_EMBED_SECRET)
  .update(`${timestamp}.${body}`)
  .digest("hex");

const response = await fetch("https://www.webprinteditor.com/api/embed/sessions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "x-wpe-timestamp": timestamp,
    "x-wpe-signature": signature
  },
  body
});

const session = await response.json();

Checkout handoff

Finished designs go back to the storefront cart.

When the buyer clicks Finish Order, the iframe saves the design and sends the parent website a message containing the saved design ID, preview image, proof PDF, production PDF, and production SVG. The storefront stores those values on the cart or order line.

Store the design ID

Attach the savedDesignId to the cart line so the print shop can reopen or locate the exact artwork.

Show the preview

Use previewUrl for cart thumbnails, order review, and customer confirmation screens.

Keep production files

Save productionPdfUrl and productionSvgUrl with the order for prepress and fulfillment.

Use your own checkout

Shopify, WooCommerce, custom carts, and POS systems can keep their existing payment flow.

product-page.js

const WEBPRINTEDITOR_ORIGIN = "https://www.webprinteditor.com";

window.addEventListener("message", async (event) => {
  if (event.origin !== WEBPRINTEDITOR_ORIGIN) return;
  if (event.data?.type !== "webprinteditor.design.completed") return;

  const { customerReference, design, files, product } = event.data;

  await fetch("/cart/add-design", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      cartLineId: customerReference,
      productId: product.id,
      savedDesignId: design.savedDesignId,
      previewUrl: files.previewUrl,
      proofPdfUrl: files.proofPdfUrl,
      productionPdfUrl: files.productionPdfUrl,
      productionSvgUrl: files.productionSvgUrl
    })
  });

  window.location.href = "/cart";
});