Customers and orders

TronDesigner remembers who is using the editor, so that returning customers find their logos again. This page shows how the customer is identified, how to pass your own customer data, and how to label each print job with your order, cart line and custom properties.

TIP

Examples: Session Tracking · source — Custom properties · source

Understand how a customer is identified

When the page loads, the script registers the visitor with the TronDesigner API (customer/init) and gets back a customer GUID. It stores the customer in the browser's localStorage under the key tron-designer-customer and sends the GUID with its API calls (header TronDesigner-Customer). There is no attribute to set the GUID yourself.

The script picks the customer in this order:

Situation	Result
The <script> tag has data-td-customer-identity	The customer with this identity in your TronDesigner instance; created if it doesn't exist yet. localStorage is not read.
localStorage contains a customer from an earlier visit	The same customer again (looked up by its stored identity, otherwise by its GUID). If it is not found — for example it belongs to another instance — a new customer is created.
Neither	A new anonymous customer.

The customer record holds the customer's logo gallery, their current logo (see Logos), the editor language they picked, and the default customer data copied into new print jobs.

An anonymous customer only lives in one browser. In another browser, or after the storage is cleared, the visitor starts with an empty gallery. For logged-in users, pass a stable customerIdentity (your user ID) so their logos follow them.

Pass your customer data

Set the customer on the script tag when the user is already known at page load, or call setCustomer() when they log in later:

HTML

<script
  async
  src="https://app.trondesigner.com/js/website-integration.js"
  referrerpolicy="origin"
  data-td-api="https://app.trondesigner.com/api"
  data-td-api-key="{API_KEY}"
  data-td-customer-identity="user-1234"
  data-td-customer-person="Jane Doe"
  data-td-customer-company="ACME Inc."
  data-td-customer-email="jane@acme.example"
></script>

JavaScript

// e.g. after your login succeeded
await window.tronDesigner.setCustomer({
  customerIdentity: 'user-1234',
  customerPerson: 'Jane Doe',
  customerCompany: 'ACME Inc.',
  customerEmail: 'jane@acme.example',
});

const customer = window.tronDesigner.getCustomer();
console.log(customer.customerGuid, customer.logoGuid);

Attribute	setCustomer() field	Meaning
data-td-customer-identity	customerIdentity	Your unique ID for the user. Required — without it the other three attributes are ignored.
data-td-customer-person	customerPerson	Full name
data-td-customer-company	customerCompany	Company name
data-td-customer-email	customerEmail	E-mail address

What setCustomer does

setCustomer() sends the GUID of the current customer together with the data you pass. The result depends on the identity:

You pass	Result
No customerIdentity	The current customer is updated with the details you pass. No new customer is created.
A customerIdentity that already exists in your instance	That customer becomes the current one, and its details are updated.
A new customerIdentity, and the current customer is anonymous	The current customer gets the identity. The logos and print jobs the visitor created anonymously stay with them — this is the usual "log in" case.
A new customerIdentity, and the current customer already has a different identity	A new customer is created for the new identity. A customer with an identity is never taken over by another one.

What to know:

• For an existing customer, fields you leave out keep their stored values.
• data-td-customer-identity works the same way at page load: the script also sends the GUID of the customer stored in the browser, so an anonymous visitor who logs in keeps the logos and print jobs created before the login.
• When the current customer switches to an existing identity, the anonymous customer's logos stay with the anonymous customer; they aren't merged.
• setCustomer() returns a promise and updates localStorage. The next editor you open uses the resulting customer. If the customer's logo changes, the logo visualizations on the page are refreshed.
• Call setCustomer() after the script has initialized. Before that, or when the initialization failed because data-td-api-key or data-td-api is missing, the promise rejects with an Error.
• getCustomer() returns the current Customer (customerGuid, the four fields above, customerLanguage, logoGuid), or null while the script is still initializing.

Forget the customer on logout

To stop the next visitor on the same browser from seeing the previous user's logos, remove the stored customer and reload the page. The script then creates a new anonymous customer:

localStorage.removeItem('tron-designer-customer');
location.reload();

Override customer data for one print job

To label a single print job with different customer data (for example a branch office) without changing the customer record, pass printJob.customer or call setPrintJobCustomer(). Note the argument order: identity first.

JavaScript

