Old Query-string API

Customer's Canvas offers two APIs: the old API, which is based on query string, and the new JavaScript one - IFrame API. All Customer's Canvas 3.x releases will fully support both of the APIs. In the next major release, we will stop adding new features to the query-string API and eventually make it discontinued.

In the query-string API products and the editor are configured through the query-string arguments. This API is easy to use and does not require JavaScript coding skills, but it has two major shortcomings. It does not allow for changing product configuration at runtime without reloading the designer. And it restricts product configuration due to limited query string length in browsers. The IFrame API is described in the Introduction Into IFrame API topic.

Query string arguments have higher priority than parameters of ~\Configuration\clientConfig.json.


The default measurement unit in Customer's Canvas is points.


Do not forget to encode unsafe ASCII characters in argument values, for example, to set a color in #aabbcc format you should pass %23aabbcc.

Name Description Sample value Possible values
simpleModeEnabled sets simple as initial mode of the web-to-print designer; this argument is deprecated, use initialMode instead. simpleModeEnabled=true boolean
initialMode initial mode of the web-to-print designer, simple or advanced. If you want to disable advanced mode set this parameter to "SimpleOnly". "Simple" "Simple", "Advanced", "SimpleOnly"
rulers defines rulers rulers={u:"inch",o:{"X":0,"Y":0},e:true} JSON object
grid defines grid grid={hc:"rgb(208, 224, 227)",vc:"rgb(208, 224, 227)",sx:10,sy:10,gwh:1,e:true} JSON object
customStyle name of a CSS file (without extension) that will be loaded within the designer page; the file should be located in the ~\Configuration\customCss\ folder customStyle=myStyle string
ffPopupCompatibilityEnabled FifreFox-only argument, that allows using the display: none style for the iframe where the web-to-print editor is placed or for the iframe's parents, also it allows to display the editor in the modal window. ffPopupCompatibilityEnabled=true boolean
state name of a file (without extension) containing a serialized product which could be restored in the editor state=586e2e16-8c74-4350-b792-07803bdcfe5c string
lang interface language lang=en string
design name of the PSD template file that should be loaded, without extension design=businesscard string
designFolder for multipage products name of the folder containing product page designs that should be loaded designFolder=magazine string
design_page2 for double-sided products, name of the PSD template file for the back side, without extension design_page2=businesscard_side2 string
mockup name of the mockup file that should be loaded, without extension mockup=envelope string
mockupFolder for multipage products names of the folder containing mockup files that should be loaded mockupFolder=pages string
mockup_page2 for double-sided products, name of the mockup file for the back side, without extension mockup_page2=envelope_side2 string
previewMockup name of the mockup file that should be loaded, without extension previewMockup=envelope string
previewMockupFolder for multipage products names of the folder containing mockup files that should be loaded previewMockupFolder=pages string
previewMockup_page2 for double-sided products, name of the mockup file for the back side, without extension previewMockup_page2=envelope_side2 string
designLocation coordinates of the upper left of the design relative to the mockup designLocation={X:83,Y:120} string
foregroundMockupEnabled if true, the mockup will be displayed above the design; otherwise, it will be displayed in the background foregroundMockupEnabled=false boolean
safetyLines defines product safety lines safetyLines=[{n:"theLine",m:8.5,c:"rgba(0,255,0,255)",ac:"rgba(255,255,255,0)",s:5,w:1}] array of JSON objects; each object is a safety perimeter
foldingLines defines folding lines foldingLines=[{iv:false,b:5,p:{c:"red"}}] array of JSON objects; each object is a folding line
spines defines spines spines=[{iv:false,w:20,p:{c:"red"},fc:"pink"}] array of JSON objects; each object is a spine
surfaces defines pages of multipage product surfaces=[{d:"page1"},{d:"page2"},{d:"page3",sl:[{m:10,c:"blue"}]}]&safetyLines=[{m:15,c:"green"},{m:7.5,c:"red"}] array of JSON objects; each object is a page
contentShadow displays product shadow contentShadow=true boolean
canvasOutsideBackColor color of the html element placed under the canvas canvasOutsideBackColor="000099" color in css-compatible format
canvasColor canvas color; this color is visible if a transparent object is placed on the canvas canvasColor="009900" color in css-compatible format
printColorSpace color space of hi-res output printColorSpace="RGB" "RGB", "CMYK", "Grayscale"
renderExt file extension of hi-res output renderExt="PDF" "PDF", "JPEG", "PNG", "TIFF"
printArea the parameter will be applied only if there is no design is set; the parameter specifies the area that will be rendered in the hi-res output printArea={X:0,Y:10,Width:200,Height:350} string
visiblePrintAreaEnabled if true, the print area is highlighted in the designer visiblePrintAreaEnabled=true boolean
RenderingDpi hi-res output resolution in dots per inch (DPI) RenderingDpi=100 integer
userId user identifier userId=default string
userInfo data to populate the template with after clicking the Load my info button; if there is no data passed, the button is hidden userInfo={"FirstName":"John","LastName":"Snow","Phone":"0123456789"} JSON object
finishButton mode of the Finish design button; "disabled" hides the button and enables the callback that could be handled like it is discussed in the Handling Product Customization topic; "download" is a debug mode that shows the button and disables the callback, but allows downloading hi-res output finishButton="download" "download", "disabled"
backgroundButtonEnabled displays background element in object inspector backgroundButtonEnabled=true boolean
rectEllipseButtonsEnabled displays the Ellipse and Rectangle buttons in the advanced editing mode rectEllipseButtonsEnabled=true boolean
richTextEnabled displays the adding Rich text option in the advanced editing mode richTextEnabled=true boolean
galleryOnly displays only the image Gallery containing the private tab; the web-to-print editor is not displayed in this mode galleryOnly=true boolean
isAllowDnD enables elements drag-and-drop in object inspector isAllowDnD=true boolean
colorPickerPalette palette to show in color picker colorPickerPalette=[["rgb(0, 0, 0)","rgb(255, 255, 255)"]] two-dimensional array: array of palettes, where each pallete is an array of strings representing colors
isShowColorPickerPaletteOnly shows only the palette specified via the colorPickerPalette argument in the color picker isShowColorPickerPaletteOnly=true boolean
publicTabEnabled displays the Public files tab in the Gallery publicTabEnabled=false boolean

See Also