TronDesigner - Integration Examples
Docs: Developer documentation  |  HTML data attributes  |  Data attributes reference

Back to examples

Attributes - Overview

This example wires up the integration entirely through HTML data-* attributes — no JavaScript event subscription calls.

The action buttons use data-td-action + product/printing/print-job attributes to open the designer. The script element uses data-td-*-callback attributes to point at globally available functions for every event.

Flow: click Step 1 to create, the printJob.created callback fires on the first save (a proofreading, a Save button or the final confirmation - later saves fire printJob.updated); we copy the GUID into the Step 2 button's data-td-print-job-guid and call tronDesigner.refreshRegisteredElements() so the SDK binds its click handler. Step 2 then opens the same job in OpenEdit mode — purely via attributes.

Script-element callback attributes used here:

Oregon 400 ml - Red

Step 1: Create — Attributes (Exact)

Event Log

Waiting for events...

Implementation Code

<!-- Wire every callback through script-element data attributes -->
<script
    async
    src="https://app.trondesigner.com/js/website-integration.js"
    data-td-api="https://app.trondesigner.com/api"
    data-td-api-key="PltoC6ol4JUdlC5Hn9jSQUo9B"
    data-td-script-initialized-callback="onScriptInitialized"
    data-td-script-init-failed-callback="onScriptInitFailed"
    data-td-print-job-created-callback="onPrintJobCreated"
    data-td-print-job-updated-callback="onPrintJobUpdated"
    data-td-logo-created-callback="onLogoCreated"
    data-td-logo-updated-callback="onLogoUpdated"
    data-td-logo-deleted-callback="onLogoDeleted"
    data-td-text-created-callback="onTextCreated"
    data-td-proofreading-created-callback="onProofreadingCreated">
</script>

<!-- Step 1: open in Create mode, also via attributes -->
<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">
    Open Designer
</button>

<!-- Step 2: edit button, GUID injected at runtime by the created-callback -->
<button id="edit-btn" data-td-action="OpenEdit">
    Edit Existing Design
</button>

<script>
    // The argument is a DesignerEntityEvent with { entityType, eventType, entityGuid, detail }.
    function onPrintJobCreated(event) {
        const editBtn = document.getElementById('edit-btn');
        editBtn.setAttribute('data-td-print-job-guid', event.entityGuid);
        // Element was skipped at init (no GUID yet), so re-run discovery to bind its click.
        window.tronDesigner.refreshRegisteredElements();
    }
</script>