Logos

Customers upload logos into their own gallery and place them into printings. This page shows how to put a logo into the editor for them, how to work with the customer's current logo, how to open only the logo gallery or upload dialog, and which logo events you get.

TIP

Example: Logo features · source

Preselect a logo in the editor

Pass a logo in the editor arguments and the editor places it into the printings when it opens. A logo is an ArgPrintingLogo with either a guid or a url:

Field	Use
guid	A logo that already exists in your TronDesigner instance, for example one the customer uploaded earlier.
url	A public image URL. TronDesigner downloads the image on its server and adds it to the customer's gallery as a new logo.

Set it for the whole print job, or per printing. A printing's own logo wins over the print job logo:

JavaScript

window.tronDesigner
  .setExactProduct('PFC', undefined, (p) => p.addVariant('10086021'))
  .setDefaultPrintJobLogo({ guid: '610c6f2d-bd71-419c-a335-b305c3af7e5f' }) // all printings
  .addExactPrinting('front', 'PAD03')
  .addExactPrinting('wrap', 'LASR03')
  .setLastAddedPrintingLogo({ url: 'https://www.example.com/logo-wrap.png' }) // only "wrap"
  .open({ mode: 'dialog' });

JSON

{
  "openMode": "Create",
  "dataMode": "Exact",
  "printJob": {
    "logo": { "guid": "610c6f2d-bd71-419c-a335-b305c3af7e5f" },
    "addProducts": { "supplierCode": "PFC", "variants": [{ "productCode": "10086021" }] },
    "addPrintings": [
      { "printPositionCode": "front", "printTechnologyCode": "PAD03" },
      {
        "printPositionCode": "wrap",
        "printTechnologyCode": "LASR03",
        "logo": { "url": "https://www.example.com/logo-wrap.png" }
      }
    ]
  }
}

• setDefaultPrintJobLogo() sets printJob.logo. setLastAddedPrintingLogo() sets the logo of the printing you added last, so call it right after addExactPrinting() or addOwnPrinting(). In TypeScript, call it as a separate statement after addOwnPrinting(): that method's return type only offers open() and addOwnPrinting().
• A logo object with neither guid nor url stops the editor with an error. So does a URL TronDesigner can't download.
• If you don't pass printJob.logo and the customer has a current logo, the script uses the current logo as printJob.logo.

The print job logo (printJob.logo, including the automatic current logo) is applied to the printings of a new print job in every data mode, and to the printings you add to an existing print job in Edit mode. Printings that are already in the print job keep their design.

Work with the customer's current logo

Each customer has one current logo, stored with the customer. The script uses it as the default print job logo (see above) and for logo visualizations.

Method	Does
setLogo(logoGuid)	Makes a logo from the customer's gallery the current logo. Rejects if the logo belongs to another customer.
getLogo()	Resolves to the current logo (ILogoDTO), or undefined when there is none.
clearLogo()	Removes the current logo.

const td = window.tronDesigner;

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

const logo = await td.getLogo(); // an object, not a GUID
if (logo) console.log(logo.logoGuid, logo.name);

await td.clearLogo();

All three return promises. getCustomer().logoGuid gives you the current logo GUID without a request.

Open only the logo gallery or upload

Let the customer choose or upload a logo without opening the full editor, for example on a product list with visualizations. Both methods open the same dialog with the New logo and My logos tabs; they differ in the tab shown first:

Method	Open mode	First tab
openLogoGallery(options)	OpenGallery	My logos
openLogoUpload(options)	OpenUpload	New logo

HTML

<button data-td-options='{"openMode":"OpenGallery","printJob":{}}'>Choose your logo</button>

JavaScript

const td = window.tronDesigner;

td.openLogoGallery({ mode: 'dialog' });
// same as: td.setOpenMode('OpenGallery').open({ mode: 'dialog' });

td.openLogoUpload({
  mode: 'dialog',
  onClose: (reason) => console.log('Logo dialog closed:', reason), // 'Confirmed' or 'Cancelled'
});

What happens:

1. The customer picks a logo from My logos or uploads a new one.
2. The script makes it the customer's current logo (it calls setLogo() for you), visualizations on the page re-render, and the logo selected event fires.
3. The dialog closes with the reason Confirmed. If the customer closes it without choosing, the reason is Cancelled and no event fires.

The dialog also has a Clear selected button (active when the customer has a current logo). It clears the current logo and fires logo selected with entityGuid null.

window.tronDesigner.subscribeDesignerEvent('logo', 'selected', (event) => {
  if (event.entityGuid) {
    console.log('Current logo:', event.entityGuid, 'new upload:', event.detail.logoUploaded);
  } else {
    console.log('Customer cleared the logo');
  }
});

React to logo events

Event	Fires when	event.detail
logo created	A new logo is uploaded in the editor and placed into a printing	ILogoDTO
logo updated	The customer renames a logo or saves an edited logo to their gallery	undefined (use entityGuid)
logo deleted	The customer removes a logo from their gallery	undefined (use entityGuid)
logo selected	The customer picks, uploads or clears a logo in the gallery/upload dialog	{ logoGuid, logoUploaded }, or {} when cleared

A logo uploaded in the stand-alone upload dialog fires only selected (with logoUploaded: true), not created. Subscribe with subscribeDesignerEvent('logo', …) or the data-td-logo-*-callback attributes; see Events and callbacks.

See also

• setLogo, openLogoGallery, ArgPrintingLogo — API reference
• Logo visualizations — show the current logo on product images
• Open modes — OpenGallery and OpenUpload next to Create, Edit and View
• Customers and orders — who owns a logo gallery