TronDesigner – Integration Examples
Docs: Developer documentation  |  Custom properties

Back to examples

Custom Properties

Custom properties are arbitrary key/value metadata you attach to a print job. TronDesigner stores them unchanged and echoes them back in every callback and webhook — letting your backend correlate completed designs with cart lines, campaigns, or any internal context.

The same customProperties object can be passed in three ways. All three produce identical behaviour; pick the one that fits your integration style:

Special keys starting with EDITOR: change the editor itself - see Design Instructions and Suggested Design Colors.

After you finish a design, the printJob.created callback fires. The custom properties you sent are highlighted in green below the event log.

Oregon 400 ml - Red
HTML Attribute

data-td-custom-properties

Oregon 400 ml - Red
JS Builder

addCustomProperties()

Oregon 400 ml - Red
Print Job Args

openDesigner({ printJob: { customProperties } })

Event Log

Waiting for events...

Implementation Code

1 — HTML data attribute

<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-custom-properties='{"source":"html-attr","campaign":"SPRING24","region":"EU"}'>
    Open Designer
</button>

2 — JS builder

window.tronDesigner
    .addCustomProperties({
        source: 'js-builder',
        cartLineId: 'CL-1234',
        campaign: 'SPRING24'
    })
    .addCustomProperty('region', 'EU')
    .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
    .addExactPrinting('front', 'PAD03')
    .open({ mode: 'dialog' });

3 — Print job arguments

window.tronDesigner.openDesigner({
    openMode: 'Create',
    dataMode: 'Exact',
    printJob: {
        addPrintings: [{ printPositionCode: 'front', printTechnologyCode: 'PAD03' }],
        addProducts: {
            supplierCode: 'PFC',
            variants: [{ productCode: '10086021' }]
        },
        customProperties: {
            source: 'printjob-args',
            cartLineId: 'CL-1234',
            campaign: 'SPRING24'
        }
    }
}, { mode: 'dialog' });

Receiving custom properties in the created callback

<!-- Wire the callback via script-element attribute -->
<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-print-job-created-callback="onPrintJobCreated">
</script>

<script>
function onPrintJobCreated(event) {
    // event.entityGuid  — the new print job GUID
    // event.detail.customProperties  — your metadata echoed back unchanged
    const customProps = event.detail.customProperties;
    console.log('Custom properties received:', customProps);
}
</script>