Interface: IWebsiteIntegration

The public API of the integration script, available as window.tronDesigner once website-integration.js has been loaded.

Remarks

The object combines two groups of methods:

• Integration methods declared on this interface: open the editor with a complete EditorArguments object (openDesigner), manage the session customer and their logo, subscribe to editor events and download print job outputs.
• Builder methods inherited from IEditorArgumentsBuilder: assemble the editor arguments step by step (setExactProduct, addExactPrinting, …) and finish with open.

The script initializes itself when the page has loaded: it reads the data-td-* attributes of its <script> tag, creates or restores the session customer and loads the editor. Most methods only work after that, so wait for getInitializing() or use the data-td-script-initialized-callback attribute before you call them.

Errors are mostly written to the browser console instead of being thrown (see setLogLevel). The methods that call the API return promises that reject when the request fails.

Example

<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-script-initialized-callback="onTronDesignerReady"></script>
<script>
  function onTronDesignerReady() {
    document.getElementById('design-button').disabled = false;
  }

  function openEditor() {
    window.tronDesigner
      .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
      .addExactPrinting('front', 'PAD03')
      .open({ mode: 'dialog' });
  }
</script>
<button id="design-button" disabled onclick="openEditor()">Design your print</button>

See

• Quick start
• JavaScript builder API
• Integration concepts

Extends

• IEditorArgumentsBuilder

Methods

addCustomProperties()

addCustomProperties(customProperties: Record<string, string>): IEditorArgumentsBuilder;

Adds several custom properties to the print job (printJob.customProperties).

Parameters

Parameter	Type	Description
customProperties	Record<string, string>	Key/value pairs; they are merged into the properties added before, overwriting properties with the same name.

Returns

IEditorArgumentsBuilder

Example

window.tronDesigner.addCustomProperties({ cartId: 'c-42', campaign: 'summer' });

See

Customers and orders

Inherited from

IEditorArgumentsBuilder.addCustomProperties

---

addCustomProperty()

addCustomProperty(key: string, value: string): IEditorArgumentsBuilder;

Adds a custom property (a key/value pair of your own) to the print job (printJob.customProperties).

Parameters

Parameter	Type	Description
key	string	Property name. An existing property with the same name is overwritten.
value	string	Property value.

Returns

IEditorArgumentsBuilder

Remarks

Custom properties are stored with the print job and returned in the customProperties of IPrintJobDto, e.g. to keep your cart or session ID with the print job.

Example

window.tronDesigner.addCustomProperty('cartId', 'c-42');

See

Customers and orders

Inherited from

IEditorArgumentsBuilder.addCustomProperty

---

addEditorButton()

addEditorButton(button: EditorButton): IEditorArgumentsBuilder;

Adds one button to the editor footer; call it once per button.

Parameters

Parameter	Type	Description
button	EditorButton	The button: style ('Primary' or 'Secondary'), function (see EditorButtonFunction) and labels per language ({ language: 'en', text: '…' }, ISO 639-1 codes).

Returns

IEditorArgumentsBuilder

Throws

Error if 5 buttons were already added, the button isn't an object, its style or function isn't one of the allowed values, or it has no labels (or a label without language or text).

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .addEditorButton({
    style: 'Secondary',
    function: 'DownloadPreviewImage',
    labels: [{ language: 'en', text: 'Download preview' }, { language: 'de', text: 'Vorschau herunterladen' }],
  })
  .addEditorButton({
    style: 'Primary',
    function: 'FinalConfirm',
    labels: [{ language: 'en', text: 'Confirm design' }],
  })
  .open({ mode: 'dialog' });

See

Custom editor buttons

Inherited from

IEditorArgumentsBuilder.addEditorButton

---

addExactPrinting()

addExactPrinting(
   printPositionCode: string, 
   printTechnologyCode: string, 
   positionCodeOverride?: string, 
   positionNameOverride?: string, 
   technologyCodeOverride?: string, 
   technologyNameOverride?: string, 
   options?: Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>, 
   maxColorsOverride?: number, 
   maxWidthOverride?: number, 
   maxHeightOverride?: number, 
   maxDiameterOverride?: number, 
   maxAreaOverride?: number
): IEditorArgumentsBuilder;

Adds a printing — a print position and print technology from the catalog product's print data.

Parameters

Parameter	Type	Description
printPositionCode	string	Print position code, e.g. 'front'.
printTechnologyCode	string	Print technology code, e.g. 'PAD03'.
positionCodeOverride?	string	Print position code to show instead of the catalog one.
positionNameOverride?	string	Print position name to show instead of the catalog one.
technologyCodeOverride?	string	Print technology code to show instead of the catalog one.
technologyNameOverride?	string	Print technology name to show instead of the catalog one.
options?	Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>	Printing-related editor options (see AddPrintingOptions).
maxColorsOverride?	number	Maximum number of colors, instead of the catalog value.
maxWidthOverride?	number	Maximum print width in mm, instead of the catalog value.
maxHeightOverride?	number	Maximum print height in mm, instead of the catalog value.
maxDiameterOverride?	number	Maximum print diameter in mm, instead of the catalog value.
maxAreaOverride?	number	Maximum print area, instead of the catalog value.

Returns

IEditorArgumentsBuilder

Remarks

Call it once per printing. Sets the open mode to Create and, if no data mode is set yet, the data mode to Exact (a product setter called before or after it decides the data mode). Pass undefined for the optional parameters you skip. To add a printing to an existing print job, use addPrintingToPrintJob.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .addExactPrinting('back', 'PAD03', undefined, 'Back side')
  .open({ mode: 'dialog' });

See

• Data modes
• JavaScript builder API

Inherited from

IEditorArgumentsBuilder.addExactPrinting

---

addExactPrintings()

addExactPrintings(options?: Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>, ...printings: ArgAddPrinting[]): IEditorArgumentsBuilder;

Adds several catalog printings at once. Note the order of the parameters: options first, then the printings.

Parameters

Parameter	Type	Description
options?	Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>	Printing-related editor options (see AddPrintingOptions); pass undefined if you don't need any.
...printings?	ArgAddPrinting[]	The printings to add, each with at least printPositionCode and printTechnologyCode (see ArgAddPrinting).

Returns

IEditorArgumentsBuilder

Remarks

Works like calling addExactPrinting for each printing: sets the open mode to Create and, if no data mode is set yet, the data mode to Exact.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrintings(
    { showSelectedPrintOptions: 'All' },
    { printPositionCode: 'front', printTechnologyCode: 'PAD03' },
    { printPositionCode: 'back', printTechnologyCode: 'PAD03' }
  )
  .open({ mode: 'dialog' });

See

JavaScript builder API

Inherited from

IEditorArgumentsBuilder.addExactPrintings

---

addOwnPrinting()

addOwnPrinting(
   positionCode: string, 
   positionName: string, 
   technologyCode: string, 
   technologyName: string, 
   colorMode: ColorMode, 
   maxColors?: number, 
   maxWidth?: number, 
   maxHeight?: number, 
   maxDiameter?: number, 
   maxArea?: number, 
   backgroundUrls?: string[], 
   options?: Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>
): Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">;

Adds an own printing — a print position and technology you define yourself, typically for an own product.

Parameters

Parameter	Type	Description
positionCode	string	Your print position code (also shown in the editor).
positionName	string	Print position name shown in the editor.
technologyCode	string	Your print technology code (also shown in the editor).
technologyName	string	Print technology name shown in the editor.
colorMode	ColorMode	How the motive is colored: 'Pantone', 'CMYK', 'SingleColor' or 'Colorless' (e.g. engraving).
maxColors?	number	Maximum number of colors.
maxWidth?	number	Maximum print width in mm.
maxHeight?	number	Maximum print height in mm.
maxDiameter?	number	Maximum print diameter in mm, for round print areas.
maxArea?	number	Maximum print area.
backgroundUrls?	string[]	URLs of product images to use as the background of the print area. With one URL (and without alwaysShowImageSelect), it's used directly; otherwise the customer picks one in the editor.
options?	Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>	Printing-related editor options (see AddPrintingOptions).

