Integration Recipes

This article offers practical, end-to-end examples and code snippets.

Introduction & GitHub Link:

These recipes represent the most common business workflows for integrating the TronDesigner Editor. While the Editor Arguments page defines the "What," this page focuses on the "How" – providing end-to-end patterns for different technical environments.

Reference Implementation (GitHub)

For the latest runnable end-to-end integration examples (kept more up to date than this documentation page), please also check our public GitHub repository.

The repository contains TronDesigner – Editor – Integration Examples and is intended as a practical reference implementation you can copy/adapt into your webshop or other host application.

Summary: Which Recipe Should I Start With?

  • Webshop / Simpler site

    • Start with the Exact Mode (Web Script + JS Event) – Recipe 1.

    • Move to the Partial Mode when you need variant/print selection inside the Editor – Recipe 2.

  • ERP / CRM / Back-office

    • Start with Exact Mode (URL + Webhook) – Recipe 4.

    • Move to Partial / Own Modes as you externalize more data from TronCloud to your systems – Recipe 5 and Recipe 6.

Webshop – Exact Product (Web Script + JS Event)

Goal: Open the Editor for a known product and print option in TronCloud (Exact mode), then attach the resulting printJobGuid to a shopping cart line in your webshop.

Best for:

  • Standard products from TronCloud.

  • Fixed decoration (e.g., 1 position, 1 technology).

  • Classic “Customize” button on a product page.

Steps

  1. Include the Web Integration Script.

  2. Add a button with data attributes to open the Editor.

  3. Listen for td.printJob.created and store printJobGuid with the cart line.

Open via Data Attributes (Exact Mode):

Example
<!-- Integration script (simplified) -->
<script
  async
  referrerpolicy="origin"
  src="https://app.trondesigner.com/js/website-integration.js"
  data-td-api="https://app.trondesigner.com/api"
  data-td-api-key="{API_KEY}">
</script>

<!-- Product “Customize” button -->
<button
        data-td-action="OpenCreate"
        data-td-supplier-code="PFC"
        data-td-product-code="10086021"
        data-td-print-position-code="front"
        data-td-print-technology-code="PAD03">
    Oregon 400 ml - Red
</button>

This opens the editor in Create + Exact mode using TronCloud data for:

  • Supplier: PFC

  • Product variant: 10000200

  • Print position: FRONT

  • Technology: PAD03

Capture the Result (JS Event):

Example
<script>
    const td_subscribe = () => {
        window.tronDesigner.subscribeDesignerEvent("printJob", "created", (event) => {
            console.log("Print Job Created:");
            console.log(event);
        });
        console.log("Subscribed to 'printJob created' event.");
    }

    const td_check = () => {
        if (window.tronDesigner) {
            td_subscribe();
        } else {
            setTimeout(td_check, 100);
        }
    }
    td_check();
</script>

Expected event payload (simplified):

{
  "eventType": "created",
  "entityType": "printJob",
  "entityGuid": "482ff090-b443-43d6-ac69-c849060c508c",
  "detail": {
    "version": "v1.0",
    "printJobGuid": "482ff090-b443-43d6-ac69-c849060c508c",
    "created": "2025-12-18T21:01:05.2041022+00:00",
    "updated": null,
    "supplier": "c2c9fb8a-f110-4003-909f-2fdf361543b2",
    "supplierName": "PF Concept International Cooperatief U.A.",
    "customer": {
      "customerGUID": "60659556-1f70-437d-95f3-602067e8ef83"
    },
    "code": "PJ00000018",
    "language": 1826,
    "languageCode": "EN",
    "state": 38502,
    "printModelGuid": "40e6daf6-2ccd-4b76-9451-3c9434f7544c",
    "product": {},
    "printings": [
      {
        "printingGuid": "c58930e2-00ee-4491-99f4-671da62a45c9",
        "productColorVariants": [],
        "printData": {},
        "printMockup": {},
        "printMotive": {},
        "validationMessages": []
      }
    ],
    "customProperties": null
  }
}

Webshop – Partial Data (Web Script + JS Event)

Goal: You know the model and maybe a few variants, but you want the user to choose variants and print options inside the Editor (Free Mode).

Best for:

  • Products with many color/size combinations.

  • You don’t want to manage all print options in your webshop.

  • You want TronDesigner to drive the “select variant + position/tech” step.

Steps

  1. Open Editor with minimal product input (supplierCode + modelCode or a variant subset).

  2. Let the Editor show a selection dialog (variants, print positions, print technologies).

  3. Listen for td.printJob.created and store printJobGuid.

  4. Use REST if you need to show a design preview in your cart or order details.

Open via JS (Free Mode):

Example
// Called e.g. on "Customize" button click
function openDesignerPartial() {
  window.tronDesigner.openDesigner({
    openMode: "CREATE",
    dataMode: "PARTIAL", // or "FREE" in business terminology
    printJob: {
      product: {
        supplierCode: "PFC",
        modelCode: "100002" // user will choose variants, print options in editor
      },
      customer: {
        orderCode: "CART-2025-002",
        orderItemCode: "LINE-05"
      }
    }
  }, { mode: "dialog" });
}