window.tronDesigner
  .setPrintJobCustomer('branch-042', 'John Smith', 'ACME Branch Prague', 'prague@acme.example')
  .setExactProduct('PFC', undefined, (p) => p.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .open({ mode: 'dialog' });

JSON

{
  "openMode": "Create",
  "dataMode": "Exact",
  "printJob": {
    "customer": {
      "customerIdentity": "branch-042",
      "customerPerson": "John Smith",
      "customerCompany": "ACME Branch Prague",
      "customerEmail": "prague@acme.example"
    },
    "addProducts": { "supplierCode": "PFC", "variants": [{ "productCode": "10086021" }] },
    "addPrintings": [{ "printPositionCode": "front", "printTechnologyCode": "PAD03" }]
  }
}

• The values are saved in this print job only. The customer record and localStorage don't change, and the print job still belongs to the current customer (customer.customerGuid).
• In a new print job, fields you leave out are filled from the current customer. In Edit mode, fields you leave out keep the print job's existing values.
• There is no HTML attribute for this; use the builder or JSON.

Attach order and cart information

Order fields link a print job to your order, quote or cart line. They are stored in the print job only.

HTML

<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"
  data-td-order-title="Oregon 400 ml - red"
  data-td-order-code="ORD-2026-0815"
  data-td-order-item-code="CART-LINE-3"
>Design your print</button>

JavaScript

// setOrderInfo(orderTitle, orderCode, orderItemCode) - title comes first
window.tronDesigner
  .setExactProduct('PFC', undefined, (p) => p.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setOrderInfo('Oregon 400 ml - red', 'ORD-2026-0815', 'CART-LINE-3')
  .open({ mode: 'dialog' });

JSON

{
  "openMode": "Create",
  "dataMode": "Exact",
  "printJob": {
    "customer": {
      "orderTitle": "Oregon 400 ml - red",
      "orderCode": "ORD-2026-0815",
      "orderItemCode": "CART-LINE-3"
    },
    "addProducts": { "supplierCode": "PFC", "variants": [{ "productCode": "10086021" }] },
    "addPrintings": [{ "printPositionCode": "front", "printTechnologyCode": "PAD03" }]
  }
}

NOTE

Earlier versions of the script saved data-td-order-title as orderCode and data-td-order-code as orderTitle (data-td-order-item-code, setOrderInfo() and JSON were never affected). This is fixed; print jobs saved before the fix keep the swapped values. If you swapped the two attribute values to compensate, swap them back. See the Changelog.

Field	HTML attribute	Typical use
orderTitle	data-td-order-title	Human-readable label, e.g. the product name in the cart
orderCode	data-td-order-code	Your order or quote number
orderItemCode	data-td-order-item-code	Your cart line or order line ID

Order fields and customer overrides share the printJob.customer object. When you open an existing print job in Edit mode, the values you pass replace the stored ones; fields you leave out are kept.

Add custom properties

Use printJob.customProperties to attach string key/value metadata to a print job. See Custom properties for HTML, JavaScript, and JSON examples, design instructions, and suggested design colors.

Find the data again

Customer overrides, order fields and custom properties are part of the saved print job:

• in event.detail.customer and event.detail.customProperties of the printJob events (Events and callbacks),
• in getPrintJob() and the REST API print job,
• in the Admin Portal print job detail (customer, order code, order item code and custom data).

Custom proofreading templates can also use the custom properties.

Set the language

Setting	Controls
data-td-language on the <script> tag	Default editor UI language (ISO-2, e.g. de). If the customer switched the language in the editor before, their saved choice wins. Without it, the editor tries the browser language.
printJob.languageCode or setPrintJobLanguage('de')	Language of the product and print data loaded into the print job, saved as the print job's language. Defaults to the editor language.
language argument of getProofreading()	Language of the proofreading PDF; defaults to the customer's language. See Retrieving print jobs and files.

Know what is stored where

Data	Browser localStorage (tron-designer-customer)	TronDesigner customer record	Print job
Customer GUID, identity, name, company, e-mail	yes (plain JSON)	yes	copied into new print jobs
Current logo GUID, editor language	yes	yes	—
printJob.customer overrides	—	—	yes
Order title, code, item code	—	—	yes
Custom properties	—	—	yes

Any script on your domain can read localStorage. Use an opaque user ID as customerIdentity rather than an e-mail address, and don't put secrets into custom properties.

See also

• setCustomer, setOrderInfo, addCustomProperties, ArgCustomer — API reference
• Editor arguments — the full printJob object
• Events and callbacks — get the saved print job back
• Logos — the customer's logo gallery and current logo
• Custom properties — metadata, design instructions, and suggested colors