Returns

Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">

Remarks

Call it once per printing. Sets the open mode to Create and, if no data mode is set yet, the data mode to Own. Pass undefined for the optional parameters you skip.

Example

window.tronDesigner
  .setOwnProductSingleVariant('MUG-01', 'Custom Ceramic Mug')
  .addOwnPrinting('front', 'Front', 'PAD03', 'Pad print', 'Pantone', 3, 50, 50, undefined, undefined, [
    'https://shop.example.com/images/mug-front.jpg',
  ])
  .open({ mode: 'dialog' });

See

Data modes

Inherited from

IEditorArgumentsBuilder.addOwnPrinting

---

addPrintingsToPrintJob()

addPrintingsToPrintJob(...printings: ArgAddPrinting[]): IEditorArgumentsOpenPrintJobBuilder;

Adds several printings to the existing print job. Printings the print job already has are ignored.

Parameters

Parameter	Type	Description
...printings	ArgAddPrinting[]	The printings, each with at least printPositionCode and printTechnologyCode (see ArgAddPrinting).

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsBuilder.addPrintingsToPrintJob

---

addPrintingToPrintJob()

addPrintingToPrintJob(
   printPositionCode: string, 
   printTechnologyCode: string, 
   positionCodeOverride?: string, 
   positionNameOverride?: string, 
   technologyCodeOverride?: string, 
   technologyNameOverride?: string, 
   options?: Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>, 
   maxColorsOverride?: number, 
   maxWidthOverride?: number, 
   maxHeightOverride?: number, 
   maxDiameterOverride?: number, 
   maxAreaOverride?: number
): IEditorArgumentsOpenPrintJobBuilder;

Adds a printing to the existing print job. If the print job already has it, it is ignored.

Parameters

Parameter	Type	Description
printPositionCode	string	Print position code, e.g. 'back'.
printTechnologyCode	string	Print technology code, e.g. 'GPE01'.
positionCodeOverride?	string	Print position code to show instead of the catalog one.
positionNameOverride?	string	Print position name to show instead of the catalog one.
technologyCodeOverride?	string	Print technology code to show instead of the catalog one.
technologyNameOverride?	string	Print technology name to show instead of the catalog one.
options?	Partial<Pick<EditorOptions, "showSelectedPrintOptions" | "alwaysShowImageSelect">>	Printing-related editor options (see AddPrintingOptions).
maxColorsOverride?	number	Maximum number of colors, instead of the catalog value.
maxWidthOverride?	number	Maximum print width in mm, instead of the catalog value.
maxHeightOverride?	number	Maximum print height in mm, instead of the catalog value.
maxDiameterOverride?	number	Maximum print diameter in mm, instead of the catalog value.
maxAreaOverride?	number	Maximum print area, instead of the catalog value.

Returns

IEditorArgumentsOpenPrintJobBuilder

Example

window.tronDesigner
  .setPrintJob(printJobGuid, 'Edit')
  .addPrintingToPrintJob('back', 'GPE01')
  .open({ mode: 'dialog' });

Inherited from

IEditorArgumentsBuilder.addPrintingToPrintJob

---

addProductVariantsToPrintJob()

addProductVariantsToPrintJob(...variants: ArgAddProductVariant[]): IEditorArgumentsOpenPrintJobBuilder;

Adds several product variants to the existing print job. Variants the print job already has get their quantity and display overrides updated.

Parameters

Parameter	Type	Description
...variants	ArgAddProductVariant[]	The variants, each with at least productCode (see ArgAddProductVariant).

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsBuilder.addProductVariantsToPrintJob

---

addProductVariantToPrintJob()

addProductVariantToPrintJob(
   productCode: string, 
   quantity?: number, 
   codeOverride?: string, 
   nameOverride?: string
): IEditorArgumentsOpenPrintJobBuilder;

Adds a product variant to the existing print job. If the print job already has the variant, its quantity and display overrides are updated.

Parameters

Parameter	Type	Description
productCode	string	Supplier code of the product variant.
quantity?	number	Quantity of the variant.
codeOverride?	string	Variant code to show instead of the catalog one.
nameOverride?	string	Variant name to show instead of the catalog one.

Returns

IEditorArgumentsOpenPrintJobBuilder

Example

window.tronDesigner
  .setPrintJob(printJobGuid, 'Edit')
  .addProductVariantToPrintJob('10601301', 50)
  .open({ mode: 'dialog' });

Inherited from

IEditorArgumentsBuilder.addProductVariantToPrintJob

---

clearLogo()

clearLogo(): Promise<void>;

Removes the customer's selected logo.

Returns

Promise<void>

A promise that resolves when the change has been saved on the server.

Remarks

Logo visualizations that use the customer's logo are reset to their original image; images with their own data-td-visualization-logo are not affected. Does nothing if the customer isn't initialized yet. The promise rejects if the request fails.

Example

await window.tronDesigner.clearLogo();

See

Logos

---

clonePrintJob()

clonePrintJob(originalPrintJobGuid: string): Promise<undefined | string>;

Creates a copy of an existing print job, including its images, and returns the GUID of the copy.

Parameters

Parameter	Type	Description
originalPrintJobGuid	string	GUID of the print job to copy.

Returns

Promise<undefined | string>

A promise that resolves to the GUID of the new print job, or to undefined if the script hasn't initialized its API client (missing data-td-api-key or data-td-api).

Remarks

Use it e.g. for a "reorder" or "design again" button: clone the old print job, then open the copy with setPrintJob(newGuid, 'Edit'). The promise rejects if the request fails (e.g. unknown GUID).

Example

const newGuid = await window.tronDesigner.clonePrintJob(oldPrintJobGuid);
window.tronDesigner.setPrintJob(newGuid, 'Edit').open({ mode: 'dialog' });

See

Retrieving print jobs and files

---

getCustomer()

getCustomer(): null | Customer;

Returns the session customer: the anonymous or identified visitor that print jobs and logos are saved for.

Returns

null | Customer

The customer, or null until the customer has been initialized (or if initialization failed).

Remarks

During initialization the script identifies the customer by the data-td-customer-identity attribute (with data-td-customer-person, -company and -email), otherwise restores it from localStorage (key tron-designer-customer), otherwise creates a new anonymous customer. customerGuid is the GUID the script sends to the API; logoGuid is the selected logo. The returned object is the script's internal state, not a copy — don't modify it; use setCustomer instead.

Example

await window.tronDesigner.getInitializing();
const customer = window.tronDesigner.getCustomer();
console.log(customer.customerGuid, customer.customerIdentity);

See

Customers and orders

---

getInitialized()

getInitialized(): boolean;

Returns whether the script has finished initializing.

Returns

boolean

true once the API key was accepted, the customer was initialized and the editor was loaded; false before that and after a failed initialization.

Remarks

Use getInitializing() to wait for initialization instead of polling.

See

Loading the integration script

---

getInitializing()

getInitializing(): Promise<void>;

Returns a promise that resolves when the script has finished initializing, or rejects when initialization fails.

Returns

Promise<void>

A promise that resolves (without a value) after initialization has completed and the data-td-script-initialized-callback has been called. It rejects with the initialization error.

Remarks

