TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Quick Start

Working with the Preflight Tool

After you have installed the Preflight Tool, you can start working with this tool:

  1. Upload a file.
  2. Validate the file.
  3. If the file is invalid, upload another file or fix the found errors.
  4. Render print-ready files.
  5. Get links to print files.

The Preflight tool.

Configuring the Preflight Tool

First, you must specify a container for this tool.

<main class="main">
  <div class="editor-parent" id="editor-parent"></div>

Then, you need to configure this tool. For example, you can load the default configuration from the config.json file.

import moduleLoader from "./ui-framework/4.5.3/moduleLoader.js";
const config = await moduleLoader.loadJson("./config.json");

When you open this file, it may look as follows:

    "showSteps": true,
    "widgets": [
            "name": "preflight",
            "type": "preflight",
            "params": {
                "config": {
                    "language": "en",
                    "backendUrl": "",
                    "startFromUploader": true,
    "steps": [

In the Preflight Tool FAQ topic, you can learn how to change the configuration for the most frequent use-case scenarios. If you have deployed the front end to a separate server, you must specify a back-end URL in the backendUrl parameter, for example:

// The address of your preflight server.
config.vars.backendUrl = "";

After that, you can load the editor and e-commerce driver.

// Load modules.
const driverImportData = await moduleLoader.dynamicImport("ecommerceDriver", "./ui-framework/4.5.3/drivers/default-driver.js");
const editorImportData = await moduleLoader.dynamicImportDefault("editor", "./ui-framework/4.5.3/editor.js");

// Get the editor and driver instances.
const editor = editorImportData.editor;
const driver = driverImportData.ecommerceDriver;

Then, initialize the driver and display the editor in the container.

const ecommerce = await driver.init(product, editor, config, settings, null, quantity, user);

To retrieve URLs that link to print files, you must subscribe to the onSubmitted event, which will be called when the user finishes editing.

ecommerce.cart.onSubmitted.subscribe(data => {
    alert('Open console to see URLs to the preview images and print files');
    data.lineItems.forEach(function(order) {
        console.log("Print files: ", order.downloadUrls);
        console.log("Previews: ", order.images);

See Also