clientConfig.json

The ~\Configuration\clientConfig.json configuration file allows you to specity settings of the Design Editor. This topic describes how you can configure this web-to-print editor.

Note

The default measurement units in Customer's Canvas are points. If a parameter accepts other units, then the unit name is specified in the parameter name, for example, lineWidthPx accepts pixels. The unit shortcuts are px for pixels, pc for percents, etc.

Parameter names are case sensitive.

The clientConfig.json file contains the following settings. You can click a setting name to get its description.

JSON

{
    "spellCheckEnabled": true,
    "initialMode": "Simple",
    "fontList": { "appFonts": ["*"] },
    "fontListMode": "Advanced",
    "defaultLanguage": "en",
    "loadUserInfoButtonEnabled": false,
    "autoLoadUserInfo": true,
    "revertProductConfirmationEnabled": true,
    "imageEditorEnabled": true,
    "deleteItemConfirmationEnabled": true,
    "restoreProductOnReloadEnabled": false,
    "alignToSafetyLineName": "bleed",
    "newImageName": null,
    "arbitraryResizeForImageItemEnabled": false,
    "variableItemsMaskSymbol": "%",
    "galleryOnly": false,
    "canvasOnlyMode": false,
    "defaultProductTheme": "",
    "productThemes": null,
    "defaultAssetSelectWidget": "AssetManager",
    "canvas": {
        "containerColor": "",
        "color": "",
        "shadowEnabled": false,
        "paddingPct": 5,
        "maskedPlaceholderUnderscoreEnabled": true,
        "suppressOutOfRegionManipulation": true,
        "violationWarningButtonsEnabled": true,
        "qualityChangeContainersEnabled": true,
        "floatingItemToolbarEnabled": true,
        "autoItemSelectionEnabled": true,
        "autoPlaceholderEditModeEnabled": false,
        "gridVisible": false,
        "safetyLinesVisible": true,
        "snapLinesVisible": true,
        "canvasItemHoverEnabled": false,
        "pinchZoomEnabled": true,
        "zoomStep": 0.25,
        "zoom": {
            "min": 0.01,
            "max": 16,
            "step": 0.25
        },
        "rulers": {
            "enabled": true,
            "unit": "inch",
            "customUnitScale": "1",
            "origin": "{ "X": 0, "Y": 0 }"
        },
        "snapLines": {
            "enabled": true,
            "color": "rgb(255,0,255)",
            "tolerance": 5
        },
        "rotation": {
            "type": "Rotate90"
        }
    },
    "defaultItemsConfig": {
        "barcode": null,
        "ellipse": null,
        "image": null,
        "line": null,
        "placeholder": null,
        "rectangle": null,
        "richText": null,
        "shape": null,
        "text": null
    },
    "grid": {
        "enabled": true,
        "horizontalColor": "rgb(208, 224, 227)",
        "verticalColor": "rgb(208, 224, 227)",
        "stepX": 1,
        "stepY": 1,
        "lineWidthPx": 1
    },
    "rendering": {
        "hiResOutputDpi": 300,
        "hiResOutputFileFormat": "pdf",
        "hiResOutputColorSpace": "cmyk",
        "hiResOutputRgbColorProfileName": "",
        "hiResOutputCmykColorProfileName": "",
        "hiResOutputGrayscaleColorProfileName": "",
        "hiResOutputToSeparateFiles": false,
        "hiResOutputChannelContainersToSeparateFiles": false,
        "hiResOutputChannelContainersRenderEmptyPage": true,
        "hiResOutputBackgroundColor": "rgba(255,255,255,0)",
        "hiResOutputCompression": "zip",
        "hiResOutputJpegCompressionQuality": 90,
        "hiResOutputFlipMode": "none",
        "hiResOutputPdfMetadata": {
            "author": "",
            "creator": "",
            "keywords": "",
            "subject": "",
            "title": ""
        },
        "hiResOutputInStringPlaceholderHintsEnabled": false,
        "proofImageFileFormat": "jpeg",
        "proofImageRgbColorProfileName": "",
        "proofImageCropSafetyLine": "",
        "proofImageSafetyLinesEnabled": true,
        "proofImageSpineAndFoldingLinesEnabled": true,
        "proofImageFlipMode": "none",
        "proofImageMockupEnabled": true,
        "proofImageShowStubContent": false,
        "proofImageInterpolationMode": "",
        "proofImageInStringPlaceholderHintsEnabled": false
    },
    "violationWarningsSettings": {
        "qualityMeter": {
            "enabled": true,
            "qualityLevels": {
                "warning": 100,
                "bad": 50
            }
        },
        "regionViolationWarningEnabled": true,
        "safetyLineViolationWarningEnabled": true,
        "textCropViolationWarningEnabled": true,
        "shapeViolationsEnabled": true
    },
    "watermark": {
        "text": {
            "text": "watermark",
            "fontSettings": {
                "postScriptName": "ArialMT",
                "size": 35,
                "fauxBold": false,
                "fauxItalic": false
            },
            "scale": 0.28,
            "opacity": 0.1
        },
        "image": {
            "name": "watermark.png",
            "repeat": false,
            "opacity": 0.4
        },
        "visibility": {
            "proof": false,
            "canvas": false
        }
    },
    "widgets": {
        "common": {
            "fontSize": {
                "max": 1296,
                "min": 4,
                "step": 10
            },
            "tracking": {
                "max": 300,
                "min": -300,
                "step": 25
            },
            "leading": {
                "max": 1296,
                "min": 6,
                "step": 10
            }
        },
        "Toolbox": {
            "buttons": [...],
            "disabled": false
        },
        "ObjectInspector": {
            "bgItemEnabled": true,
            "dndEnabled": true,
            "violationWarningsEnabled": true,
            "variableItemsEnabled": false,
            "emptyListTextEnabled": true,
            "position": "Right",
            "aboveCanvasOnSmallScreenEnabled": true,
            "isHidden": false,
            "toggleEnabled": false,
            "inStringPlaceholderMode": "Multiple",
            "showItemName": false
        },
        "ItemMenu": {
            "objectManipulationEnabled": true,
            "verticalAlignmentEnabled": true,
            "horizontalAlignmentEnabled": true,
            "changeZOrderEnabled": true
        },
        "TopToolbar": {
            "alignButtonsEnabled": true,
            "displayAlignButtonsAsDropdown": true,
            "displayCaptionInButtons": false,
            "historyButtonsEnabled": true,
            "deleteButtonEnabled": false,
            "revertButtonEnabled": true,
            "displayZOrderButtonsAsDropdown": true,
            "cloneButtonEnabled": false,
            "editTextButtonEnabled": false,
            "textVAlignmentButtonsEnabled": true,
            "textAlignmentButtonsEnabled": true,
            "textAllowChangeColumnCount": true,
            "textEmphasisButtonsEnabled": true,
            "textFontFamilyButtonEnabled": true,
            "textFontStyleButtonEnabled": true,
            "textFontSizeButtonEnabled": true,
            "textFontColorButtonEnabled": true,
            "textShadowButtonEnabled": true,
            "textStrokeButtonEnabled": true,
            "closeFontMenuOnClickEnabled": true,
            "opacitySliderEnabled": true,
            "textLeadingButtonEnabled": true,
            "textTrackingButtonEnabled": true,
            "multiRowModeEnabled": false,
            "borderColorButtonEnabled": true,
            "borderWidthButtonEnabled": true,
            "imageEditButtonEnabled": true,
            "imageSelectButtonEnabled": true,
            "placeholderEditButtonEnabled": true,
            "placeholderSelectButtonEnabled": true,
            "placeholderScaleButtonEnabled": true,
            "placeholderResetContentButtonEnabled": true,
            "changeBarcodeTypeButtonEnabled": true,
            "barcodeColorButtonEnabled": true,
            "fontPreviewSize": 17,
            "textStroke": { "max": 5, "min": 0.01, "step": 0.01 },
            "textShadow": {
                "angle": { "max": 360, "min": 0, "step": 15 },
                "distance": { "max": null, "min": 0, "step": 0.1 },
                "size": { "max": null, "min": 0, "step": 0.1 }
            },
            "fontSize": {
                "max": 100,
                "min": 4,
                "step": 0.5
            },
            "zOrder": {
                "zOrderLevelButtonsEnabled": true,
                "zOrderSendToButtonsEnabled": true
            }
        },
        "BottomToolbar": {
            "safetyLinesCheckboxEnabled": true,
            "gridCheckboxEnabled": true,
            "snapLinesCheckboxEnabled": true,
            "zoomValueEnabled": true,
            "zoomButtonsEnabled": true,
            "rotateButtonEnabled": true,
            "fullWindowButtonEnabled": false,
            "fullScreenButtonEnabled": true,
            "surfaceSwitch": {
                "enabled": true,
                "showThumbnails": false,
                "showSurfaceNames": false,
                "scrollPageButtonsEnabled": true,
                "toggleSurfaceButtonsEnabled": false,
                "firstAndLastButtonsEnabled": true,
                "specificForSurfaceCount": { }
            }
        },
        "QrCodeDialog": {
            "defaultType": "QrUrl"
        },
        "LinearBarcodeDialog": {
            "defaultType": "LinearEan8"
        },
        "RichTextDialog": {
            "applyToAllTextMode": false,
            "bgColor": "white",
            "createMultiColumnText": false,
            "showHint": true,
            "showInput": {
                "size": true
            },
            "ckeditorConfig": {
                "specialChars": ["!", "&quot;", "#", "$", "%", "&amp;", ...]
            },
            "textOutline": {
                "enabled": false,
                "hueThreshold": 74,
                "brightnessThreshold": 5,
                "color": "rgba(0, 0, 0, 0.2)"
            },
            "zoom": {
                "enabled": false,
                "minZoomPct": 10,
                "maxZoomPct": 500,
                "autoZoom": {
                    "enabled": false,
                    "minFontSizeThresholdPt": 12,
                    "maxFontSizeThresholdPt": 36
                }
            }
        },
        "FinishButton": {
            "mode": "Download"
        },
        "GalleryDialog": {
            "defaultTabName": "",
            "tabs": [{"name":"User", "type":"user"}, {"name":"Public", "type":"public"}],
            "allowedExtensions": ["jpg", "jpeg", "png", "bmp", "gif", "svg", "pdf"],
            "overwriteExistingFiles": false,
            "showTabsInRestrictedMode": false,
            "backgroundColorPickerEnabled": false,
            "insertToAllButtonEnabled": false,
            "saveAllowedTabAfterInsert": false,
            "autoInsertUploadedFile": false
        },
        "ImageEditorDialog": {
            "colorAdjustButtonEnabled": true,
            "cropButtonEnabled": true,
            "backgroundEraseButtonEnabled": true
        },
        "ColorPicker": {
            "showPaletteOnly": false,
            "defaultColorSpace": "cmyk",
            "availableColorSpaces": ["rgb", "cmyk"],
            "palette": [["rgb(0, 0, 0)","rgb(67, 67, 67)",...],...]
        }
    }
}