The promise rejects when initialization fails: an invalid or missing API key (data-td-api-key) or API URL (data-td-api), a failed customer initialization (e.g. a domain that isn't allowed), a browser without localStorage, or an editor script that can't be loaded (e.g. 404 or blocked by a Content Security Policy). The data-td-script-init-failed-callback and the userInitFailed event on the <script> element are still called as well. Wrap await in try … catch. If nobody waits for the promise, its rejection doesn't produce an "unhandled rejection" error.

An exception thrown inside your data-td-script-initialized-callback or data-td-script-init-failed-callback is logged to the console and doesn't change the result of this promise.

Example

try {
  await window.tronDesigner.getInitializing();
  window.tronDesigner.subscribeDesignerEvent('printJob', 'created', onPrintJobCreated);
} catch (error) {
  console.error('TronDesigner is unavailable:', error?.cause ?? error?.message ?? error);
}

See

• Loading the integration script
• Debugging and error handling

---

getLogLevel()

getLogLevel(): LogLevel;

Returns the current log level of the script.

Returns

LogLevel

'debug', 'info', 'warn' or 'error'. The default is 'warn', or the value of the data-td-log-level attribute.

See

Debugging and error handling

---

getLogo()

getLogo(): Promise<undefined | ILogoDTO>;

Loads the customer's selected logo.

Returns

Promise<undefined | ILogoDTO>

A promise that resolves to the logo data (ILogoDTO), or to undefined when the customer has no selected logo or isn't initialized yet.

Remarks

The promise rejects if the request fails.

Example

const logo = await window.tronDesigner.getLogo();
console.log(logo ? logo.name : 'No logo selected');

See

Logos

---

getPrintingImage()

getPrintingImage(
   printJobGuid: string, 
   printingGuid: string, 
   productVariantCode?: string
): Promise<undefined | null | Blob>;

Downloads the preview image of one printing: the product variant with the designed motive on it.

Parameters

Parameter	Type	Description
printJobGuid	string	GUID of the print job.
printingGuid	string	GUID of the printing: the printingGuid of an item in the printings of the print job (IPrintJobDto).
productVariantCode?	string	Supplier code of the product variant to show. If omitted, the image of the default variant is returned.

Returns

Promise<undefined | null | Blob>

A promise that resolves to the image as a Blob (empty if no image is available), or to undefined if the script hasn't initialized its API client. null is part of the signature but isn't returned by the current implementation.

Remarks

The promise rejects if the request fails, e.g. when productVariantCode isn't a variant of the print job.

Example

const blob = await window.tronDesigner.getPrintingImage(printJobGuid, printing.printingGuid, '10086021');
document.getElementById('preview').src = URL.createObjectURL(blob);

See

Retrieving print jobs and files

---

getPrintingMotive()

getPrintingMotive(printJobGuid: string, printingGuid: string): Promise<undefined | null | Blob>;

Downloads the motive (the designed artwork alone, without the product) of one printing of a print job.

Parameters

Parameter	Type	Description
printJobGuid	string	GUID of the print job.
printingGuid	string	GUID of the printing: the printingGuid of an item in the printings of the print job (IPrintJobDto).

Returns

Promise<undefined | null | Blob>

A promise that resolves to the image as a Blob (empty if the printing has no motive image), or to undefined if the script hasn't initialized its API client. null is part of the signature but isn't returned by the current implementation.

Remarks

The promise rejects if the request fails. Each printing in IPrintJobDto also has a direct URL of the same image (printMotive.motiveImage.printJobFileUrl).

Example

const blob = await window.tronDesigner.getPrintingMotive(printJobGuid, printing.printingGuid);
document.getElementById('motive').src = URL.createObjectURL(blob);

See

Retrieving print jobs and files

---

getPrintJob()

getPrintJob(printJobGuid: string): Promise<undefined | null | IPrintJobDto>;

Loads a print job by its GUID.

Parameters

Parameter	Type	Description
printJobGuid	string	GUID of the print job, e.g. event.entityGuid of a printJob / created event.

Returns

Promise<undefined | null | IPrintJobDto>

A promise that resolves to the print job as IPrintJobDto (the same format as in printJob events), or to undefined if the script hasn't initialized its API client (missing data-td-api-key or data-td-api, or called before the page has loaded). null is part of the signature but isn't returned by the current implementation.

Remarks

Doesn't need an initialized customer. The promise rejects with an Error if the request fails, e.g. for an unknown GUID or an invalid API key.

Example

const printJob = await window.tronDesigner.getPrintJob(printJobGuid);
printJob.printings.forEach((p) => console.log(p.printingGuid, p.printData));

See

Retrieving print jobs and files

---

getProofreading()

getProofreading(
   printJobGuid: string, 
   templateTag?: string, 
   language?: string
): Promise<undefined | null | Blob>;

Generates the proofreading PDF of a print job.

Parameters

Parameter	Type	Description
printJobGuid	string	GUID of the print job.
templateTag?	string	Tag of the proofreading template to use; omit it to use the default template.
language?	string	ISO 639-1 code of the language of the document; defaults to the customer's language.

Returns

Promise<undefined | null | Blob>

A promise that resolves to the PDF as a Blob (empty if the server generated no document), or to undefined if the script hasn't initialized its API client. null is part of the signature but isn't returned by the current implementation.

Remarks

Requires the proofreading feature in your TronDesigner license. The promise rejects if the request fails.

Example

const pdf = await window.tronDesigner.getProofreading(printJobGuid);
window.open(URL.createObjectURL(pdf));

See

Retrieving print jobs and files

---

open()

open(options: DesignerOptions): void;

Opens the editor with the arguments collected so far and resets the builder.

Parameters

Parameter	Type	Description
options	DesignerOptions	Where to show the editor ({ mode: 'dialog' } or { mode: 'container', container }), optional own styles and an onClose callback. See DesignerOptions.

Returns

void

Remarks

Builds the EditorArguments and passes them to openDesigner, so the same requirements and rules apply (initialized script — otherwise the call is logged as an error and nothing opens —, valid container, one dialog at a time). The builder is reset before the editor opens, even if opening fails.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .open({ mode: 'container', container: document.getElementById('editor-container') });

See

Dialog and inline display

Inherited from

IEditorArgumentsBuilder.open

---

openDesigner()

openDesigner(data: EditorArguments, options: DesignerOptions): void;

Opens the editor with a complete EditorArguments object, in a dialog or inside a container element.

Parameters

Parameter	Type	Description
data	EditorArguments	The editor arguments: open mode, data mode, the product and printings or the print job to open, editor options and editor behaviour. The same JSON can be put into a data-td-options attribute.
options	DesignerOptions	Where to show the editor ({ mode: 'dialog' } or { mode: 'container', container }), optional own styles and an onClose callback. See DesignerOptions.

Returns

void

Remarks

• Requires an initialized script: wait for getInitializing() or the data-td-script-initialized-callback. Called before initialization has finished, or after it failed, the call is logged as an error and nothing is added to the page; nothing is thrown.
• data.openMode and data.printJob are required. If one of them is missing (e.g. a flat object instead of EditorArguments), the call is logged as an error and nothing is added to the page.
• In container mode, container must be an HTMLElement, otherwise the call is logged as an error and ignored. A container that already contains an editor is ignored with a warning.
• In dialog mode the script adds a full-screen overlay and blocks scrolling of the page until the editor closes. Only one dialog can be open at a time: while it's open, opening another one is ignored with a warning. Inline (container) editors and the dialog can be open at the same time.
• If the editor's <trondesigner-editor> element isn't defined yet, the script waits for it (up to 10 seconds) and then opens the editor; if it never gets defined, the call is logged as an error and nothing is added.
• When an editor closes, only that editor is removed (in dialog mode together with the overlay and the scroll lock); other editors on the page stay open.
• The script fills in defaults on the object you pass (it mutates data): editorOptions.showSelectedPrintOptions and editorOptions.showSelectedVariants default to 'None', and if printJob.logo is empty, the logo the customer selected (setLogo, logo gallery) is used.
• When the editor closes, options.onClose(reason, redirectUrl) is called. If reason is 'Confirmed' and a redirectUrl is set (see Result actions), the script then navigates the browser to that URL.
• Unlike open, this method ignores and does not reset the builder state.

Example

window.tronDesigner.openDesigner(
  {
    openMode: 'Create',
    dataMode: 'Exact',
    printJob: {
      addProducts: { supplierCode: 'PFC', variants: [{ productCode: '10086021' }] },
      addPrintings: [{ printPositionCode: 'front', printTechnologyCode: 'PAD03' }],
    },
  },
  { mode: 'dialog', onClose: (reason) => console.log('Editor closed:', reason) }
);

See

• Editor arguments
• Dialog and inline display

---

openLogoGallery()

openLogoGallery(options: DesignerOptions): void;

Opens the logo dialog on the "My logos" tab, where the customer picks one of their logos (or uploads a new one).

Parameters

Parameter	Type	Description
options	DesignerOptions	Where to show the dialog, same as for openDesigner.

Returns

void

Remarks

Opens the editor with open mode OpenGallery (the same as setOpenMode('OpenGallery').open(options)). When the customer confirms a logo, the script saves it as the customer's logo (setLogo) and emits the logo / selected event; when they clear the selection, it calls clearLogo. The selected logo is then used for logo visualizations and as the default logo of the next print job. Requires an initialized script.

Example

window.tronDesigner.subscribeDesignerEvent('logo', 'selected', (event) => {
  console.log('Selected logo:', event.entityGuid); // null when the selection was cleared
});
window.tronDesigner.openLogoGallery({ mode: 'dialog' });

See

• Logos
• Logo visualizations

---

openLogoUpload()

openLogoUpload(options: DesignerOptions): void;

Opens the logo dialog on the upload tab, where the customer uploads a new logo.

Parameters

Parameter	Type	Description
options	DesignerOptions	Where to show the dialog, same as for openDesigner.

Returns

void

Remarks

Opens the editor with open mode OpenUpload (the same as setOpenMode('OpenUpload').open(options)). The uploaded logo becomes the customer's selected logo and the logo / selected event is emitted, exactly as with openLogoGallery. Requires an initialized script.

Example

window.tronDesigner.openLogoUpload({ mode: 'dialog' });

See

Logos

---

openSinglePrintTaskDesigner()

openSinglePrintTaskDesigner(
   supplierCode: string, 
   productVariantCodes: string[], 
   printPositionCode: string, 
   printTechnologyCode: string, 
   options?: DesignerOptions
): void;

Opens the editor in a dialog to create a print job for one print position and technology on the given product variants.

Parameters

Parameter	Type	Description
supplierCode	string	Supplier code, e.g. 'PFC'.
productVariantCodes	string[]	Supplier product variant codes to include; at least one.
printPositionCode	string	Print position code, e.g. 'front'.
printTechnologyCode	string	Print technology code, e.g. 'PAD03'.
options?	DesignerOptions	How to display the editor (DesignerOptions). Default: { mode: 'dialog' }.

Returns

void

Remarks

A shortcut for openDesigner with open mode Create and data mode Exact. If any argument is missing or productVariantCodes is empty, the call is logged as an error and ignored. Requires an initialized script.

Example

window.tronDesigner.openSinglePrintTaskDesigner('PFC', ['10086021'], 'front', 'PAD03');

See

Data modes

---

refreshRegisteredElements()

refreshRegisteredElements(): void;

Scans the whole document again for editor openers and logo visualization images.

Returns

void

Remarks

The script registers elements with data-td-action="OpenCreate" | "OpenEdit" | "OpenView" or data-td-options once, when it initializes, and skips elements whose attributes are incomplete at that moment. Call this method after you add such elements to the page, or after you complete the attributes of an element that was skipped (e.g. set data-td-print-job-guid once the print job exists). The attribute values themselves are read when the element is clicked. If logo visualizations are enabled, new <img data-td-action="RenderVisualization"> elements are picked up as well.

To register elements automatically as they're added, use subscribeElementChanges or the data-td-monitored-element-id script attribute instead.

Example

productList.insertAdjacentHTML('beforeend',
  '<button data-td-action="OpenCreate" data-td-supplier-code="PFC" data-td-model-code="100860">Design</button>');
window.tronDesigner.refreshRegisteredElements();

See

HTML data attributes

---

removePrintingFromPrintJob()

removePrintingFromPrintJob(printPositionCode: string, printTechnologyCode: string): IEditorArgumentsOpenPrintJobBuilder;

Removes a printing from the existing print job.

Parameters

Parameter	Type	Description
printPositionCode	string	Print position code of the printing.
printTechnologyCode	string	Print technology code of the printing.

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsBuilder.removePrintingFromPrintJob

---

removePrintingsFromPrintJob()

removePrintingsFromPrintJob(removedPrintings: object[]): IEditorArgumentsOpenPrintJobBuilder;

Removes several printings from the existing print job.

Parameters

Parameter	Type	Description
removedPrintings	object[]	The print position and technology code pairs of the printings to remove.

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsBuilder.removePrintingsFromPrintJob

---

removeProductVariantFromPrintJob()

removeProductVariantFromPrintJob(productCode: string): IEditorArgumentsOpenPrintJobBuilder;

Removes a product variant from the existing print job.

Parameters

Parameter	Type	Description
productCode	string	Supplier code of the product variant.

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsBuilder.removeProductVariantFromPrintJob

---

removeProductVariantsFromPrintJob()

removeProductVariantsFromPrintJob(productCodes: string[]): IEditorArgumentsOpenPrintJobBuilder;

Removes several product variants from the existing print job.

Parameters

Parameter	Type	Description
productCodes	string[]	Supplier codes of the product variants.

Returns

IEditorArgumentsOpenPrintJobBuilder

Inherited from

IEditorArgumentsBuilder.removeProductVariantsFromPrintJob

---

setCustomer()

setCustomer(user: Omit<Customer, "customerGuid" | "logoGuid">): Promise<void>;

Updates the session customer or switches the session to another customer, e.g. after the visitor logs in to your shop.

Parameters

Parameter	Type	Description
user	Omit<Customer, "customerGuid" | "logoGuid">	Customer data. customerIdentity is your own stable ID of the customer (e.g. the shop user ID); customerPerson, customerCompany and customerEmail are optional details. customerLanguage is accepted by the type but not sent. The GUID and the logo can't be set: the server assigns them.

Returns

Promise<void>

A promise that resolves when the customer has been initialized on the server and stored in localStorage.

Remarks

The script sends the GUID of the current customer with the data you pass. The server then:

• without a customerIdentity updates the details of the current customer (no new customer is created);
• with a customerIdentity that already exists in your instance makes that customer the current one and updates its details;
• with a new customerIdentity gives the identity to the current customer if it is anonymous (has no identity yet), so the logos and print jobs the visitor created anonymously stay with them — the usual "log in" case. If the current customer already has a different identity, it is never taken over: a new customer is created for the new identity.

The resulting customer replaces the current one (see getCustomer) and is used for the next editor session. If its selected logo differs from the previous one, the logo visualizations on the page are refreshed. To set customer data on a single print job instead, use setPrintJobCustomer.

Call it after initialization. Without the script's API client — before the initialization, or when it failed because data-td-api-key or data-td-api is missing — the promise rejects with an Error, as it does when the request fails.

Example

await window.tronDesigner.setCustomer({
  customerIdentity: 'shop-user-4711',
  customerPerson: 'Jane Doe',
  customerEmail: 'jane@example.com',
});

See

Customers and orders

---

setDataMode()

setDataMode(dataMode: DataMode): this;

Sets the data mode of the editor arguments: what the customer may change in the editor.

Parameters

Parameter	Type	Description
dataMode	DataMode	'Exact', 'Partial' or 'Own' (see DataMode).

Returns

this

Remarks

Mostly useful for Edit sessions: setPrintJob(guid, 'Edit') sets no data mode, so the editor runs them as Partial (the customer can add and remove printings). Call setDataMode('Exact') to lock the structure of the print job. In Create sessions the product methods set the data mode themselves (the last one wins); call setDataMode after them to override it.

Example

window.tronDesigner.setPrintJob(printJobGuid, 'Edit').setDataMode('Exact').open({ mode: 'dialog' });

See

Data modes

Inherited from

IEditorArgumentsBuilder.setDataMode

---

setDefaultPrintJobLogo()

setDefaultPrintJobLogo(logo: ArgPrintingLogo): IEditorArgumentsBuilder;

Sets the logo placed on every printing that doesn't have its own logo (printJob.logo).

Parameters

Parameter	Type	Description
logo	ArgPrintingLogo	Either { guid } of an existing logo of the customer, or { url } of an image that the editor downloads and uploads as a new logo.

Returns

IEditorArgumentsBuilder

Remarks

Takes precedence over the customer's selected logo, which openDesigner otherwise uses. A logo with neither guid nor url makes the editor show an error.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setDefaultPrintJobLogo({ url: 'https://shop.example.com/logos/acme.png' })
  .open({ mode: 'dialog' });

See

Logos

Inherited from

IEditorArgumentsBuilder.setDefaultPrintJobLogo

---

setEditorButtons()

setEditorButtons(buttons: EditorButton[]): IEditorArgumentsBuilder;

Replaces the buttons in the editor footer with your own set.

Parameters

Parameter	Type	Description
buttons	EditorButton[]	Up to 5 buttons. Each has a style ('Primary' or 'Secondary'), a function (e.g. 'FinalConfirm', 'Save', 'DownloadPreviewImage'; see EditorButtonFunction) and labels per language ({ language: 'en', text: '…' }, ISO 639-1 codes).

Returns

IEditorArgumentsBuilder

Throws

Error if there are more than 5 buttons, a button isn't an object, its style or function isn't one of the allowed values, or it has no labels (or a label without language or text).

Example

window.tronDesigner.setEditorButtons([
  { style: 'Secondary', function: 'Save', labels: [{ language: 'en', text: 'Save progress' }] },
  { style: 'Primary', function: 'FinalConfirm', labels: [{ language: 'en', text: 'Confirm design' }] },
]);

See

Custom editor buttons

Inherited from

IEditorArgumentsBuilder.setEditorButtons

---

setEditorOptions()

setEditorOptions(options: Partial<EditorOptions>): this;

Merges options into editorOptions of the editor arguments.

Parameters

Parameter	Type	Description
options	Partial<EditorOptions>	Any subset of EditorOptions; the values you pass overwrite those set before.

Returns

this

Remarks

The product and printing methods accept the options that belong to them (AddProductOptions, AddPrintingOptions) and call this method; use it for anything else, e.g. showSelectedVariants in Exact mode.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setEditorOptions({ showSelectedVariants: 'All' })
  .open({ mode: 'dialog' });

Inherited from

IEditorArgumentsBuilder.setEditorOptions

---

setExactProduct()

setExactProduct(
   supplierCode?: string, 
   supplierGuid?: string, 
   buildProduct?: (productBuilder: IEditorArgumentsExactProductBuilder) => void
): IEditorArgumentsBuilder;

Sets a catalog product with exactly specified variants (data mode Exact).

Parameters

Parameter	Type	Description
supplierCode?	string	Supplier code, e.g. 'PFC'. Pass either this or supplierGuid, and undefined for the other one.
supplierGuid?	string	Supplier GUID, as an alternative to supplierCode.
buildProduct?	(productBuilder: IEditorArgumentsExactProductBuilder) => void	Called immediately with an IEditorArgumentsExactProductBuilder; add the variants there.

Returns

IEditorArgumentsBuilder

Remarks

Sets the open mode to Create and the data mode to Exact, also when a data mode was set before. Replaces any product set before. Add the printings with addExactPrinting.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => {
    b.addVariant('10086021');
    b.addVariant('10086055', 100);
  })
  .addExactPrinting('front', 'PAD03')
  .open({ mode: 'dialog' });

