• Overview
• How It Works
• Step 1: Embed the Customizer
• Step 2: Handle Add to Cart
• Step 3: Fetch Print Files

Customizer + Print Hub Integration Guide

Overview

This guide walks through integrating the Customizer iframe with the Print Hub API. Your storefront embeds the Customizer with mode: 'external', receives a design_id when a customer finishes a design, and uses that design_id to fetch print files when you're ready to fulfil.

How It Works

┌───────────────────────┐
│  Your Storefront      │
│                       │
│  ┌────────────────┐   │
│  │  Customizer    │   │   1. Customer personalises product
│  │  (iframe)      │   │
│  └───────┬────────┘   │
│          │            │
│          ▼            │
│  onAddToCart fires    │   2. You receive design_id, thumbnails, metadata
│  ─ design_id          │
│  ─ thumbnails         │
│  ─ metadata           │
│                       │
│  Store in your        │   3. Save to your order/cart system
│  order system         │
└──────────┬────────────┘
           │
           ▼
┌──────────────────────┐
│  When ready to       │   4. Call Print Hub API to fetch print files
│  fulfil order        │
│                      │
│  GET /orders/        │
│  {design_id}/        │
│  print-files         │
└──────────────────────┘

Step 1: Embed the Customizer

Add the Customizer iframe to your storefront with mode set to 'external'. See the full Customizer Integration Documentation for all configuration options.

<script src="https://cdn.idealfactory.com/editors/customiser_xxx.min.js"></script>
<div id="customizer-container"></div>

const customizer = new Customizer({
    containerId: 'customizer-container',
    iframeSrc: 'provided individually for each client',
    direct_product_id: 'xxxxxxxx',
    editor_id: 'xxxxxxxx',
    language: 'en',
    mode: 'external',
    onAddToCart: handleAddToCart,
    platform: 'custom'
});

Step 2: Handle Add to Cart

When a customer finishes customizing and adds the product to their cart, the onAddToCart callback fires with the following data:

function handleAddToCart(cartData) {
    // {
    //     design_id: string,
    //     thumbnails: string[],
    //     metadata: object
    // }

    // Store in your order/cart system
    // Use thumbnails for cart display
    // design_id is needed later to fetch print files
}

• design_id — unique identifier for this design. Store this with the order; you'll need it for fulfilment.
• thumbnails — array of preview image URLs. Use these to display the customized product in your cart and order confirmation.
• metadata — additional design metadata.

Step 3: Fetch Print Files

When you're ready to fulfil the order, call the Print Hub API to retrieve the production-ready files. See the Print Hub API Documentation for authentication details.

GET https://print-hub.customiser.online/api/v1/orders/{design_id}/print-files
Authorization: Bearer YOUR_API_TOKEN

Response:

{
  "design_id": "DESIGN_ID",
  "files": [
    {
      "url": "https://...",
      "format": "pdf",
      "dpi": 300
    }
  ]
}

Use the returned file URLs to download and send to your production facility.

For any additional customization or integration needs please contact us.