Common Parameters

Name	Description	Possible values
spellCheckEnabled	Enables spell checking for product text fields and for the Rich text dialog. The default value is `true`.	boolean
initialMode	The initial mode of the web-to-print editor, simple or advanced. If you want to disable the advanced mode, set this parameter to `"SimpleOnly"`. The default value is `"Simple"`.	`"Simple"`, `"Advanced"`, `"SimpleOnly"`
fontList	A list of fonts available for the user in the editor. All these fonts should be uploaded to the font folder on the server; by default it is `..\assets\fonts\`. If not specified, the Design Editor enables all the fonts from this folder. The default value is `{ "appFonts": ["*"] }`.	array of font names
fontListMode	A mode of the font list, simple or advanced. The simple mode allows users to select a font and set a font size. The advanced mode also provides the ability to change the font style. The default value is `"Advanced"`.	`"Simple"`, `"Advanced"`
defaultLanguage	The default interface language. The default value is `"en"`.	string
loadUserInfoButtonEnabled	Displays the Load my info button. The default value is `false`.	boolean
autoLoadUserInfo	If `true`, the product is automatically populated with predefined data when it is loaded into the editor; the Load my info button is not displayed in this case. The default value is `true`.	boolean
revertProductConfirmationEnabled	Enables the confirmation dialog when reverting a product to its initial state. The default value is `true`.	boolean
imageEditorEnabled	Enables the Image Editor. The default value is `true`.	boolean
deleteItemConfirmationEnabled	Enables the confirmation dialog when deleting an item from a product. The default value is `true`.	boolean
restoreProductOnReloadEnabled	Enables restoring a product state when the design page is reloaded in the browser. If `false`, the product is reverted on reloading. The default value is `false`.	boolean
alignToSafetyLineName	The name of a safety line to which an item will be aligned. If there is no safety line with a name, then the item will be aligned to the first safety line in the safety lines array. The default value is `"bleed"`.	string
newImageName	The default name for a new image layer: the first layer is named `newImageNameValue`, the second one is `newImageNameValue_1`, the third layer is `newImageNameValue_2`, etc. By default, it is `null`, and the name of the image file is used.	string
arbitraryResizeForImageItemEnabled	If `true`, a user can resize added images in the editor without keeping the original aspect ratio. Otherwise, images can only be resized proportionally. The default value is `false`.	boolean
variableItemsMaskSymbol	A symbol marking design elements as variable items. By default, it is `"%"`.	string
galleryOnly	Displays only the Image Gallery containing the private tab; the web-to-print editor is not displayed in this mode. The default value is `false`.	boolean
canvasOnlyMode	Hides all interface elements and displays only the canvas in the editor. The default value is `false`.	boolean
defaultProductTheme	The name of the default color theme. For an example, you can refer to the IProductThemeConfig topic.	string
productThemes	The color sets containing the color name - color value pairs. You can define as many themes as you need. For an example, you can refer to the IProductThemeConfig topic.	object
defaultAssetSelectWidget	Enables a widget to select images, either Asset Manager or Image Gallery. The default value is `"AssetManager"`.	`"AssetManager"`, `"GalleryDialog"`

Canvas

Object: canvas

Name	Description	Possible values
containerColor	The color of the HTML element placed under the canvas. The default value is `""`.	color in the css-compatible format
color	The canvas color. This color is visible if a transparent object is placed on the canvas. The default value is `""`.	color in the css-compatible format
shadowEnabled	Enables the canvas shadow. The default value is `false`.	boolean
paddingPct	Padding between the canvas and the canvas viewer, in percent. The default value is `5`.	integer
maskedPlaceholderUnderscoreEnabled	Enables displaying underscores in blank masked text layers. If it is set to false and the user has partially filled the text placeholder in, then the rest blank symbols are displayed as spaces. If `true`, the blank portion of the text layer displays underscores. The default value is `true`.	boolean
suppressOutOfRegionManipulation	Disallows the user to drag elements out of the region on the canvas. If `true`, your users cannot manipulate items out of regions. The default value is `true`.	boolean
violationWarningButtonsEnabled	Enables preflight warnings on the canvas. If `true`, notifying icons appear on low-resolution images, safety line violation, region violation, and text clipping. The default value is `true`.	boolean
qualityChangeContainersEnabled	Enables the DPI bar when resizing images. This bar displays the actual DPI of images and the resolution specified in the hiResOutputDpi property. The default value is `true`.	boolean
floatingItemToolbarEnabled	Enables the Floating Item Toolbar with the Select Image, Edit and Delete buttons right on the canvas. The default value is `true`.	boolean
autoItemSelectionEnabled	Allows you to automatically select the first design element in the advanced editing mode. If an element is selected, you can switch between design elements on the canvas by using Tab and Shift+Tab. The default value is `true`.	boolean
autoPlaceholderEditModeEnabled	Allows your users to work with the content of image placeholders by clicking a placeholder in either simple or advanced edit mode. If `true`, the Handle does not appear on image placeholders. The default value is `false`.	boolean
gridVisible	Displays the grid when the canvas opens. The default value is `false`.	boolean
safetyLinesVisible	Displays safety lines when the canvas opens. The default value is `true`.	boolean
snapLinesVisible	Displays snap lines when the canvas opens. The default value is `true`.	boolean
canvasItemHoverEnabled	Enables text labels for design elements. The default value is `false`.	boolean
pinchZoomEnabled	Allows users to zoom the canvas using the pinch gesture on mobile devices. The default value is `true`.	boolean
zoomStep	Deprecated, use canvas.zoom instead. A step of increasing or decreasing the zoom level. The default value is `0.25`.	number
Canvas Zoom object: `zoom`
min	The minimum zoom of the canvas. The default value is `0.01`.	number
max	The maximum zoom of the canvas. The default value is `16`.	number
step	The step of increasing or decreasing the zoom level of the canvas. The default value is `0.25`.	number
Rulers object: `rulers`
enabled	Displays rulers. The default value is `true`.	boolean
unit	The rulers measurement unit. The default value is `"inch"`.	`"inch"`, `"mm"`, `"cm"`, `"point"`, `"custom"`
customUnitScale	The ratio of the custom unit to points. This parameter is applied only if the unit parameter described above is set to `"custom"`. The default value is `1`.	number
origin	The point of origin relative to the upper-left corner of the design. The coordinates are measured in the units specified by the unit parameter. The default value is `{ "X": 0, "Y": 0 }`.	object
Snap Lines object: `snapLines`
enabled	Displays snap lines. The default value is `true`.	boolean
color	The color of snap lines. The default value is `"rgb(255,0,255)"`.	string
tolerance	The distance between an object and a snap line where the object clings to the line. It is measured in pixels. The default value is `5`.	number
Canvas Rotation object: `rotation`
type	The angle to which the canvas is rotated when clicking the Rotate button in the Bottom Toolbar. The default value is `"Rotate90"`.	`"Rotate90"`, `"Rotate180"`, `"Rotate270"`

Default Parameters

Object: defaultItemsConfig

Name	Description	Possible values
barcode	Default parameters of barcodes, which users add to the canvas. For an example, you can refer to the IBarcodeDefaultConfig topic.	object
ellipse	Default parameters of ellipses, which users add to the canvas. For an example, you can refer to the IEllipseItemDefaultConfig topic.	object
image	Default parameters of images, which users add to the canvas. For an example, you can refer to the IImageItemDefaultConfig topic.	object
line	Default parameters of lines, which users add to the canvas. For an example, you can refer to the ILineItemDefaultConfig topic.	object
placeholder	Default parameters of placeholders, which users add to the canvas. For an example, you can refer to the IPlaceholderItemDefaultConfig topic.	object
rectangle	Default parameters of rectangles, which users add to the canvas. For an example, you can refer to the IRectangleItemDefaultConfig topic.	object
richText	Default parameters of rich formatted texts, which users add to the canvas. For an example, you can refer to the IRichTextConfig topic.	object
shape	Default parameters of shapes, which users add to the canvas. For an example, you can refer to the IShapeItemDefaultConfig topic.	object
text	Default parameters of texts, which users add to the canvas. For an example, you can refer to the ITextConfig topic.	object

Grid

Object: grid

Name	Description	Possible values
enabled	Enables the grid. If the grid is enabled it can be toggled by the Grid button. The default value is `true`.	boolean
horizontalColor	The color of the horizontal grid lines. The default value is `"rgb(208, 224, 227)"`.	color in the css-compatible format
verticalColor	The color of the vertical grid lines. The default value is `"rgb(208, 224, 227)"`.	color in the css-compatible format
stepX	The distance between vertical grid lines. The default value is `1`.	integer
stepY	The distance between horizontal grid lines. The default value is `1`.	integer
lineWidthPx	The width of grid lines in pixels. The default value is `1`.	integer

Rendering

Object: rendering

Name	Description	Possible values
hiResOutputDpi	Hi-res output resolution in dots per inch (DPI). The default value is `300`.	integer
hiResOutputFileFormat	The type of the hi-res output. The default value is `"pdf"`.	`"pdf"`, `"jpeg"`, `"png"`, `"tiff"`
hiResOutputColorSpace	The color space of the hi-res output. The default value is `"cmyk"`.	`"rgb"`, `"cmyk"`, `"grayscale"`
hiResOutputRgbColorProfileName	The name of an RGB color profile for hi-res outputs. By default, the editor uses the `sRGB IEC61966-2.1` profile to render hi-res outputs in RGB.	string
hiResOutputCmykColorProfileName	The name of a CMYK color profile for hi-res outputs. By default, the editor uses the `SWOP (Coated) 20%, GCR, Medium` profile to render hi-res outputs in CMYK.	string
hiResOutputGrayscaleColorProfileName	The name of a color profile for grayscale outputs. By default, the editor uses the `Dot Gain 30%` profile to render hi-res outputs in grayscale.	string
hiResOutputToSeparateFiles	If `true`, the hi-res output for each side of a multipage product is put in a separate file. The default value is `false`.	boolean
hiResOutputChannelContainersToSeparateFiles	Renders spot colors and textures to separate PDF files. The default value is `false`.	boolean
hiResOutputChannelContainersRenderEmptyPage	Adds empty pages to PDF files when the corresponding pages of the base design have neither spot colors nor textures. The default value is `true`.	boolean
hiResOutputBackgroundColor	The background color for the hi-res output. The default value is `"rgba(255,255,255,0)"`.	color in the css-compatible format
hiResOutputCompression	The type of hi-res output compression. `"jpeg"` and `"zip"` are supported for PDF files only, whereas `"lzw"` is supported for `TIFF` files. The default value is `"zip"`.	`"jpeg"`, `"zip"`, `"none"`, `"lzw"`
hiResOutputJpegCompressionQuality	JPEG compression quality in percent. This parameter makes sense only for the `JPEG` and `PDF` formats. For `PDF` it should be used along with `hiResOutputCompression="jpeg"`. The default value is `90`.	integer from `0` to `100`.
hiResOutputFlipMode	The flip mode for hi-res outputs. The default value is `"none"`.	`"none"`, `"vertical"`, `"horizontal"`, `"both"`
hiResOutputInStringPlaceholderHintsEnabled	Displays hints for unfilled in-string placeholders in hi-res outputs. The default value is `false`.	boolean
proofImageFileFormat	The type of proof image files. The default value is `"jpeg"`.	`"jpeg"`, `"png"`
proofImageRgbColorProfileName	The name of an RGB color profile for proof images. By default, the editor uses the `sRGB IEC61966-2.1` profile to render proof images.	string
proofImageCropSafetyLine	The name of a safety line which proof images are cropped to. If there is no safety line with the given name, proof images are not cropped. By default, proof images appear uncropped.	string
proofImageSafetyLinesEnabled	Displays safety lines on proof images. The default value is `true`.	boolean
proofImageSpineAndFoldingLinesEnabled	Displays spines and folding lines on proof images. The default value is `true`.	boolean
proofImageFlipMode	The flip mode for proof images. The default value is `"none"`.	`"none"`, `"vertical"`, `"horizontal"`, `"both"`
proofImageMockupEnabled	Displays mockups on proof images. If it is `true`, then the editor renders a mockup with a print area. If it is `false`, then the editor renders only print areas to proof images. The default value is `true`.	boolean
proofImageShowStubContent	Enables the stub images and text hints in unfilled placeholders. The default value is `false`.	boolean
proofImageInterpolationMode	An interpolation algorithm used for resizing proof images. You can find the list of supported algorithms in the specification of the Aurigma Graphics Mill library. For example, you can use `"Lanczos"`, `"NearestNeighbour"`, and others. By default, no interpolation algorithms are applied to resize proof images.	string
proofImageInStringPlaceholderHintsEnabled	Displays hints for unfilled in-string placeholders on proof images. The default value is `false`.	boolean
PDF metadata object: `hiResOutputPdfMetadata`
author	The author of the PDF document.	string
creator	The creator of the PDF document.	string
keywords	Keywords of the PDF document.	string
subject	The subject of the PDF document.	string
title	The title of the PDF document.	string

Preflight Warnings

Object: violationWarningsSettings

Name	Description	Possible values
regionViolationWarningEnabled	Enables a warning displayed if an item goes out of a region. The default value is `true`.	boolean
safetyLineViolationWarningEnabled	Enables a warning displayed if an item crosses a safety line. The default value is `true`.	boolean
textCropViolationWarningEnabled	Enables a warning displayed if the text is too long for the bounding rectangle, and some strings are clipped. The default value is `true`.	boolean
shapeViolationsEnabled	Enables a warning displayed if the Asset Manager can import PDF and SVG vector graphics only with losses. The default value is `true`.	boolean
The quality meter object: `qualityMeter`
enabled	Enables the quality meter and low DPI warnings. The default value is `true`.	boolean
Image quality levels object: `qualityLevels`
warning	The warning image quality level, comparing to the hi-res output DPI, in percent. This value should be greater than or equal to the bad value. The default is `100`.	number
bad	The bad image quality level, comparing to the hi-res output DPI, in percent. This value should be less than or equal to the warning value. The default is `50`.	number

Watermark

Object: watermark

Name	Description	Possible values
Text Parameters object: `text`
text	Watermark text to display. The default text is `"watermark"`.	string
scale	The font size scale. This parameter specifies how much space the watermark text will occupy relative to the product size. The default value is `0.28`.	number
opacity	The opacity of the watermark text. The default value is `0.1`.	number
Font parameters object: `fontSettings`
postScriptName	The watermark font name. The default value is `"ArialMT"`.	string
size	The font size of the watermark text. The default value is `35`.	number
fauxBold	Applies the faux bold effect to the watermark. The default value is `false`.	boolean
fauxItalic	Applies the faux italic effect to the watermark. The default value is `false`.	boolean
Image Parameters object: `image`
name	The filename of the watermark image. This file should be uploaded to the `..\assets\helpers\` folder on the server. By default, the Design Editor displays `watermark.png`.	string
repeat	If `false`, displays the watermark image in the center of the canvas or proof images. If `true`, repeats the image. The default value is `false`.	boolean
opacity	The opacity of the watermark image. The default value is `0.4`.	number
Watermark Visibility object: `visibility`
proof	Displays the watermark on proof images. The default value is `false`.	boolean
canvas	Displays the watermark on the canvas. The default value is `false`.	boolean

Widgets

Object: widgets

Name	Description	Possible values
Common Parameters of Widgets object: `common`
Font size parameters object: `fontSize`
max	The maximum font size. This value is used in the Rich Text dialog. Also, if you do not define font size box parameters for the Top Toolbar, then this value is applied to point text.	number
min	The minimum font size used in the Rich Text dialog. Also, if you do not define font size box parameters for the Top Toolbar, then this value is applied to point text.	number
step	The step to change the font size in the Rich Text dialog.	number
Tracking parameters object: `tracking`
max	The maximum tracking value. The default value is `300`.	number
min	The minimum tracking value. The default value is `-300`.	number
step	The step to change the tracking value. The default value is `25`.	number
Leading parameters object: `leading`
max	The maximum leading value. The default value is `1296`.	number
min	The minimum leading value. The default value is `6`.	number
step	The step to change the leading value. The default value is `10`.	number
Toolbox object: `Toolbox`
buttons	Configures the Toolbox buttons. By default, Customer's Canvas enables the following buttons in the Toolbox: `"Text", "RichText", "Image", "Line", "Rectangle", "Ellipse", "QrCode", "LinearBarcode"`. For config examples, you can refer to the Customizing the Toolbox topic. The Custom Design Elements topic describes how you can predefine design elements in the Toolbox.	array
disabled	Hides the Toolbox. The default value is `false`.	boolean
Object Inspector object: `ObjectInspector`
bgItemEnabled	Displays the background element in the Object Inspector. The default value is `true`.	boolean
dndEnabled	Enables drag-and-drop for elements in the Object Inspector. The default value is `true`.	boolean
violationWarningsEnabled	Enables preflight warnings in the Object Inspector. If `true`, notifying icons appear on low-resolution images, safety line violation, region violation, and text clipping. The default value is `true`.	boolean
variableItemsEnabled	Enables check boxes for text elements and images to select variable fields. If `true`, you can mark design elements as variable items at runtime and then personalize them in your e-commerce system. The default value is `false`.	boolean
emptyListTextEnabled	Enables text, displayed when a loaded template has no customizable layers. The default value is `true`.	boolean
position	Displays the Object Inspector from the right or left side of the canvas. The default value is `"Right"`.	`"Left"`, `"Right"`
aboveCanvasOnSmallScreenEnabled	If `true`, the Object Inspector appears above the canvas when you work on small-screen devices. Otherwise, it appears from the left side of the canvas. The default value is `true`.	boolean
isHidden	If it is `true`, then the editor hides the Object Inspector and expands the canvas to the available width. The default value is `false`.	boolean
toggleEnabled	If it is `true`, then the editor displays the Toggle object inspector button. The default value is `false`.	boolean
inStringPlaceholderMode	Defines the appearance of in-string placeholders in the Object Inspector. If `"Single"`, all items appear at the top of the item list. In the `"Multiple"` mode, linked in-string placeholders appear separately and keep the order defined in PSD templates. The default value is `"Multiple"`. For details, see the In-String Placeholders and Text Validation topic.	`"Single"`, `"Multiple"`
showItemName	Enables text labels for design elements. The default value is `false`.	boolean
Item Menu object: `ItemMenu`
objectManipulationEnabled	Enables deleting and cloning items in a product. The default value is `true`.	boolean
verticalAlignmentEnabled	Enables the vertical alignment of items to the safe area and group alignment (to select several items, use Ctrl). The default value is `true`.	boolean
horizontalAlignmentEnabled	Enables the horizontal alignment of items to the safe area and group alignment (to select several items, use Ctrl). The default value is `true`.	boolean
changeZOrderEnabled	Enables changing the Z-order of items. The default value is `true`.	boolean
Top Toolbar object: `TopToolbar`
alignButtonsEnabled	Displays the vertical aligment buttons. The default value is `true`.	boolean
displayAlignButtonsAsDropdown	Displays the aligment buttons as a drop-down list. The default value is `true`.	boolean
displayCaptionInButtons	Displays button captions. The default value is `false`.	boolean
historyButtonsEnabled	Displays the Undo and Redo buttons. The default value is `true`.	boolean
deleteButtonEnabled	Displays the Delete button. The default value is `false`.	boolean
revertButtonEnabled	Displays the Revert button. The default value is `true`.	boolean
displayZOrderButtonsAsDropdown	Displays the drop-down z-order buttons. The default value is `true`.	boolean
cloneButtonEnabled	Displays the Clone object button. The default value is `false`.	boolean
editTextButtonEnabled	Displays the Edit button for text elements. The default value is `false`.	boolean
textVAlignmentButtonsEnabled	Displays the vertical text alignment buttons. The default value is `true`.	boolean
textAlignmentButtonsEnabled	Displays the text alignment buttons. The default value is `true`.	boolean
textAllowChangeColumnCount	Displays the Columns box for rich formatted text. The default value is `true`.	boolean
textEmphasisButtonsEnabled	Displays the faux text style buttons (bold, italic, and underlined). The default value is `true`.	boolean
textFontFamilyButtonEnabled	Displays the font list. The default value is `true`	boolean
textFontStyleButtonEnabled	Displays the font style button. The default value is `true`.	boolean
textFontSizeButtonEnabled	Displays the font size spin box. The default value is `true`.	boolean
textFontColorButtonEnabled	Displays the text color picker. The default value is `true`.	boolean
textShadowButtonEnabled	Displays the Shadow button. The default value is `true`.	boolean
textStrokeButtonEnabled	Displays the Stroke button. The default value is `true`.	boolean
closeFontMenuOnClickEnabled	If `true`, the Select font drop-down list closes after a user selects a font. Otherwise, it closes only when a user clicks anywhere outside the list. The default value is `true`.	boolean
opacitySliderEnabled	Provides the ability to change layer opacity via the Opacity slider in the Top Toolbar. The default value is `true`.	boolean
textLeadingButtonEnabled	Displays the text leading button. The default value is `true`.	boolean
textTrackingButtonEnabled	Displays the text tracking button. The default value is `true`.	boolean
multiRowModeEnabled	Displays the Top Toolbar menu in the multi-row mode to fit all buttons to the screen. The default value is `false`.	boolean
borderColorButtonEnabled	Displays the Border color button. The default value is `true`.	boolean
borderWidthButtonEnabled	Displays the Border width button. The default value is `true`.	boolean
imageEditButtonEnabled	Displays the Edit button for images. The default value is `true`.	boolean
imageSelectButtonEnabled	Displays the Select image button for images. The default value is `true`.	boolean
placeholderEditButtonEnabled	Displays the Edit button for image placeholders. The default value is `true`.	boolean
placeholderSelectButtonEnabled	Displays the Select image button for image placeholders. The default value is `true`.	boolean
placeholderScaleButtonEnabled	Displays the Select placeholder content scale button for image placeholders. The default value is `true`.	boolean
placeholderResetContentButtonEnabled	Displays the Reset placeholder content button for image placeholders. The default value is `true`.	boolean
changeBarcodeTypeButtonEnabled	Displays the Change barcode type button. The default value is `true`.	boolean
barcodeColorButtonEnabled	Displays the Change barcode color button. The default value is `true`.	boolean
fontPreviewSize	The font size used to display font names in the Select font list. The default value is `17`.	number
textStroke	The Stroke dialog parameter, the width of the text stroke, in points. You can define the max, min, and step values. The default values are calculated based on the text font size.	number
Shadow dialog parameters object: `textShadow`
angle	The angle of the text shadow, in degrees. You can define the max, min, and step values.	number
distance	The offsets of the text shadow, in points. You can define the max, min, and step values. The default values are calculated based on the text font size.	number
size	The size of the shadow blur, in pixels. You can define the max, min, and step values. The default values are calculated based on the text font size.	number
Font size box parameters object: `fontSize`
max	The maximum font size. The default value is `100`.	number
min	The minimum font size. The default value is `4`.	number
step	The step for changing a font size when using the spin box. The default value is `0.5`.	number
Z-order control parameters object: `zOrder`
zOrderLevelButtonsEnabled	Enables the Level up and Level down buttons. The default value is `true`.	boolean
zOrderSendToButtonsEnabled	Enables the Send to front and Send to bottom buttons. The default value is `true`.	boolean
Bottom Toolbar object: `BottomToolbar`
safetyLinesCheckboxEnabled	Displays the Safety lines check box on the Marking menu. The default value is `true`.	boolean
gridCheckboxEnabled	Displays the Grid check box on the Marking menu. The default value is `true`.	boolean
snapLinesCheckboxEnabled	Displays the Snap lines check box on the Marking menu. The default value is `true`	boolean
zoomValueEnabled	Displays the current zoom value. The default value is `true`.	boolean
zoomButtonsEnabled	Displays the Zoom in and Zoom out buttons. The default value is `true`.	boolean
rotateButtonEnabled	Displays the Rotate button allowing your users to rotate the canvas at the specified angle when editing their products. The default value is `true`.	boolean
fullWindowButtonEnabled	Displays the Full window button. The default value is `false`.	boolean
fullScreenButtonEnabled	Displays the Full screen button. The full screen mode is not supported in Internet Explorer and Safari, so the related button is not displayed in these browsers even if it is enabled. The default value is `true`.	boolean
Surface selector object: `surfaceSwitch`
enabled	Enables the pagination control. The default value is `true`.	boolean
showThumbnails	Displays page thumbnails. The default value is `false`.	boolean
showSurfaceNames	Displays page names in the pagination control. If it is `true` and you name your product surfaces, then these names are shown in the navigation area. Otherwise, surface indexes are shown. The default value is `false`.	boolean
scrollPageButtonsEnabled	Displays the Next and Previous buttons, which allow for scrolling the page selector. The default value is `true`.	boolean
toggleSurfaceButtonsEnabled	Displays the Next and Previous buttons, which allow for switching between pages. The default value is `false`.	boolean
firstAndLastButtonsEnabled	Displays the First and Last buttons for the page navigation. The default value is `true`.	boolean
specificForSurfaceCount	Defines the pagination control for products consisting of the certain number of pages. You can find an example of using this property in the Multipage Products topic.	object
Qr Code Dialog object: `QrCodeDialog`
defaultType	The default type of a QR code, `"QrUrl"`.	`"QrVCard"`, `"QrUrl"`, `"QrPhone"`
Linear Barcode Dialog object: `LinearBarcodeDialog`
defaultType	The default type of a barcode, `"LinearEan8"`.	`"LinearEan8"`, `"LinearEan13"`
Rich Text Dialog object: `RichTextDialog`
applyToAllTextMode	Allows you to apply formatting to a whole text element despite a text selection. The default value is `false`.	boolean
bgColor	The text background color in the Rich Text dialog. The default value is `"white"`.	color in the css-compatible format
createMultiColumnText	Allows for creating multicolumn text. If `true`, the Columns drop-down list appears in the Top Toolbar for rich formatted text elements. The default value is `false`.	boolean
showHint	Enables hints in the drop-down lists. The default value is `true`.	boolean
User input boxes object: `showInput`
size	Enables user input in the Font size drop-down list. The default value is `true`.	boolean
Special characters object: `ckeditorConfig`
specialChars	An array defining the Special character list. For an example and the default character list, refer to IRichTextDialogConfig.	array
Text outline parameters object: `textOutline`
enabled	Enables text outline. The text is outlined in the Rich Text dialog if the difference between the text color and the background color is below the hue or brightness threshold. The default value is `false`.	boolean
hueThreshold	The hue threshold. The default value is `74`.	number
brightnessThreshold	The brightness threshold. The default value is `5`.	number
color	The outline color. The default value is `"rgba(0, 0, 0, 0.2)"`.	color in the css-compatible format
Rich text dialog zoom object: `zoom`
enabled	Enables the zoom slider in the Rich Text dialog. The default value is `false`.	boolean
minZoomPct	The least value of the zoom slider, must be less than 100. The default value is `10`.	number
maxZoomPct	The most value of the zoom slider, must be more than 100. The default value is `500`.	number
Rich text auto-zoom object: `autoZoom`
enabled	Enables auto-zoom at opening the Rich Text dialog. The default value is `false`.	boolean
minFontSizeThresholdPt	The font size threshold in points. If the text font size is less than this threshold, the text is auto-zoomed in. The default value is `12`.	number
maxFontSizeThresholdPt	The font size threshold in points. If the text font size is more than this threshold, the text is auto-zoomed out. The default value is `36`.	number
Finish Button object: `FinishButton`
mode	The mode of the Finish design button. `"Disabled"` hides the button and enables the callback that could be handled like it is discussed in the Introducing the IFrame API topic. `"Download"` is the debug mode that shows the button and disables the callback, but allows you to download the hi-res output. The default value is `"Download"`.	`"Download"`, `"Disabled"`
Gallery object: `GalleryDialog` (as an alternative, you can specify assetSources and use the Asset Manager)
defaultTabName	The default tab opened in the Gallery. It is the name property of an element of the tabs array. The default value is `""`.	string
tabs	The array of tabs available in the Gallery. If you define the tabs array, then other properties that define the tabs, marked as Outdated here, are ignored. The default value is `[{"name":"User", "type":"user"}, {"name":"Public", "type":"public"}]`.	array
allowedExtensions	Extensions of files that a user is allowed to upload to the Gallery. The default value is `["jpg", "jpeg", "png", "bmp", "gif", "svg", "pdf"]`.	array containing any combination of `"jpg", "jpeg", "png", "bmp", "gif", "tiff", "svg", "pdf", "ai", "psd"`
overwriteExistingFiles	Allows for overwriting images with existing names in the Gallery after editing. The default value is `false`.	boolean
showTabsInRestrictedMode	Enables the ability to upload photos and select private photos even if the `<IASF>` marker is used. The default value is `false`.	boolean
backgroundColorPickerEnabled	Enables the Color Picker when selecting a background. The default value is `false`.	boolean
insertToAllButtonEnabled	Enables the Insert to all button allowing your users to change backgrounds of all product surfaces at once. The default value is `false`.	boolean
saveAllowedTabAfterInsert	Allows you to restrict the image selection only to the gallery tab from which an image was selected. If `true`, your users cannot open another tab. The default value is `false`.	boolean
autoInsertUploadedFile	If `true`, the Gallery closes as soon as it uploads a user image. After that, this image is automatically inserted into the placeholder or image layer. The default value is `false`.	boolean
Image Editor object: `ImageEditorDialog`
colorAdjustButtonEnabled	Displays the Adjust button in the Image Editor. The default value is `true`.	boolean
cropButtonEnabled	Displays the Crop button in the Image Editor. The default value is `true`.	boolean
backgroundEraseButtonEnabled	Displays the Background button in the Image Editor. The default value is `true`.	boolean
Color Picker object: `ColorPicker`
showPaletteOnly	Shows only the palette specified via the palette parameter in the color picker. The default value is `false`.	boolean
defaultColorSpace	The initial color space of the Color picker. The default value is `"cmyk"`.	`"rgb"`, `"cmyk"`
availableColorSpaces	Specifies the color spaces that will be available to your users in the Color picker. The default value is `["rgb", "cmyk"]`.	array
palette	The palette displayed in the color picker. The default value is `[["rgb(0, 0, 0)","rgb(67, 67, 67)",...],...]`	two-dimensional array: array of palettes, where each pallete is an array of colors in css-compatible format

clientConfig.json

Common Parameters

Canvas

Canvas Zoom

Rulers

Snap Lines

Canvas Rotation

Default Parameters

Grid

Rendering

PDF metadata

Preflight Warnings

The quality meter

Image quality levels

Watermark

Text Parameters

Font parameters

Image Parameters

Watermark Visibility

Widgets

Common Parameters of Widgets

Font size parameters

Tracking parameters

Leading parameters

Toolbox

Object Inspector

Item Menu

Top Toolbar

Shadow dialog parameters

Font size box parameters

Z-order control parameters

Bottom Toolbar

Surface selector

Qr Code Dialog

Linear Barcode Dialog

Rich Text Dialog

User input boxes

Special characters

Text outline parameters

Rich text dialog zoom

Rich text auto-zoom

Finish Button

Gallery

Image Editor

Color Picker

See Also

Manual

IFrame API Reference