See

• Data modes
• JavaScript builder API

Inherited from

IEditorArgumentsBuilder.setExactProduct

---

setLastAddedPrintingLogo()

setLastAddedPrintingLogo(logo: ArgPrintingLogo): IEditorArgumentsBuilder;

Sets the logo of the printing added last (by addExactPrinting, addExactPrintings, addOwnPrinting or addPrintingToPrintJob).

Parameters

Parameter	Type	Description
logo	ArgPrintingLogo	Either { guid } of an existing logo of the customer, or { url } of an image to upload.

Returns

IEditorArgumentsBuilder

Remarks

Does nothing if no printing has been added yet. Use it right after the printing it belongs to. In TypeScript it can only be chained after addExactPrinting / addExactPrintings: the return types of addOwnPrinting and addPrintingToPrintJob don't include it (call it on window.tronDesigner instead).

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setLastAddedPrintingLogo({ guid: '610c6f2d-bd71-419c-a335-b305c3af7e5f' })
  .addExactPrinting('back', 'PAD03')
  .setLastAddedPrintingLogo({ url: 'https://shop.example.com/logos/slogan.png' })
  .open({ mode: 'dialog' });

See

Logos

Inherited from

IEditorArgumentsBuilder.setLastAddedPrintingLogo

---

setLogLevel()

