Examples

The TronDesigner integration examples are small, runnable HTML pages, each showing one integration technique against the live editor. The source is on GitHub.

All examples

Each title opens the live example; Source opens its HTML on GitHub.

Example	What it shows	Explained in	Source
Quick Start	Auto-opens the designer on page load using exact data.	Quick start	source
Attributes - Overview	Opens the editor from data attributes on a button and wires every event callback through script attributes.	HTML data attributes, Data attributes reference	source
Init Failure Handling	Handles an initialization failure of the script with a notification popup.	Loading the integration script, Debugging and error handling	source
Builder - Exact	Uses the JavaScript builder for an exact product and printing.	JavaScript builder API, Data modes	source
Builder - Partial	Starts with a product model; the customer picks variants and printings.	JavaScript builder API, Data modes	source
JSON - Exact	Opens the editor with a full, explicit JSON payload.	Editor arguments, Data modes	source
JSON - Exact (Advanced)	Adds and removes product variants and printings on an existing print job in Edit mode.	Open modes, Editor arguments	source
Editor Options - Missing	How showSelectedVariants / showSelectedPrintOptions react when the variant or printing codes you send aren't in the catalog.	Editor arguments	source
JSON - Partial	Opens the editor with a minimal JSON payload (model only).	Data modes, Editor arguments	source
JSON - Own Product	Uses your own product data (Own mode) instead of the TronCloud catalog.	Data modes, Integration recipes	source
Get Images	Retrieves the motive image and the product visualization after a print job is created.	Retrieving print jobs and files	source
Result Action	What happens when the customer confirms the print graphics: nothing, close, or a dialog.	Result actions	source
Custom Editor Buttons	Opens the editor with one, two or three custom footer buttons.	Custom editor buttons	source
Edit Mode	Opens and modifies an existing print job by its GUID.	Open modes	source
View Mode	Shows a print job read-only for review and confirmation.	Open modes	source
URL Integration	Opens the editor from a plain URL, without JavaScript — for e-mails and QR codes.	Integration via URL	source
Inline Embed	Embeds the editor into an element of your page instead of a dialog.	Dialog and inline display	source
Event Handling	Subscribes to all editor events and logs the print job, logo, text and proofreading changes.	Events and callbacks	source
Session Tracking	Links print jobs to your customers, orders and cart items.	Customers and orders	source
Custom Properties	Attaches your own key/value metadata to a print job (attribute, builder or JSON) and reads it back from the created event.	Custom properties	source
Error Handling	Where errors are reported and how to handle them: onClose('Error'), getInitialized(), invalid custom buttons and rejected API calls.	Debugging and error handling	source
Multiple Printings	Several print positions and technologies in one print job.	JavaScript builder API, Editor arguments	source
Modify styles from host	Injects custom CSS from the host page to change the editor's appearance.	Styling the editor	source
Logo Features	Logo upload and gallery, preselecting a logo by GUID or URL, and logo events.	Logos	source
Logo Visualization	Replaces product images with rendered logo visualizations (data-td-action="RenderVisualization"), by variant or by variant + print position + technology.	Logo visualizations	source

Run the examples locally

You need an active TronDesigner license, a website integration API key (Admin Portal → Settings → API Keys) whose allowed domains include localhost (a development key, not your production one — see Allowed domains), and Node.js 20+ with npm. Docker is optional.

The small Express server in src/ serves the pages and replaces the {TD_URL}, {TD_URL_INTEGRATION} and {TD_API_KEY} placeholders in them with these environment variables (all three are required):

Variable	Production	Development
TD_URL	https://app.trondesigner.com	https://app-dev.trondesigner.com
TD_URL_INTEGRATION	https://integration.trondesigner.com	https://integration-dev.trondesigner.com
TD_API_KEY	your production website key	your development website key

npm

git clone https://github.com/PromoTron/trondesigner-examples.git
cd trondesigner-examples/src
# create src/.env with TD_URL, TD_URL_INTEGRATION and TD_API_KEY (loaded via dotenv)
npm ci
npm run run
# → http://localhost:3000 (set PORT to change it)

Docker

cd trondesigner-examples/src
docker build -t trondesigner-examples .
docker run --rm -p 3000:3000 \
  -e TD_URL=https://app.trondesigner.com \
  -e TD_URL_INTEGRATION=https://integration.trondesigner.com \
  -e TD_API_KEY=<YOUR_API_KEY> \
  trondesigner-examples

The repository also contains a Docker Compose setup in deployments/docker/.

Not covered by an example yet

These features are documented in the guides but have no runnable example yet:

• Integration via URL: the signed-token link (token=, created with the REST API) and the URL-encoded JSON form (options=) — see Integration via URL.
• Customers: setCustomer() / getCustomer() and the data-td-customer-* script attributes — see Customers and orders.
• Builder methods: the Own-mode builder (setOwnEmptyProduct, setOwnProductSingleVariant, setOwnProductSingleDimension, setOwnProductTwoDimensions, addOwnPrinting), addExactPrintings(), addCustomProperty() / addCustomProperties(), setResultActionNone() / setResultActionCloseEditor() / setResultActionShowDialog(), setDataMode() / setEditorOptions(), and setPrintJob() (shown only as a code listing in JSON - Exact (Advanced)) — see JavaScript builder API.
• Script state and debugging: getInitialized() / getInitializing(), setLogLevel() and data-td-log-level, data-td-monitored-element-id / subscribeElementChanges() — see Debugging and error handling.
• Other methods: openSinglePrintTaskDesigner(), getProofreading(), clonePrintJob().
• Editor arguments: editorOptions.showQuantityInputs and alwaysShowImageSelect, and a single data-td-options attribute with the full JSON — see Editor arguments.
• Server side: receiving and verifying webhooks and calling the REST API.

See also

• Integration recipes — the examples combined into e-shop flows
• window.tronDesigner — API reference