TronDesigner - Integration Examples
Docs: Developer documentation  |  Logo visualizations

Back to examples

Logo Visualization

Instead of a JS button opening the editor, plain <img data-td-action="RenderVisualization"> elements are scanned automatically on page load. Each one declares a supplier + exact product variant + print position/technology; the script batches these into render token requests and swaps src for the rendered visualization of the customer's currently selected logo.

Product used: Teak A5 recycled hard cover notebook (106013_TD).

Logo Upload / Select / Clear

No logo selected — visualization images below show the original product photo.

Visualization by Variant Code - 3 Variants

Same print option (FRONT / DPRINT03, digital print) rendered on three different color variants.

Teak A5 notebook - Navy
Navy
10601355_TD
Teak A5 notebook - Orange
Orange
10601331_TD
Teak A5 notebook - Red
Red
10601321_TD

Visualization by Variant + Position + Technology - Multiple Print Options on Multiple Variants

Two variants (Royal Blue, Solid Black), each shown with three different print position/technology combinations - six independent <img> elements in total.

Teak A5 notebook - Royal Blue
Royal Blue
Front - Digital Print
FRONT / DPRINT03
Teak A5 notebook - Royal Blue
Royal Blue
Front - Screenprint
FRONT / GPE01
Teak A5 notebook - Royal Blue
Royal Blue
Back - Embossing/Debossing
BACK / DEB01
Teak A5 notebook - Solid Black
Solid Black
Front - Digital Print
FRONT / DPRINT03
Teak A5 notebook - Solid Black
Solid Black
Front - Screenprint
FRONT / GPE01
Teak A5 notebook - Solid Black
Solid Black
Back - Embossing/Debossing
BACK / DEB01

Implementation Code

<!-- Scanned automatically once the SDK initializes - no click handler needed -->
<img
    data-td-action="RenderVisualization"
    data-td-supplier-code="TD"
    data-td-product-code="10601355_TD"
    data-td-print-position-code="FRONT"
    data-td-print-technology-code="DPRINT03"
    src="product-default.jpg"
    alt="Teak A5 notebook - Navy"
/>

<!-- Optional attributes -->
<!-- data-td-visualization-size="max600"                          fixed output size instead of the img's own pixel size -->
<!-- data-td-visualization-logo="f47ac10b-58cc-4372-a567-..."      per-image logo override, ignores the customer's selected logo -->