Data attributes reference
Every data-td-* attribute the integration script reads, in one place: the 18 attributes of the <script> tag and the 33 attributes of action elements (buttons that open the editor, and logo visualization images). The same names are available as constants in ScriptElementDataAttributesNames and BasicActionElementDataAttributesNames.
Attribute values are case-sensitive (only data-td-own-product accepts true in any case). All values are strings; "JSON" means the value must be valid JSON (wrap the attribute in single quotes and use double quotes inside).
Script tag
Read once, when the page has finished loading. Callback attributes take the name of a global function (declared with function name() {} or assigned to window; const/let functions aren't found).
| Attribute | Value | Default | Description | Guide |
|---|---|---|---|---|
data-td-api-key | Website integration API key | — (required) | Authenticates the page. The page's host name must be in the key's allowed domains. | Loading the script |
data-td-api | URL, e.g. https://app.trondesigner.com/api | — (required) | Script API base URL. A trailing / is removed. | Loading the script |
data-td-customer-identity | Your customer ID, e.g. user-1234 | — | Finds or creates the TronDesigner customer with this identity instead of the anonymous customer stored in the browser. | Customers and orders |
data-td-customer-person | Text | — | Customer's name. Only used with data-td-customer-identity. | Customers and orders |
data-td-customer-company | Text | — | Customer's company. Only used with data-td-customer-identity. | Customers and orders |
data-td-customer-email | E-mail address | — | Customer's e-mail. Only used with data-td-customer-identity. | Customers and orders |
data-td-language | ISO 639-1 code, e.g. de | Browser language | Default UI language of the editor. A language the customer chose in the editor before takes precedence. | Loading the script |
data-td-log-level | debug, info, warn, error | warn | Console output of the script and the editor. | Debugging and error handling |
data-td-monitored-element-id | Element id, e.g. product-list | — | Registers action elements added inside this element after page load (also when inserted with innerHTML or insertAdjacentHTML()). Attribute changes aren't detected — call refreshRegisteredElements(). | HTML data attributes |
data-td-script-initialized-callback | Function name | — | Called without arguments when initialization succeeded. | Loading the script |
data-td-script-init-failed-callback | Function name | — | Called with an Error (or string) when initialization failed. | Loading the script |
data-td-print-job-created-callback | Function name | — | printJob / created: a new print job was saved. | Events and callbacks |
data-td-print-job-updated-callback | Function name | — | printJob / updated: an existing print job was saved. | Events and callbacks |
data-td-logo-created-callback | Function name | — | logo / created: the customer uploaded a logo. | Events and callbacks |
data-td-logo-updated-callback | Function name | — | logo / updated: a logo was changed. | Events and callbacks |
data-td-logo-deleted-callback | Function name | — | logo / deleted: the customer deleted a logo. | Events and callbacks |
data-td-text-created-callback | Function name | — | text / created: the customer added a text. | Events and callbacks |
data-td-proofreading-created-callback | Function name | — | proofreading / created: a proofreading PDF was generated (detail is a Blob). | Events and callbacks |
The event callbacks receive a DesignerEntityEvent.
Action elements
Read when the element is clicked. An element is registered only with one of the valid combinations described in HTML data attributes:
data-td-action+data-td-print-job-guid,data-td-action+ supplier +data-td-model-code,data-td-action+ supplier + product + print position + print technology,data-td-action+data-td-own-product="true",- or
data-td-optionsalone.
Action and existing print job
| Attribute | Value | Default | Description | Guide |
|---|---|---|---|---|
data-td-action | OpenCreate, OpenEdit, OpenView, RenderVisualization | — (required, except with data-td-options) | Opens the editor in open mode Create, Edit or View; RenderVisualization on an <img> renders a logo visualization. | HTML data attributes, Logo visualizations |
data-td-print-job-guid | Print job GUID | — | Existing print job to open with OpenEdit or OpenView. | Open modes |
Supplier and product
| Attribute | Value | Default | Description | Guide |
|---|---|---|---|---|
data-td-supplier-code | Supplier code, e.g. PFC | — | Supplier, as set in Admin Portal → Settings → Suppliers. Use this or data-td-supplier-guid. | HTML data attributes |
data-td-supplier-guid | Supplier GUID | — | Supplier, by GUID. | HTML data attributes |
data-td-product-code | Variant code, e.g. 10086021 | — | One product variant (data mode Exact). Also the variant of a visualization image. | HTML data attributes |
data-td-product-codes | JSON array, e.g. ["R2200D94","R2200E13"] | — | Several variants. Takes precedence over data-td-product-code. | HTML data attributes |
data-td-model-code | Model code, e.g. 100860 | — | Product model; the customer chooses variants (data mode Partial). Ignored when a product code is set. | Data modes |
Print options
| Attribute | Value | Default | Description | Guide |
|---|---|---|---|---|
data-td-print-position-code | Position code, e.g. front | — | Print position, together with data-td-print-technology-code. | HTML data attributes |
data-td-print-technology-code | Technology code, e.g. PAD03 | — | Print technology, together with data-td-print-position-code. | HTML data attributes |
data-td-print-position-codes | JSON array, e.g. ["Left chest","Right chest"] | — | Several print options. Takes precedence over the singular attributes. | HTML data attributes |
data-td-print-technology-codes | JSON array, e.g. ["MR07","MR07"] | — | Technologies paired by index with data-td-print-position-codes. | HTML data attributes |
Display overrides
Replace the catalog code or name the editor shows (see Show your own codes and names). The singular forms apply to the singular code attributes; the plural forms are JSON arrays paired by index with data-td-product-codes or data-td-print-position-codes. Without them, the editor shows the catalog values.
| Attribute | Value | Replaces the displayed |
|---|---|---|
data-td-product-code-override | Text, e.g. OREGON-400-RED | Variant code of data-td-product-code |
data-td-product-code-overrides | JSON array | Variant codes of data-td-product-codes |
data-td-product-name-override | Text | Variant name of data-td-product-code |
data-td-product-name-overrides | JSON array | Variant names of data-td-product-codes |
data-td-print-position-code-override | Text | Position code of data-td-print-position-code |
data-td-print-position-code-overrides | JSON array | Position codes of data-td-print-position-codes |
data-td-print-position-name-override | Text | Position name of data-td-print-position-code |
data-td-print-position-name-overrides | JSON array | Position names of data-td-print-position-codes |
data-td-print-technology-code-override | Text | Technology code of data-td-print-technology-code |
data-td-print-technology-code-overrides | JSON array | Technology codes, paired with data-td-print-position-codes |
data-td-print-technology-name-override | Text | Technology name of data-td-print-technology-code |
data-td-print-technology-name-overrides | JSON array | Technology names, paired with data-td-print-position-codes |
Order information and custom data
| Attribute | Value | Default | Description | Guide |
|---|---|---|---|---|
data-td-order-code | Text, e.g. SO-2026-0042 | — | Your order number, stored as customer.orderCode of the print job. | Customers and orders |
data-td-order-title | Text | — | Order title, stored as customer.orderTitle. | Customers and orders |
data-td-order-item-code | Text, e.g. 3 | — | Your order line / cart item number, stored as customer.orderItemCode. | Customers and orders |
data-td-custom-properties | JSON object with string values, e.g. {"cartItemId":"4711"} | — | Stored as customProperties of the print job. Invalid JSON is ignored. | Custom properties |
data-td-own-product | true | false | Data mode Own: the editor asks the customer for the product data. Together with data-td-action a complete opener; supplier, product and printing attributes on the same element are then ignored (console warning). | HTML data attributes |
NOTE
Earlier versions of the script saved data-td-order-code and data-td-order-title swapped. If you swapped the values to compensate, swap them back; print jobs saved before the fix keep the swapped values. See the Changelog.
Result action
| Attribute | Value | Default | Description | Guide |
|---|---|---|---|---|
data-td-result-action | None, Close, Dialog | Admin Portal setting | What happens after the customer confirms: stay in the editor, close it, or show the confirmation dialog. | Result actions |
data-td-result-redirect-url | URL | — | With Dialog: the browser goes to this URL when the customer closes the dialog. With Close: when the editor closes after the final confirmation. Ignored without data-td-result-action. | Result actions |
Advanced options
| Attribute | Value | Default | Description | Guide |
|---|---|---|---|---|
data-td-options | JSON EditorArguments | — | Complete editor configuration. All other attributes of the element, including data-td-action, are ignored. | HTML data attributes, Editor arguments |
Logo visualization images
Used on <img data-td-action="RenderVisualization"> together with a supplier, data-td-product-code and, optionally, data-td-print-position-code and data-td-print-technology-code.
| Attribute | Value | Default | Description | Guide |
|---|---|---|---|---|
data-td-visualization-size | auto, full, max300, max400, max600, max800, max1000 | auto | Size of the rendered image. auto uses the natural (intrinsic) size of the original image in src, not its displayed size; unknown values count as auto. | Logo visualizations |
data-td-visualization-logo | Logo GUID | Customer's selected logo | Logo to render on this image instead of the customer's selected logo. | Logo visualizations |
Removed or never existed
Older documentation mentions attributes and formats that the script doesn't support. The attributes are silently ignored; a flat data-td-options object (without openMode and printJob) makes the click fail with an error in the console, and the editor doesn't open.
| Not supported | Use instead |
|---|---|
data-td-options-supplier-code | data-td-supplier-code |
data-td-options-product-code | data-td-product-code |
data-td-options-position-code, data-td-position-code | data-td-print-position-code |
data-td-options-technology-code, data-td-technology-code | data-td-print-technology-code |
data-td-customer-guid | Nothing to set: the script stores the customer GUID in the browser's localStorage (key tron-designer-customer). To identify a logged-in customer, use data-td-customer-identity. |
data-td-text-updated-callback | Doesn't exist. The editor emits only text / created. |
data-td-options with a flat object such as {"supplierCode": …, "productCode": …} | data-td-options takes a complete EditorArguments object (openMode, printJob.addProducts, printJob.addPrintings, …). |