TronDesigner – Integration Examples
Docs: Developer documentation  |  Dialog and inline display

Implementation Notes

• The editor is embedded directly in the #editor-container element
• The page isn't locked - no overlay or scroll lock is added around the editor
• The editor's own dialogs (variant/print option selection in Partial mode, logo upload, final verification, errors) still cover the whole window
• Give the container a height - the editor fills 100% of its width and height
• You can style the container to match your page design
• The editor adapts to the container dimensions
• One editor per container; several inline editors can be open in different containers
• There is no method to close the editor from code - use onClose to react when the customer closes it
• Ideal for product configurators and seamless workflows

Code Example:

tronDesigner.openDesigner({
    "openMode": "Create",
    "dataMode": "Exact",
    "printJob": { /* configuration */ }
}, {
    mode: "container",
    container: document.getElementById("editor-container"),
    onClose: (reason) => console.log("Editor closed:", reason)
});