This is an old documentation. Go to the latest Customer's Canvas docs

Customizing the User Interface

In this topic, we will discuss how to customize the Customer's Canvas user interface. The Customization Parameters paragraph describes parameters that change the appearance of the user interface, and the Customization Sample paragraph shows how you can use some of these parameters. To find out how you can configure the user interface in a different way for different pages, refer to the Customizing Widgets on a Per-page Basis topic.

Customization Parameters

As noted in the Simple and Advanced Web-to-Print Editor Modes topic, the web-to-print editor has two modes: simple and advanced. In this topic, we presume that the editor is in the advanced mode. You can switch to this mode by clicking the Switch to advanced editing button or set this mode as default via the initialMode parameter in clientConfig.json.

"initialMode": "Advanced";

Also, you can change the mode via the IConfiguration interface.

configuration = {
    initialMode: "Advanced"

The web-to-print editor can be customized mainly by hiding and displaying various interface elements. Let us review interface elements and the corresponding configuration parameters. User interface elements are visually grouped into widgets. Later in the topic, we will introduce and illustrate each widget with all its elements. The following screenshot shows where each widget is located in the interface in the Md theme.

The web-to-print editor in the advanced mode.

Now that you have an idea of how widgets work, let us start with customizable parameters. In the following screenshots, each interface element is tagged with the related parameter, one per widget. Most parameters reviewed in this topic are boolean: true means that the corresponding user interface element is displayed; false hides the element. All parameters can be set in the ~\Configuration\clientConfig.json file and through the IConfiguration interface. You can refer to the clientConfig topic describing these parameters, their possible values, and the structure of clientConfig.json.


To set up buttons in the Toolbox, you can use the IButton interface. You can enable predefined and custom buttons. There are the following predefined buttons: Text, PointText, BoundedText, Image, Background, QrCode, LinearBarcode, DataMatrixBarcode, Line, Rectangle, Ellipse, Layout, and FillPlaceholders. The configuration sample shows how you can create the Toolbox by using these buttons. For more details, refer to the Customizing the Toolbox topic.

Object Inspector

Every design element is located on a separate layer in Customer's Canvas. The Object Inspector contains the list of all the layers. To change the z-order of layers, drag their handles. You can change the z-order for all the layers, except for the background and foreground layers. To disable the handles, set the dndEnabled property of ObjectInspector to false. To hide the ObjectInspector, set the isHidden property to true. To keep the original order of in-string placeholders, set inStringPlaceholderMode to "Multiple".

Object Inspector properties.

To allow your users to toggle the Object Inspector, you can enable the Layers button by using the toggleEnabled property.

The Layers button toggles the Object Inspector.


When you set dndEnabled to false, only the handles do not show. However, you can still change the z-order through corresponding Item Menu commands. To prohibit changing the z-order completely, you should disable these commands in the Item Menu too. Use the changeZOrderEnabled property in clientConfig.json for that.

If a design element has the <OIAZC_f> marker, then other elements cannot be moved across this one, by neither changing the z-order nor using the handles.

Top Toolbar

The Top Toolbar contains buttons for manipulating the design elements.

Top toolbar properties.

The Undo and Redo buttons allow you to undo and repeat the last user action, correspondingly. The Revert button cancels all changes made by the user in a template. To prevent reverting a product inadvertently, you can enable a revert confirmation dialog with the revertProductConfirmationEnabled property.

You can enable a two-level mode for the Top Toolbar. If it contains more buttons than a row can fit, then an additional row shows instead of the More button.

Top toolbar in a two-level mode.

Set the multiRowModeEnabled property to true to enable the two-level mode; false enables the one-level mode.

The previous Top Toolbar corresponds to text elements. The following image illustrates the available buttons for image placeholders.

Top toolbar for image placeholders.

You can find the full list of the buttons and a configuration example in the ITopToolbarConfig topic.

Bottom Toolbar

The Bottom Toolbar contains the Marking menu, page navigation buttons, and zoom buttons. On the Marking menu, you can toggle safety lines, the grid, and snap lines. To zoom in or out of the canvas, click the Full window, Full screen, Zoom in, or Zoom out buttons. The Rotate button allows for rotating the canvas (workspace).

Bottom toolbar properties.

The full-screen mode is not supported in Internet Explorer and Safari, so the corresponding button is not displayed in these browsers even if it is enabled.


The canvas allows your users to manipulate the design elements and edit their content. You can configure the color, padding, and shadows of the canvas. The suppressOutOfRegionManipulation property disallows for dragging elements out of regions. qualityMeterButtonsEnabled allows for displaying the image quality warnings.

You may want to enable the Floating Item Toolbar on the canvas by using floatingItemToolbarEnabled. Depending on the selected item type, this toolbar can contain the Select Image, Edit, and Delete buttons.

Canvas properties.

Also, you can set up the grid, rulers, and snap lines. For details, refer to the Markings topic.

Color Picker

The color picker contains predefined palettes and the color field.

Select a background image or color.

If your product requires a limited set of color swatches, you can define a palette and hide the color field, as it is done in the example. For more information about customizing palettes, refer to the Color Picker topic.

Item Menu

In the advanced editor mode, the More button becomes available for every layer in the Object Inspector. These buttons open the Item Menu that contains object-related actions.

Item Menu properties.

The screenshot above shows that the Item Menu has three groups of commands:

  • The first group allows for manipulating the object by deleting or cloning it.
  • The second group provides alignment options.
  • The last one changes the z-order of object layers.

You can select multiple objects on the canvas using the mouse. When several objects are selected, the Item Menu also contains the Group Alignment command.

The Item menu for selected objects.

The alignment properties of the ItemMenu object, horizontalAlignmentEnabled and verticalAlignmentEnabled, are applied to both Group Alignment and Alignment to safe area.

Spell Checking Feature

Customer's Canvas implements spell checking for text fields and the Rich Text editor. This feature can be enabled through the spellCheckEnabled property. If spell checking is enabled, then misspelled words are shown as underlined:

  • Spell checking in the Rich Text editor.

    Spell checking in the Rich text editor.

  • Spell checking in the Object Inspector.

    Spell checking in the Object inspector.

  • Spell checking in pop-up boxes.

    Spell checking in text popups.


The spell checking feature utilizes the user's browser's spell checking. So, if the browser is set to check spelling in one language, and the user customizes a product in another language, then the spell checking in Customer's Canvas fails because of incorrect browser settings.

Image Editor

After a user clicks Edit, the Image Editor opens. The Image Editor allows for cropping images, adjusting image colors, and erasing the background. You can hide the Background, Adjust, and Crop buttons with the corresponding properties.

Image editor buttons.


Customer's Canvas provides preflight of print products while your users work on their designs. The editor validates that images have good resolution, the safety zone and regions are not violated, and bounded text is not cropped. If an issue occurs, a corresponding warning appears both on the canvas and in the Object Inspector. You can configure the preflight through violationWarningsSettings. To enable warnings in the ObjectInspector, set the violationWarningsEnabled property to true. The violationWarningButtonsEnabled property enables warnings on the canvas.

When the user resizes images or adds a new image to the design, Customer's Canvas checks the image resolution and displays a notifying icon if the image has a resolution that is too low. You can define the warning and bad quality levels as a percentage of the hi-res output DPI through the qualityMeter object.

If the user places an object on the canvas too close to safety lines, the safety line violation occurs and the corresponding message is shown. You can enable this check through the safetyLineViolationWarningEnabled property.

If the user moves an object on the canvas out of a region, the region violation occurs and the corresponding message is shown. You can enable this check through regionViolationWarningEnabled. If you set the suppressOutOfRegionManipulation property to true, then it prevents the warning message from being displayed.

These warnings appear on the right side of the Object Inspector as red and yellow icons.

Warnings in the Object Inspector.

Configuration Sample

This sample shows how to use both clientConfig.json and the IConfiguration interface to customize the web-to-print editor. For demonstration purposes, let us:

  • Disable changing the background layer.
  • Disable the color field for design elements.
  • Enable the text and shape buttons in the Toolbox.

You can set up Customer's Canvas defining either common settings for all products or product-specific settings. To specify the common settings affecting all your products, edit the clientConfig.json file.

"ObjectInspector": {
    "bgItemEnabled": false,
"Toolbox": {
    "buttons": [
            "translationKey": "Toolbox.SHAPE",
            "translationKeyTitle": "Toolbox.TITLE_ADD_SHAPE",
            "iconClass": "cc-icon-add-shape",
            "buttons": [

To define the product-specific settings, you can use the IConfiguration interface and pass the configuration to loadEditor.

// Defining configuration.
configuration = {
    initialMode: "Advanced", 
    widgets: {
        ColorPicker: { 
            showPaletteOnly: true,
            sections: [
                    type: "PaletteSection",
                    palette: [["rgb(0,0,0)","rgb(255,255,255)"],
                              ["rgb(255,0,0)","rgb(255,255,0)","rgb(0,255,0)","rgb(0,255,255)","rgb(0,0,255)", "rgb(255,0,255)"]]
// Loading the editor with the given configuration.
CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);

As a result, the interface of Customer's Canvas looks like this:

The interface of the web-to-print editor.

See Also


IFrame API Reference