Integration concepts

Every TronDesigner integration answers three questions: how you launch the editor, what data you pass to it, and how you get the result back. This page explains the building blocks and links to the guide for each one. For the business view — which scenario fits your shop and what each mode means for your customers — read Integration Scenarios and Integration Logic.

One payload: editor arguments

Whichever way you launch the editor, it receives the same JSON object, EditorArguments. It tells the editor what to do:

{
  "openMode": "Create",
  "dataMode": "Exact",
  "editorOptions": { "showSelectedVariants": "None", "showSelectedPrintOptions": "None" },
  "printJob": {
    "addProducts": { "supplierCode": "PFC", "variants": [{ "productCode": "10086021" }] },
    "addPrintings": [{ "printPositionCode": "front", "printTechnologyCode": "PAD03" }]
  }
}

• openMode — what the customer does: create, edit or view a print job (open modes).
• dataMode — where the product data comes from (data modes).
• printJob — the product, print options, customer, order and custom data, or an existing print job's GUID.
• editor (optional) — what happens after the customer confirms, custom footer buttons, proofreading template.

Every field is described in Editor arguments.

How you launch the editor

Launch method	What you write	Best for	Guide
HTML data attributes	data-td-* attributes on a button	Server-rendered templates and quick prototypes. Covers catalog products, product models and existing print jobs.	HTML data attributes
JavaScript builder	Chained calls on window.tronDesigner, ending with open()	Most webshops: data assembled at runtime (variant pickers, configurators, single-page apps).	JavaScript builder API
Full JSON	openDesigner(args, options), or the data-td-options attribute	Configurations built on your server, own products, overrides, custom buttons.	Editor arguments
Integration via URL	A link to https://integration.trondesigner.com	E-mails, ERP/CRM screens, anywhere you can't add JavaScript.	Integration via URL

The first three need the integration script on your page. They are three ways of building the same EditorArguments: the data attributes are converted into one, the builder assembles one, and with full JSON you pass it yourself. With URL integration the script runs on a page hosted by TronDesigner instead of yours.

The same editor, launched four ways:

HTML attributes

<button
  type="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"
>
  Design your print
</button>

JavaScript builder

window.tronDesigner
  .setExactProduct('PFC', undefined, (product) => product.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .open({ mode: 'dialog' });

Full JSON

window.tronDesigner.openDesigner(
  {
    openMode: 'Create',
    dataMode: 'Exact',
    editorOptions: { showSelectedVariants: 'None', showSelectedPrintOptions: 'None' },
    printJob: {
      addProducts: { supplierCode: 'PFC', variants: [{ productCode: '10086021' }] },
      addPrintings: [{ printPositionCode: 'front', printTechnologyCode: 'PAD03' }],
    },
  },
  { mode: 'dialog' }
);

URL

https://integration.trondesigner.com/editor?apiKey={API_KEY}&supplierCode=PFC&productCodes=10086021&positionCodes=front&technologyCodes=PAD03

Where product data comes from: data modes

Data mode	You send	The customer
Exact	TronCloud catalog product variants plus print position and technology	Designs the print; product and print options are fixed.
Partial	A product model, optionally with preselected variants or print options	Chooses the missing variants and print options in the editor, then designs.
Own	Your own product data: model, variants, print positions and technologies, background images	Designs on a product that isn't in the TronCloud catalog.

The builder sets the data mode for you: setExactProduct() → Exact, setPartialProduct() → Partial, setOwnProductSingleVariant() and the other setOwn…() methods → Own. Details and examples: Data modes.

What the customer does: open modes

Open mode	Use it to
Create	Start a new print job.
Edit	Open an existing print job (by its GUID) for changes.
View	Show an existing print job read-only.
OpenGallery / OpenUpload	Open only the logo gallery or logo upload, for example for logo visualizations.

See Open modes.

Where the editor appears

Display	How	Notes
Dialog	{ mode: 'dialog' }	A full-screen overlay that the script adds to <body>. Page scrolling is disabled while it's open. One dialog at a time. Data attributes always open a dialog.
Container	{ mode: 'container', container: element }	The editor fills an element of your page. You control its size and position. One editor per container; several containers (and a dialog) can be open at once. JavaScript only.

With URL integration the editor always runs on the TronDesigner page. See Dialog and inline display.

How you get the result back

When the customer saves, the editor creates a print job. Its GUID is the key you store with your cart item or order. You can receive and query it in four ways:

Channel	Runs in	Type	Use it to
Events and callbacks	Browser	Push	Update the cart or page right away, e.g. on printJob / created.
JavaScript API methods (Retrieving print jobs and files)	Browser	Pull	Load the print job, preview images, motive or proofreading PDF on demand (getPrintJob, getPrintingImage, …).
Webhooks	Your server	Push	Keep a reliable record, even if the customer closes the tab right after saving.
REST API	Your server	Pull	Download production data and files for fulfillment.

Browser events depend on the customer's tab staying open. A robust integration uses events for the user experience and webhooks or the REST API as the source of truth. With URL integration there are no events on your page, so use webhooks and the REST API.

What happens right after the customer confirms their design — nothing, closing the editor, a confirmation dialog, a redirect — is the result action. See Result actions.

Settings that aren't in the arguments

• Look and behavior of the editor for your instance (custom CSS, translations, default result action, enabled features) are set in the Admin Portal under Settings → Print editor. See Styling the editor.
• Customer identity comes from the script tag or from the browser (localStorage). See Customers and orders.

See also

• EditorArguments · window.tronDesigner — API reference
• Quick start
• Integration recipes
• Zendesk: Glossary