setLogLevel(logLevel: LogLevel): void;

Sets how much the script (and editors opened afterwards) write to the browser console.

Parameters

Parameter	Type	Description
logLevel	LogLevel	'debug', 'info', 'warn' or 'error'. Use 'debug' while you develop the integration.

Returns

void

Remarks

The script reports most problems (missing attributes, invalid arguments, failed initialization) only to the console, so raise the level first when something doesn't work. You can also set the level with the data-td-log-level script attribute. Each level also includes the less verbose ones; debug messages are written only at 'debug'. An unknown value is logged as an error and the current level is kept.

Example

window.tronDesigner.setLogLevel('debug');

See

Debugging and error handling

---

setLogo()

setLogo(logoGuid: string): Promise<void>;

Makes an existing logo the customer's selected logo.

Parameters

Parameter	Type	Description
logoGuid	string	GUID of a logo that belongs to the current customer, e.g. event.entityGuid of a logo / selected or logo / created event.

Returns

Promise<void>

A promise that resolves when the logo has been saved on the server.

Remarks

The selected logo is stored with the customer on the server. It is used by logo visualizations (<img data-td-action="RenderVisualization">, which are re-rendered after the call) and pre-filled as the logo of print jobs opened afterwards. Does nothing if the customer isn't initialized yet. The promise rejects if the request fails, e.g. when the logo doesn't belong to the customer.

Example

await window.tronDesigner.setLogo('610c6f2d-bd71-419c-a335-b305c3af7e5f');

See

• Logos
• Logo visualizations

---

setOpenMode()

setOpenMode(mode: OpenMode): IEditorArgumentsBuilder;

Sets the open mode of the editor directly.

Parameters

Parameter	Type	Description
mode	OpenMode	'Create', 'Edit', 'View', 'OpenGallery' (logo gallery) or 'OpenUpload' (logo upload).

Returns

IEditorArgumentsBuilder

Remarks

The product, printing and print job setters set the open mode themselves, and each of them overwrites a value set here — so call setOpenMode last. You mostly need it for the logo dialogs (OpenGallery, OpenUpload); see also openLogoGallery.

Example

window.tronDesigner.setOpenMode('OpenGallery').open({ mode: 'dialog' });

See

Open modes

Inherited from

IEditorArgumentsBuilder.setOpenMode

---

setOrderInfo()

setOrderInfo(
   orderTitle?: string, 
   orderCode?: string, 
   orderItemCode?: string
): IEditorArgumentsBuilder;

Links the print job to an order in your system (orderTitle, orderCode and orderItemCode of printJob.customer).

Parameters

Parameter	Type	Description
orderTitle?	string	Human-readable title of the order.
orderCode?	string	Your order number.
orderItemCode?	string	Your order line / cart item number.

Returns

IEditorArgumentsBuilder

Remarks

All three values are overwritten on every call. The customer details set by setPrintJobCustomer are kept. The values are returned with the print job (IPrintJobDto.customer).

Example

window.tronDesigner.setOrderInfo('Summer campaign', 'ORD-1001', 'ORD-1001-1');

