Mockup Service

The Printess Mockup Service enables you to offer Mockups dynamically and for any variety of personalized products in seconds. It applies Buyer’s content from a Save Token to other Templates. It enables you to create dynamic previews. This could be a Layout Snippet Selection applied to the product picture or a fully personalized Thumbnail in the Shopping Basket. Or you can use personalized Thumbnails for upselling as well as for targeted campaigns and re-marketing.

Learn more about Printess Mockups here

Learn to set up a Printess Mockup

The Printess API provides two powerful endpoints for generating product mockups, enabling you to create dynamic visual representations of customized products for various use cases including customer shops, marketing campaigns, and B2B catalogs.

Overview

The API offers two distinct approaches to mockup generation:

1. Frontend URL Creation (/saas/mockup/url/create)

   • Generate mockup URLs directly from your frontend for customer-facing applications
   • Uses Shop Token

2. Backend Image Generation (/saas/mockup/url/generate)

   • Create temporary mockup images via backend services that are deleted after 24 hours
   • Uses Service Token

The required bearer tokens can be accessed in the Account-Portal or from the editor.

Endpoints

1. Create Mockup URL

Endpoint: /saas/mockup/url/create

Purpose: Generate dynamic mockup URLs that can be used directly in customer shops after products have been processed through the normal Printess workflow.

Important Notes: This endpoint creates a url, which leads to the image rendering serverside when requested. The url of the image that is generated can get very long, depending on the individual parameters of the Mockup.

Authentication: Shop Token

Use Cases:

• Customer shop integration after product customization
• B2B brand catalog generation
• Real-time mockup display for customized products

Example Usage:

const shopToken = "..."; // from your Account Portal or Editor

async function createMockupUrl(mockupRequestBody) {
    const response = await fetch("https://api.printess.com/saas/mockup/url/create", {
        method: "POST",
        mode: "cors",
        cache: "no-cache",
        credentials: "omit",
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + shopToken
        },
        redirect: "follow",
        referrerPolicy: "no-referrer",
        body: JSON.stringify(mockupRequestBody)
    });

    if (!response.ok) {
        throw new Error(response.statusText);
    }

    const result = await response.json();
    return result.url;
}

2. Generate Mockup Image

Endpoint: /saas/mockup/url/generate

Purpose: Create temporary mockup image URLs.

Authentication: Service Token (Backend only)

Important Notes:

• Generated images are automatically deleted after 24 hours
• Must save images to external storage for longer-term use
• Use cases for marketing emails, upselling campaigns, and promotional materials

Request Schema

const mockupRequestBody = {
  // Core template configuration
  templateName: "string",
  userId: "string",
  documentName: "string",
  published: true,
  contentTemplateName: "string",

  // Rendering specifications
  pagesToSkip:  0,
  maxWidth:  1000,
  maxHeight: 1000,

  // Dynamic content insertion
  formFields: {
    "additionalProp1": "string",
    "additionalProp2": "string",
    "additionalProp3": "string"
  },

  // Template merging (up to 3 merge operations)
  merge1: "string",
  merge1document: "string",
  merge1targetDocument: "string",
  merge2: "string",
  merge2document: "string",
  merge2targetDocument: "string",
  merge3: "string",
  merge3document: "string",
  merge3targetDocument: "string",

  // Snippet content integration
  snippetUrl: "string",
  snippetTargetDocumentName: "string"
};

Core Parameters

Rendering Configuration

Dynamic Content

Example:

formFields: {
    "Name": "John Doe",
    "phoneNumber": "+1-555-0123",
    "color": "green"
}

Template Merging

The API supports up to 3 merge operations for complex template combinations:

The merge1-key would be the template name, merge1document the document inside that and merge1targetDocument the document inside the target document to apply to.

Snippet Integration

Example Request

const mockupRequestBody = {
    // Core configuration
    templateName: "mug-template",
    userId: "user123",
    documentName: "standard-mug-preview",
    published: true,
    contentTemplateName: "...", // From customized product

    // Rendering settings
    pagesToSkip: 0,
    maxWidth: 1000,
    maxHeight: 1000,

    // Dynamic content
    formFields: {
        "Name": "Jane Smith",
    },

    // Template merging
    merge1: "background-template",
    merge1document: "bg-doc",
    merge1targetDocument: "main-doc"
};

// Usage
const mockupUrl = await createMockupUrl(mockupRequestBody);
console.log("Generated mockup URL:", mockupUrl);

CodePen examples

The following examples are simplified template products, customize the product and add them to the basket to trigger the mockup generation.

The Photo-Mug Mockup-CodePen illustrates a simple example of applying a template to generate pictures from another one.

This Baby Photo Book Mockup-CodePen shows how to generate thumbnail images via the Mockup Service of the same template by iterating through the pages via the body parameters.

In the Photo T-Shirt Mockup Variations-CodePen a simple T-Shirt Template is used to showcase the formFields-parameter to generate mockups with different colors.

Workflow Integration

Typical Frontend Flow

1. Customer customizes a product (e.g., t-shirt with custom image)
2. Printess workflow processes the customization and generates a saveToken
3. Use the saveToken as contentTemplateName in mockup request
4. Generate mockups for alternative products (mugs, pillows, bags, etc.)
5. Display mockups in customer shop for cross-selling opportunities

Backend Marketing Flow

1. Retrieve processed product data with saveToken
2. Use /saas/mockup/url/generate with Service Token
3. Generate temporary mockup images
4. Download and save images to your storage system
5. Use images in email campaigns, promotional materials, etc.

Use Case Examples

E-commerce Cross-selling

Customer designs a custom t-shirt → Generate mockups for mugs, phone cases, and tote bags → Display as “Also available on” options

B2B Catalog Generation

Brand uploads logo and content → Generate mockups across entire product catalog → Create branded product showcase

Email Marketing

Completed custom order → Generate product mockups → Include in order confirmation and promotional emails