Data Attributes

Open the TronDesigner Editor without custom JS by adding simple TronDesigner data attributes to your buttons or links.

Introduction

Data attributes provide a no-JavaScript way to open the TronDesigner Editor from your webpage. You add special attributes to buttons or links, and the integration script automatically:

  • Detects these elements.

  • Attaches click handlers.

  • Builds the Editor input payload.

  • Opens the Editor.

Use this when you want a quick webshop integration or prototype without writing custom JS.

HTML Data Attributes

Use this method for standard catalog products where individual attributes define the product.

At minimum, you need:

  • data-td-action: What should happen on click (e.g., OpenCreate).

  • data-td-options-*: A set of product and printing properties.

Example: Open the Editor for one product and one print option:

Example
<button
  data-td-action="OpenCreate"
  data-td-options-supplier-code="PFC"
  data-td-options-product-code="10000200"
  data-td-options-technology-code="PAD03"
  data-td-options-position-code="FRONT">
  Customize
</button>

What happens: The integration script finds this button. When clicked, the script converts the attributes into Editor arguments and opens the dialog overlay with the specified supplier, product, and print settings.

The exact list of supported data-td-options-* attributes is described in the Reference.

Full JSON Integration (via Attributes)

Use this for complex scenarios (multiple printings, overrides). Instead of multiple individual attributes, you provide a single data-td-options attribute containing a full JSON object.

Example:

<button
  data-td-action="OpenCreate"
  data-td-options='{
    "dataMode": "Exact",
    "openMode": "Create",
    "printJob": {
      "addProducts": {
        "supplierGuid": "b2e32614-e01a-4ffc-97ac-b2c62c3aac70",
        "variants": [
          { "productCode": "AAP003-160" },
          { "productCode": "AAP003-103" }
        ]
      },
      "addPrintings": [
        { "printPositionCode": "AP01", "printTechnologyCode": "EDB1" }
      ]
    }
  }'>
  Customize front & back
</button>

Implementation Notes

  • JSON Formatting: The JSON must be valid and properly quoted. In HTML, wrap the entire JSON string in single quotes so you can safely use double quotes for the internal keys and values.

  • Consistency: The structure corresponds exactly to the input you would pass to the openDesigner(...) method in our JavaScript API, eventually becoming the EditorArguments object.

Monitoring dynamic elements

By default, the integration script scans your HTML once during initialization. If your site uses a framework (React, Vue, Angular) or AJAX to load product cards dynamically, the script may miss buttons added after the initial load.

To support these elements, you can designate a parent container as a monitored element.

Setup. Define the data-td-monitored-element-id in your <head>. This tells the script exactly where to "watch" for new buttons.

<head> 
  <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-monitored-element-id="product-box"
  ></script>
</head>
<div id="product-box"></div>

Usage. Any button added inside #product-box later — even several seconds after the page has loaded — will be automatically activated by the script.

<div id="product-box">
 <button 
   data-td-action="OpenCreate" 
   data-td-options='{"productCode":"10000200",...}'> 
   Customize 
 </button>
</div>

The Monitoring Lifecycle. Once an element with data-td-action is added to the monitored container, the script automatically performs the following:

  • Click handler attached: It binds the "Open Editor" logic to the button immediately.

  • Data attributes parsed: It reads your data-td-options JSON and prepares the payload.

  • Editor opened as usual: When the user clicks, the Editor launches with the correct product context.

When to use monitoring:

  • AJAX Loads: Product listings that load as the user scrolls.

  • Variant Selectors: Buttons that appear only after a user selects a color/size.

  • SPAs: Single Page Applications where the user navigates without a full page reload.

  • TIP: Use monitoring only for dynamic containers. For static HTML pages, the default initialization is more performance-efficient.

For complete examples see sandboxes:

Handling the Result

To capture the design GUID after a user saves, see the JS Event Subscriptions page for the data-td-print-job-created-callback attribute.

Related Resources