See

Customers and orders

Inherited from

IEditorArgumentsBuilder.setOrderInfo

---

setOwnEmptyProduct()

setOwnEmptyProduct(): Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">;

Uses an own product (not from the catalog) without any product data: the customer enters the product in the editor (data mode Own).

Returns

Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">

Remarks

Sets the open mode to Create and the data mode to Own, and removes a product set before. Continue with addOwnPrinting or open. The HTML equivalent is data-td-action with `data-td-own-product="true"`.

Example

window.tronDesigner.setOwnEmptyProduct().open({ mode: 'dialog' });

See

Data modes

Inherited from

IEditorArgumentsBuilder.setOwnEmptyProduct

---

setOwnProductSingleDimension()

setOwnProductSingleDimension(
   modelCode: string, 
   modelName: string, 
   isDimension1Color: boolean, 
   description?: string, 
   buildProduct?: (productBuilder: IEditorArgumentsOwnSingleDimensionProductBuilder) => void, 
   options?: Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>
): IEditorArgumentsBuilder;

Sets an own product (not from the catalog) whose variants differ in one dimension, e.g. color or size (data mode Own).

Parameters

Parameter	Type	Description
modelCode	string	Your product (model) code.
modelName	string	Product name shown in the editor.
isDimension1Color	boolean	true if the dimension is a color (the variants then carry color codes).
description?	string	Optional product description.
buildProduct?	(productBuilder: IEditorArgumentsOwnSingleDimensionProductBuilder) => void	Called immediately with an IEditorArgumentsOwnSingleDimensionProductBuilder; add the variants there.
options?	Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>	Whether to show the variants and quantity inputs (see AddProductOptions).

Returns

IEditorArgumentsBuilder

Remarks

Sets the open mode to Create and the data mode to Own, and replaces any product set before. Add the printings with addOwnPrinting.

Example

window.tronDesigner
  .setOwnProductSingleDimension('MUG-01', 'Custom Ceramic Mug', true, 'A customized 11oz ceramic mug', (p) => {
    p.addVariant('MUG-01-RED', 'Red', ['#FF0000'], 'Ceramic Mug - Red');
    p.addVariant('MUG-01-WHITE', 'White', ['#FFFFFF'], 'Ceramic Mug - White');
  })
  .addOwnPrinting('front', 'Front', 'PAD03', 'Pad print', 'Pantone', 3, 50, 50)
  .open({ mode: 'dialog' });

See

Data modes

Inherited from

IEditorArgumentsBuilder.setOwnProductSingleDimension

---

setOwnProductSingleVariant()

setOwnProductSingleVariant(
   modelCode: string, 
   modelName: string, 
   description?: string, 
   quantity?: number, 
   options?: Pick<Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>, "showQuantityInputs">
): Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">;

Sets an own product (not from the catalog) with exactly one variant, e.g. a product without colors or sizes (data mode Own).

Parameters

Parameter	Type	Description
modelCode	string	Your product code; also used as the code of the single variant.
modelName	string	Product name shown in the editor.
description?	string	Optional product description.
quantity?	number	Optional quantity of the variant.
options?	Pick<Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>, "showQuantityInputs">	Optional showQuantityInputs editor option (AddProductOptions).

Returns

Pick<IEditorArgumentsBuilder, "open" | "addOwnPrinting">

Remarks

Sets the open mode to Create and the data mode to Own, and replaces any product set before. Continue with addOwnPrinting.

Example

window.tronDesigner
  .setOwnProductSingleVariant('PEN-01', 'Metal pen', 'Ballpoint pen with metal body', 250)
  .addOwnPrinting('barrel', 'Barrel', 'LASER', 'Laser engraving', 'Colorless', undefined, 40, 8)
  .open({ mode: 'dialog' });

See

Data modes

Inherited from

IEditorArgumentsBuilder.setOwnProductSingleVariant

---

setOwnProductTwoDimensions()

setOwnProductTwoDimensions(
   modelCode: string, 
   modelName: string, 
   isDimension1Color: boolean, 
   description?: string, 
   buildProduct?: (productBuilder: IEditorArgumentsOwnTwoDimensionsProductBuilder) => void, 
   options?: Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>
): IEditorArgumentsBuilder;

Sets an own product (not from the catalog) whose variants differ in two dimensions, e.g. color and size (data mode Own).

Parameters

Parameter	Type	Description
modelCode	string	Your product (model) code.
modelName	string	Product name shown in the editor.
isDimension1Color	boolean	true if the first dimension is a color.
description?	string	Optional product description.
buildProduct?	(productBuilder: IEditorArgumentsOwnTwoDimensionsProductBuilder) => void	Called immediately with an IEditorArgumentsOwnTwoDimensionsProductBuilder; add the variants there.
options?	Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>	Optional product-related editor options (AddProductOptions).

Returns

IEditorArgumentsBuilder

Remarks

Sets the open mode to Create and the data mode to Own, and replaces any product set before. Add the printings with addOwnPrinting.

Example

window.tronDesigner
  .setOwnProductTwoDimensions('TEE-01', 'Organic T-shirt', true, undefined, (p) => {
    p.addVariant('TEE-01-RED-M', 'Red', 'M', ['#FF0000']);
    p.addVariant('TEE-01-RED-L', 'Red', 'L', ['#FF0000']);
  })
  .addOwnPrinting('front', 'Front', 'SCREEN', 'Screen print', 'Pantone', 4, 300, 400)
  .open({ mode: 'dialog' });

See

Data modes

Inherited from

IEditorArgumentsBuilder.setOwnProductTwoDimensions

---

setPartialProduct()

setPartialProduct(
   supplierCode?: string, 
   supplierGuid?: string, 
   buildProduct?: (productBuilder: IEditorArgumentsPartialProductBuilder) => void, 
   options?: Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>
): IEditorArgumentsBuilder;

Sets a catalog product by its model, so the customer chooses the variants (and print options) in the editor (data mode Partial).

Parameters

Parameter	Type	Description
supplierCode?	string	Supplier code, e.g. 'PFC'. Pass either this or supplierGuid, and undefined for the other one.
supplierGuid?	string	Supplier GUID, as an alternative to supplierCode.
buildProduct?	(productBuilder: IEditorArgumentsPartialProductBuilder) => void	Called immediately with an IEditorArgumentsPartialProductBuilder; set the model there and optionally preselect variants.
options?	Partial<Pick<EditorOptions, "showSelectedVariants" | "showQuantityInputs">>	Whether to show the preselected variants and quantity inputs (see AddProductOptions).

Returns

IEditorArgumentsBuilder

Remarks

Sets the open mode to Create and the data mode to Partial, also when a data mode was set before (e.g. Exact by an earlier addExactPrinting). Replaces any product set before. Printings are optional: without them the customer picks the print options in the editor.

Example

window.tronDesigner
  .setPartialProduct('PFC', undefined, (b) => b.setProductModel('100860'))
  .open({ mode: 'dialog' });

See

• Data modes
• JavaScript builder API

Inherited from

IEditorArgumentsBuilder.setPartialProduct

---

setPrintJob()

Call Signature

setPrintJob(printJobGuid: string, mode: "Edit"): IEditorArgumentsOpenPrintJobBuilder;

Opens an existing print job for editing (open mode Edit).

Parameters

Parameter	Type	Description
printJobGuid	string	GUID of the print job, e.g. from a printJob / created event.
mode	"Edit"	'Edit'.

Returns

IEditorArgumentsOpenPrintJobBuilder

A builder with the methods that change the loaded print job (add or remove variants and printings, set order info, …) and open.

Remarks

Sets printJob.printJobGuid and the open mode, and clears the products and printings added before. Don't call setExactProduct, addExactPrinting or other product/printing setters afterwards — they switch the open mode back to Create; use the …ToPrintJob methods of IEditorArgumentsOpenPrintJobBuilder instead.

Example

