Dialog and inline display

The editor opens either in a full-window dialog on top of your page or inline inside an element of your page. This page shows both modes, what the script does to your page while the editor is open, and how to react when the customer closes it.

TIP

Examples: Inline embed · source — Quick start (dialog) · source

Choose a display mode

You pick the mode in the second argument of openDesigner or open — the DesignerOptions object.

mode	Where the editor appears	Available from
'dialog'	A full-window overlay appended to <body>	JavaScript and HTML data attributes
'container'	Inside the element you pass as container	JavaScript only

There is no default: always pass mode. Buttons configured with HTML data attributes always open a dialog and can't take an onClose callback — use the JavaScript API when you need either.

Open the editor only after the script has initialized (wait for getInitializing() or the data-td-script-initialized-callback, see Loading the integration script). Before that, or after a failed initialization, openDesigner(), open(), openLogoGallery(), openLogoUpload() and openSinglePrintTaskDesigner() log the error openDesigner: cannot open, the script is not initialized. and add nothing to the page, and data-td-* buttons do nothing (their click handlers are attached only at the end of a successful initialization). If the editor component (<trondesigner-editor>) is still being defined when you open it, the script waits for it for up to 10 seconds and then opens the editor; if it never becomes available, it logs an error and adds nothing.

Open the editor in a dialog

HTML

<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">
  Design your print
</button>

JavaScript

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

While the dialog is open, the script:

• appends a fixed overlay (<div id="trondesigner-editor-wrapper">, 100vw × 100vh, z-index: 10001) to <body>. The editor fills the whole window; while it loads, the customer sees the overlay's semi-transparent dark backdrop;
• locks page scrolling by adding the class trondesigner-editor_overflow-hidden (overflow: hidden !important) to <body>. The script adds this rule to your page's <head> when it initializes.

The overlay has no close button of its own. The customer closes the editor with the × button in the editor header (or Esc on the design canvas); if the design isn't empty, the editor first asks "Do you really want to discard your design?". On close, the script removes the overlay and the scroll lock.

Only one dialog can be open at a time. While it's open, another call that opens a dialog (a second click on a data-td-* button, open({ mode: 'dialog' }), openLogoGallery({ mode: 'dialog' }), …) is ignored, and the console shows the warning openDesigner: the editor dialog is already open - ignored.

NOTE

Page elements with a z-index above 10001 (chat widgets, cookie bars) stay on top of the dialog. Lower them while the editor is open.

Embed the editor in your page

Pass mode: 'container' and the element to render into:

<div id="editor-container" style="width: 100%; height: 800px"></div>

const container = document.getElementById('editor-container');
container.innerHTML = ''; // the script appends the editor; it doesn't clear the container

window.tronDesigner.openDesigner(
  {
    openMode: 'Create',
    dataMode: 'Exact',
    printJob: {
      addProducts: { supplierCode: 'PFC', variants: [{ productCode: '10086021' }] },
      addPrintings: [{ printPositionCode: 'front', printTechnologyCode: 'PAD03' }],
    },
  },
  { mode: 'container', container }
);

Keep in mind:

• Give the container a height. The <trondesigner-editor> element is sized width: 100%; height: 100%, so a container with height: auto collapses. The example uses height: 800px; calc(100vh - <your header height>) works too.
• container must be an element. If you pass null (for example a getElementById that found nothing), nothing opens and the console shows openDesigner: cannot open, container is empty.
• The page isn't locked. No overlay and no scroll lock are added; the page around the editor stays interactive.
• The editor's own dialogs cover the window. Final verification, logo upload, confirmations and error dialogs are position: fixed overlays, so they cover the whole browser window even in container mode.
• Breakpoints follow the window, not the container. The editor's responsive layout uses media queries on the window width, so a narrow container on a wide screen still gets the desktop layout.
• One editor per container. If the container already contains an editor, the call is ignored with the warning openDesigner: an editor is already open in this container - ignored. You can open several inline editors in different containers, and inline editors and a dialog can be open at the same time.

When the editor closes, only its own element is removed from your container; the container itself and any other editors on the page stay.

React when the editor closes

Pass onClose in DesignerOptions. It receives the close reason and, in some cases, a redirect URL:

window.tronDesigner
  .setExactProduct('PFC', undefined, (product) => product.addVariant('10086021'))
  .addExactPrinting('front', 'PAD03')
  .open({
    mode: 'dialog',
    onClose: (reason, redirectUrl) => {
      console.log('Editor closed:', reason, redirectUrl);
      if (reason === 'Error') alert('The designer could not be loaded. Please contact us.');
    },
  });

Reason	Fired when
'Confirmed'	The customer confirms the final verification with the result action Close; clicks the button of the result dialog (result action Dialog); a SaveAndClose (after the print job was saved) or DownloadProofreadingAndClose custom button finishes; a logo is picked (or the selection is cleared) in openLogoGallery() / openLogoUpload() (see Logos).
'Cancelled'	The customer closes the editor with × / Esc, or closes one of the start-up selection dialogs (variants and print options, custom mockup), or dismisses the logo gallery.
'Error'	The editor showed an error dialog (for example product codes that don't exist in Exact data mode, a print job that can't be loaded, an unexpected error) and the customer clicked Close Application; or the editor arguments had an unknown openMode (such as 'CREATE') — then the editor closes right away and logs the error.

The values are PascalCase strings: compare with 'Confirmed', not 'confirmed'.

What happens on close, step by step

1. The editor dispatches a close event from the <trondesigner-editor> element (an internal event — use onClose).
2. The script removes this editor (and in dialog mode the overlay and the scroll lock). Other editors on the page stay open.
3. The script calls your onClose(reason, redirectUrl).
4. If reason is 'Confirmed' and redirectUrl isn't empty, the script navigates with window.location.href = redirectUrl.

redirectUrl is the redirect URL of the result action — editor.result.redirectUrl from the editor arguments or, if you don't pass editor.result, the Redirect URL set in the Admin Portal. It's passed when the result dialog closes, with the SaveAndClose and DownloadProofreadingAndClose buttons and with the Close result action; logo dialog, cancelled and error closes have none.

Because the script navigates right after onClose returns, don't start asynchronous work (such as a request to add the item to the cart) in onClose and expect it to finish. Leave redirectUrl empty instead and navigate yourself when your work is done.

Don't use the close reason alone to decide whether a print job was saved — a Save button can save it before the customer cancels. The print job created / updated events fire whenever it is saved.

There is no method to close the editor from your code, so onClose only fires for the cases in the table.

Use your own styles

DesignerOptions also takes two styling options, in both modes:

• ownCssVariablesUrl — load your own CSS variables file instead of the one generated from the Admin Portal settings;
• ownCss: true — don't load the editor's default stylesheet.

Both are explained in Styling the editor.

See also

• DesignerOptions and EditorCloseReason — API reference
• Result actions — what happens after the final confirmation
• Events and callbacks — get the print job GUID
• Styling the editor