Handle Result:

Example
window.tronDesiger.subscribeDesignerEvent("printJob", "created", (event) => {
  const { printJobGuid, customer } = event.detail;

  // Link to current order item
  savePrintJobForOrder({
    orderCode: customer?.orderCode,
    orderItemCode: customer?.orderItemCode,
    printJobGuid
  });
});

Expected event payload (simplified):

Example
{
  entityType: 'printJob',
  eventType: 'created',
  entityGuid: '948ada90-0947-4fc2-a938-cf0f4ae57150',
  detail: {
    printJobGuid: '948ada90-0947-4fc2-a938-cf0f4ae57150',
    customer: {
      orderCode: 'CART-2025-001',
      orderItemCode: 'LINE-03'
    },
    customProperties: {
    }
  }
}

Webshop – Own Mode (Web Script + JS Event)

Goal: Use TronDesigner for your own catalog, not part of TronCloud. You provide your own product, variants and mockup backgrounds.

Best for:

  • Custom textile lines or white-label products.

  • External PIM/ERP managing products and printing options.

  • You need full control over names, codes, and mockup visuals.

Steps

  1. Build a full Editor Arguments JSON payload for dataMode: "Own" (Custom).

  2. Open editor via openMode: "Create".

  3. Receive printJobGuid via JS event.

  4. Use REST API to fetch finished design, proofs, and print data.

Open via JS (Custom):

Example
window.tronDesigner.openDesigner(
  {
    openMode: "Create",
    dataMode: "Own",
    printJob: {
      title: "Custom Bottle – Campaign Spring 24",
      addProducts: {
        model: {
          modelCode: "INT-BOTTLE-500",
          title: "Internal 500 ml Bottle",
          description: "Our own bottle model, 500 ml.",
        },
        variants: [
          {
            productCode: "INT-BOTTLE-500-GREEN",
            quantity: 50,
            overrides: {
              productName: "Bottle Green 500 ml",
            },
          },
        ],
      },
      addPrintings: [
        {
          printPositionCode: "FRONT",
          printTechnologyCode: "SCREEN",
          overrides: {
            printPositionName: "Front area",
            printTechnologyName: "Screenprint",
          },
          colorMode: "Pantone",
        },
      ],
      customer: {
        orderCode: "CART-2025-003",
        orderItemCode: "LINE-01",
      },
      customProperties: {
        pimProductId: "PIM-98765",
      },
    },
  },
  { mode: "dialog" },
);

Handle Result:

Example
window.tronDesigner.subscribeDesignerEvent("printJob", "created", (event) => {
  const { printJobGuid, customProperties } = event.detail;

  linkOwnProductDesign({
    pimProductId: customProperties?.pimProductId,
    printJobGuid
  });
});

Expected event payload (simplified):

Example
{
  entityType: "printJob",
  eventType: "created",
  detail: {
    printJobGuid: "22222222-2222-2222-2222-222222222222",
    customProperties: {
      pimProductId: "PIM-98765"
    }
  }
}

Webshop Advanced: Mapping & UI Customization

Product & Printing Overrides

Use these to map TronDesigner technical codes to your internal shop identifiers or to localize labels for your users.

Product overrides HTML Data Attributes

<button 
  data-td-action="OpenCreate" 
  data-td-supplier-guid="c2c9fb8a-f110-4003-909f-2fdf361543b3" 
  data-td-product-codes='["AAP003-160","AAP003-103"]' 
  data-td-product-code-overrides='["003-160","003-103"]' 
  data-td-product-name-overrides='["White","Green"]'
  ...
>
Open editor 
</button>

Product overrides JS API Builder

window.tronDesigner
  .setExactProduct(
    undefined,
    "c2c9fb8a-f110-4003-909f-2fdf361543b3",
    (builder) => {
      builder.addVariants(
        {
          productCode: "AAP003-160",
          overrides: {
            productCode: "003-160",
            productName: "White",
          },
        },
        {
          productCode: "AAP003-103",
          overrides: {
            productCode: "003-103",
            productName: "Green",
          },
        },
      );
    }
  )

Printings Overrides HTML Attributes

<button 
  data-td-action="OpenCreate" 
  data-td-supplier-guid="c2c9fb8a-f110-4003-909f-2fdf361543b3" 
  data-td-print-position-code="FRONT" 
  data-td-print-position-code-override="CUSTOM-FRONT" 
  data-td-print-technology-code="PAD03" 
  data-td-print-technology-code-override="CUSTOM-PAD03" ...
>
Open editor 
</button>

Printings Overrides JS API Builder

window.tronDesigner.addExactPrinting("FRONT", "PAD03", "CUSTOM-FRONT", "Custom Front", "CUSTOM-PAD03", "Custom PAD03")

Editor Behavior & Overlay Mode

Control how the Editor appears and what happens when the user clicks "Save." This example uses the Dialog mode to create a seamless overlay on your site.