window.tronDesigner
  .setPrintJob(printJobGuid, 'Edit')
  .addProductVariantsToPrintJob({ productCode: '10601301' }, { productCode: '10601331' })
  .addPrintingToPrintJob('back', 'GPE01')
  .open({ mode: 'dialog' });

See

Open modes

Inherited from

IEditorArgumentsBuilder.setPrintJob

Call Signature

setPrintJob(printJobGuid: string, mode?: "View"): Pick<IEditorArgumentsBuilder, "open">;

Opens an existing print job read-only (open mode View).

Parameters

Parameter	Type	Description
printJobGuid	string	GUID of the print job, e.g. from a printJob / created event.
mode?	"View"	'View'. This is the default, so you can omit it.

Returns

Pick<IEditorArgumentsBuilder, "open">

A builder with only open.

Remarks

Sets printJob.printJobGuid and the open mode, and clears the products and printings added before.

Example

window.tronDesigner.setPrintJob(printJobGuid).open({ mode: 'dialog' });

See

Open modes

Inherited from

IEditorArgumentsBuilder.setPrintJob

---

setPrintJobCustomer()

setPrintJobCustomer(
   customerIdentity?: string, 
   customerPerson?: string, 
   customerCompany?: string, 
   customerEmail?: string
): IEditorArgumentsBuilder;

Sets the customer details stored with the print job (printJob.customer), e.g. the shop account that owns it.

Parameters

Parameter	Type	Description
customerIdentity?	string	Your own ID of the customer.
customerPerson?	string	Name of the contact person.
customerCompany?	string	Company name.
customerEmail?	string	E-mail address.

Returns

IEditorArgumentsBuilder

Remarks

All four values are overwritten on every call; pass undefined for values you don't have. The order information set by setOrderInfo is kept. This affects only the print job being built — to change the session customer, use setCustomer.

Example

window.tronDesigner.setPrintJobCustomer('shop-user-4711', 'Jane Doe', 'ACME Ltd.', 'jane@example.com');

See

Customers and orders

Inherited from

IEditorArgumentsBuilder.setPrintJobCustomer

---

setPrintJobLanguage()

setPrintJobLanguage(languageCode: string): IEditorArgumentsBuilder;

Sets the language in which the product and print data (names, descriptions) are loaded for the print job (printJob.languageCode).

Parameters

Parameter	Type	Description
languageCode	string	ISO 639-1 language code, e.g. 'de'.

Returns

IEditorArgumentsBuilder

Remarks

This doesn't change the language of the editor UI; use the data-td-language script attribute for that.

Inherited from

IEditorArgumentsBuilder.setPrintJobLanguage

---

setPrintJobTitle()

setPrintJobTitle(title: undefined | string): IEditorArgumentsBuilder;

Sets the title of the print job (printJob.title).

Parameters

Parameter	Type	Description
title	undefined | string	The title, or undefined to remove a title set before.

Returns

IEditorArgumentsBuilder

Inherited from

IEditorArgumentsBuilder.setPrintJobTitle

---

setProofreadingTemplateTag()

setProofreadingTemplateTag(tag: string): IEditorArgumentsBuilder;

Selects the proofreading template, by its tag, that the editor uses when it generates proofreading PDFs (editor.proofreadingArgs.templateTag).

Parameters

Parameter	Type	Description
tag	string	Tag of the proofreading template.

Returns

IEditorArgumentsBuilder

Remarks

To pick a template when you download a proofreading yourself, pass the tag to getProofreading.

See

Retrieving print jobs and files

Inherited from

IEditorArgumentsBuilder.setProofreadingTemplateTag

---

setResultActionCloseEditor()

setResultActionCloseEditor(redirectUrl?: string): IEditorArgumentsBuilder;

After the customer confirms the final verification, the print job is saved and the editor closes.

Parameters

Parameter	Type	Description
redirectUrl?	string	URL to navigate to after the editor closes.

Returns

IEditorArgumentsBuilder

Remarks

Replaces a result action set before. The editor closes with the reason 'Confirmed'; the redirect URL is also passed to your onClose callback, and the script then navigates the browser there. If the customer closes the editor with its close button instead, the reason is 'Cancelled' and no redirect happens.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setResultActionCloseEditor()
  .open({ mode: 'dialog', onClose: (reason) => console.log('Editor closed:', reason) });

See

Result actions

Inherited from

IEditorArgumentsBuilder.setResultActionCloseEditor

---

setResultActionNone()

setResultActionNone(): IEditorArgumentsBuilder;

After the customer confirms the final verification, the print job is saved and the editor stays open.

Returns

IEditorArgumentsBuilder

Remarks

Replaces a result action set before. Without any result action in the editor arguments, the editor uses the one configured in the Admin Portal (Settings → Print editor).

See

Result actions

Inherited from

IEditorArgumentsBuilder.setResultActionNone

---

setResultActionShowDialog()

setResultActionShowDialog(dialogLocalizations: EditorResultDialog[], redirectUrl?: string): IEditorArgumentsBuilder;

After the customer confirms the final verification, the print job is saved and a "print job saved" dialog is shown. Closing the dialog closes the editor and, if redirectUrl is set, the browser navigates there.

Parameters

Parameter	Type	Description
dialogLocalizations	EditorResultDialog[]	Title, message and button text of the dialog per language (see EditorResultDialog). The editor uses the entry for the current UI language, then en, then the first entry; pass [] for the default texts.
redirectUrl?	string	URL to navigate to after the dialog is closed.

Returns

IEditorArgumentsBuilder

Remarks

Replaces a result action set before. The editor closes with the reason 'Confirmed' and the redirect URL is also passed to your onClose callback.

Example

window.tronDesigner
  .setExactProduct('PFC', undefined, (b) => b.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .setResultActionShowDialog(
    [{ language: 'en', title: 'Thank you', message: 'Your design was saved.', buttonText: 'Back to cart' }],
    'https://shop.example.com/cart'
  )
  .open({ mode: 'dialog' });

See

Result actions

Inherited from

IEditorArgumentsBuilder.setResultActionShowDialog

---

subscribeDesignerEvent()

Call Signature

subscribeDesignerEvent(
   entityType: "printJob", 
   eventType: DesignerEventType, 
   callback: (event: DesignerEntityEvent<IPrintJobDto>) => void
): void;

Subscribes to print job events: created when the editor saves a new print job for the first time, updated when it saves a print job that already exists.

Parameters

Parameter	Type	Description
entityType	"printJob"	'printJob'.
eventType	DesignerEventType	'created' or 'updated'. The type also accepts 'deleted' and 'selected', but the editor never emits them for print jobs.
callback	(event: DesignerEntityEvent<IPrintJobDto>) => void	Called with a DesignerEntityEvent: entityGuid is the print job GUID and detail is the saved print job as IPrintJobDto. The script converts the editor's raw data to this format (with ready-to-use image URLs) before it calls you.

Returns

void

Remarks

The editor can save the print job several times in one session — with a Save / SaveAndClose button, when the customer generates a proofreading, and at the final confirmation — always with the same printJobGuid. In Edit mode saves fire updated. In a Create session Save / SaveAndClose fire created each time, a proofreading fires created only before the first save (afterwards no event), and the final confirmation fires updated if the print job was saved before, else created. Upsert by printJobGuid rather than appending a new entry for each event.

Applies to all five overloads of this method:

• Subscriptions stay active for the lifetime of the page, across editor sessions. Subscribe once, e.g. in your data-td-script-initialized-callback, not before every open() — subscribing the same callback again makes it run twice.
• Callbacks run only for events of editors opened by this script, and only for the exact entityType and eventType pair you subscribed to.
• If a callback throws, the error is logged to the console and the other subscribers are still called.
• All events except logo / selected are also available as script attributes, e.g. data-td-print-job-created-callback.
• Remove subscriptions with unsubscribeDesignerEvent or unsubscribeDesignerEvents.

Example

window.tronDesigner.subscribeDesignerEvent('printJob', 'created', (event) => {
  const printJob = event.detail;
  console.log('Saved print job', event.entityGuid, 'with', printJob.printings.length, 'printing(s)');
});

See

Events and callbacks

Call Signature

subscribeDesignerEvent(
   entityType: "logo", 
   eventType: "selected", 
   callback: (event: DesignerEntityEvent<{
  logoGuid: string;
  logoUploaded: boolean;
}>) => void
): void;

Subscribes to the selected logo event, emitted when the customer confirms a logo in the logo dialog opened with openLogoGallery, openLogoUpload or the OpenGallery / OpenUpload open modes.

Parameters

Parameter	Type	Description
entityType	"logo"	'logo'.
eventType	"selected"	'selected'.
callback	(event: DesignerEntityEvent<{ logoGuid: string; logoUploaded: boolean; }>) => void	Called with a DesignerEntityEvent: entityGuid is the selected logo's GUID and detail is { logoGuid, logoUploaded }, where logoUploaded is true if the customer uploaded the logo in the dialog. When the customer cleared the selection, entityGuid is null and detail is an empty object ({}).

Returns

void

Remarks

The script already saves the selection as the customer's logo (setLogo or clearLogo); use this event to update your own UI. This overload is listed before the generic logo overload, so TypeScript infers the { logoGuid, logoUploaded } payload for 'selected'.

Example

window.tronDesigner.subscribeDesignerEvent('logo', 'selected', (event) => {
  document.getElementById('logo-status').textContent = event.entityGuid
    ? `Logo selected: ${event.entityGuid}`
    : 'No logo selected';
});

See

Logos

Call Signature

subscribeDesignerEvent(
   entityType: "logo", 
   eventType: "created", 
   callback: (event: DesignerEntityEvent<ILogoDTO>) => void
): void;

Subscribes to the created logo event, emitted when the customer uploads a logo in the editor and adds it to a printing.

Parameters

Parameter	Type	Description
entityType	"logo"	'logo'.
eventType	"created"	'created'. For 'selected', 'updated' and 'deleted', see the other overloads.
callback	(event: DesignerEntityEvent<ILogoDTO>) => void	Called with a DesignerEntityEvent whose entityGuid is the logo GUID and detail is the logo as ILogoDTO.

Returns

void

Example

window.tronDesigner.subscribeDesignerEvent('logo', 'created', (event) => {
  console.log('Uploaded logo', event.entityGuid, event.detail.name);
});

See

• Events and callbacks
• Logos

Call Signature

subscribeDesignerEvent(
   entityType: "logo", 
   eventType: "updated" | "deleted", 
   callback: (event: DesignerEntityEvent<undefined>) => void
): void;

Subscribes to the updated (a logo was changed) and deleted (a logo was removed from the customer's logos) logo events.

Parameters

Parameter	Type	Description
entityType	"logo"	'logo'.
eventType	"updated" | "deleted"	'updated' or 'deleted'.
callback	(event: DesignerEntityEvent<undefined>) => void	Called with a DesignerEntityEvent whose entityGuid is the logo GUID. There is no detail (it's undefined); call getLogo if you need the logo data.

Returns

void

See

• Events and callbacks
• Logos

Call Signature

subscribeDesignerEvent(
   entityType: "text", 
   eventType: "created", 
   callback: (event: DesignerEntityEvent<ITextDTO>) => void
): void;

Subscribes to the created text event, emitted when the customer adds a text to the motive in the editor.

Parameters

Parameter	Type	Description
entityType	"text"	'text'.
eventType	"created"	'created' (the only event emitted for texts).
callback	(event: DesignerEntityEvent<ITextDTO>) => void	Called with a DesignerEntityEvent whose detail is the text as ITextDTO. entityGuid is the ID (a GUID) of the text object: unique for each text, the same when the customer changes that text again, and equal to the id of the text's motive object in the saved print job.

Returns

void

Example

window.tronDesigner.subscribeDesignerEvent('text', 'created', (event) => {
  console.log('Text added', event.detail.data);
});

See

Events and callbacks

Call Signature

subscribeDesignerEvent(
   entityType: "proofreading", 
   eventType: "created", 
   callback: (event: DesignerEntityEvent<Blob>) => void
): void;

Subscribes to the created proofreading event, emitted when the editor generates a proofreading PDF (e.g. by the GenerateProofreading editor button).

Parameters

Parameter	Type	Description
entityType	"proofreading"	'proofreading'.
eventType	"created"	'created' (the only event emitted for proofreadings).
callback	(event: DesignerEntityEvent<Blob>) => void	Called with a DesignerEntityEvent: entityGuid is the print job GUID and detail is the PDF file as a Blob.

Returns

void

Example

window.tronDesigner.subscribeDesignerEvent('proofreading', 'created', (event) => {
  window.open(URL.createObjectURL(event.detail));
});

See

• Events and callbacks
• Retrieving print jobs and files

---

subscribeElementChanges()

subscribeElementChanges(rootElement: HTMLElement): void;

Starts watching an element for added and removed editor openers and registers or unregisters them automatically.

Parameters

Parameter	Type	Description
rootElement	HTMLElement	The element to watch, including its whole subtree (e.g. your product list).

Returns

void

Remarks

Uses a MutationObserver on rootElement. Only one element is watched at a time: a new call replaces the previous one, and so does the data-td-monitored-element-id script attribute (which calls this method during initialization). Elements that already exist inside rootElement are not registered by this call; use refreshRegisteredElements for those. Openers are detected however they are added (appendChild, innerHTML, insertAdjacentHTML, …), but attribute changes are not.

Example

window.tronDesigner.subscribeElementChanges(document.getElementById('product-list'));

See

HTML data attributes

---

unsubscribeDesignerEvent()

unsubscribeDesignerEvent<T = unknown>(callback: DesignerEventHandler<T>): void;

Removes the subscriptions made with subscribeDesignerEvent, identified by their callback.

Type Parameters

Type Parameter	Default type	Description
T	unknown	Type of the event detail of the callback.

Parameters

Parameter	Type	Description
callback	DesignerEventHandler<T>	The same function reference you passed to subscribeDesignerEvent.

Returns

void

Remarks

Removes every subscription that uses this function — if you subscribed it to several events (e.g. both printJob / created and printJob / updated), all of them are removed. Callbacks registered with script attributes (data-td-*-callback) are subscribed as the global function itself, so unsubscribeDesignerEvent(window.onPrintJobCreated) removes them too. To remove subscriptions by event type instead, use unsubscribeDesignerEvents.

Example

function onPrintJobCreated(event) { console.log(event.entityGuid); }

window.tronDesigner.subscribeDesignerEvent('printJob', 'created', onPrintJobCreated);
// later
window.tronDesigner.unsubscribeDesignerEvent(onPrintJobCreated);

See

Events and callbacks

---

unsubscribeDesignerEvents()

unsubscribeDesignerEvents(entityType?: DesignerEntityType, eventType?: DesignerEventType): void;

Removes all subscriptions that match an entity type and/or event type, regardless of their callbacks.

Parameters

Parameter	Type	Description
entityType?	DesignerEntityType	Only remove subscriptions for this entity type. Omit (or pass undefined) to match all entity types.
eventType?	DesignerEventType	Only remove subscriptions for this event type. Omit to match all event types.

Returns

void

Remarks

Also removes subscriptions created from script attributes (data-td-*-callback). Calling it without arguments removes every subscription on the page.

Example

window.tronDesigner.unsubscribeDesignerEvents('printJob', 'created'); // print job "created" only
window.tronDesigner.unsubscribeDesignerEvents('logo');                // all logo events
window.tronDesigner.unsubscribeDesignerEvents();                      // everything

See

Events and callbacks

---

unsubscribeElementChanges()

unsubscribeElementChanges(): void;

Stops watching the element passed to subscribeElementChanges (or set by data-td-monitored-element-id).

Returns

void

Remarks

Elements that are already registered keep working.