window.tronDesigner.openDesigner({
  editor: {
    result: {
      resultAction: 'Dialog',
      closeDialog: {
        title: 'Finished',
        message: 'Print job successfully created',
        buttonText: 'OK'
      }
    }
  }
}, {mode: 'dialog'})

ERP / CRM – Exact Data (URL + Webhook)

Goal: Open TronDesigner in a standalone page from an ERP or back-office system, using Exact TronCloud data, and receive the result via webhook (no JS embedding).

Best for:

  • ERP/CRM where browser integration is limited.

  • Internal tools where operators prepare designs for customers.

  • Server-side workflows that must stay in sync via backend events.

Steps

  1. Your application requests a secured link from TronDesigner API.

  2. The user clicks this link in ERP → a new browser window opens the Editor.

  3. After confirmation, TronDesigner sends a Webhook with printJobGuid.

  4. Your backend stores printJobGuid on the order and optionally calls REST API.

Generate URL in ERP (simplified pseudo-code):

Example
// Pseudo C#/backend example
var payload = new {
  openMode = "Create",
  dataMode = "Exact",
  printJob = new {
    product = new {
      supplierCode = "PFC",
      variants = new[] {
        new { productCode = "10000200" }
      }
    },
    printings = new[] [
      new {
        printPositionCode = "FRONT",
        printTechnologyCode = "PAD03"
      }
    ],
    customer = new {
      orderCode = "ERP-ORDER-2025-10",
      orderItemCode = "LINE-02"
    }
  }
};

// Sign payload into JWT (implementation depends on your stack)
var linkResponse = httpClient.Post("https://api.trondesigner.com/api/integration-site-links", payload);
var url = $"https://app.trondesigner.com/editor?token={linkResponse.linkToken}";

Show this url as a button or link in your ERP UI.

Sample webhook payload (conceptual):

Example
{
  "eventType": "PrintJobCreated",
  "printJobGuid": "33333333-3333-3333-3333-333333333333",
  "customer": {
    "orderCode": "ERP-ORDER-2025-10",
    "orderItemCode": "LINE-02"
  },
  "timestamp": "2025-10-01T10:25:42Z",
  "signature": "..."
}

Your backend:

  1. Verifies the signature using the webhook secret.

  2. Locates the ERP order by orderCode / orderItemCode.

  3. Stores printJobGuid on that order line.

ERP / CRM – Partial Data (URL + Webhook)

Goal: ERP knows the supplier and model, but lets the operator choose variants and print options inside TronDesigner. Results are pushed back via Webhook.

Best for:

  • Quotation tools where operator configures product + print options.

  • Production planning where mockups are chosen interactively.

  • Internal approval flows.

Steps

  1. Backend builds a Partial (Free) editor payload for dataMode: "Partial" (Free).

  2. Opens Editor via secured URL (JWT in query).

  3. The operator finishes configuration.

  4. Webhook fires PrintJobCreated or PrintJobUpdated.

URL Payload (conceptual):

Example
{
  "openMode": "CREATE",
  "dataMode": "PARTIAL",
  "printJob": {
    "product": {
      "supplierCode": "PFC",
      "modelCode": "100002"
    },
    "customer": {
      "orderCode": "ERP-QUOTE-1501",
      "orderItemCode": "LINE-07"
    }
  }
}

JWT and URL generation is the same as in the previous recipe.

Webhook payload (simplified):

Example
{
  "eventType": "PrintJobCreated",
  "printJobGuid": "44444444-4444-4444-4444-444444444444",
  "customer": {
    "orderCode": "ERP-QUOTE-1501",
    "orderItemCode": "LINE-07"
  },
  "status": "Draft"
}

ERP / CRM – Own Data (URL + Webhook + REST)

Goal: Your ERP manages its own products and mockups and wants TronDesigner only as a design engine, with full data loaded from your system, and results synced via webhook and REST API.

Best for:

  • Large distributors with internal PIM/ERP.

  • Private label catalogs.

  • Complex B2B workflows with internal codes and naming.

Steps

  1. Backend composes a full Custom payload (similar to Webshop Own Mode).

  2. Signs it into JWT and opens a standalone Editor URL.

  3. After completion, TronDesigner sends a Webhook with printJobGuid.

  4. Backend calls REST API to pull preview, proof, and print data when needed.

Example: High-level Flow

  • Open the Editor:

    • ERP → Signed URL → TronDesigner Editor

  • User finishes:

    • TronDesigner → Webhook → ERP (with printJobGuid)

  • Fetch details:

    • ERP → REST API → TronDesigner (proof, print data, previews)

Webhook payload (simplified):

Example
{
  "eventType": "PrintJobCreated",
  "printJobGuid": "55555555",
  "customProperties": {
    "erpItemId": "ERP-ITEM-9912"
  }
}

REST calls (conceptual):

  • GET /print-jobs/55555555 – full metadata

  • GET /print-jobs/55555555/thumbnail – preview image

  • GET /print-jobs/55555555/proof – proof PDF

  • GET /print-jobs/55555555/print-data – production files

Resources