Configuring Your First Print Product

The Understanding Print Products topic provides an overview for the capabilities of Customer's Canvas. Here, let us discuss some basic examples.

Web Page Sample

As said in the Integration with E-commerce Overview topic, to build Customer's Canvas into your system, you should add the IFrame API script and the <iframe> tag to the design page, and load the web-to-print editor into the IFRAME element. Let us assume that your Customer's Canvas shares a domain name with the main website and is located in the /cc/ virtual folder. Here is the simplest page that displays the web-to-print editor and loads a business card template into the editor:

<!DOCTYPE html>

<html lang="en">

    <meta charset="utf-8" />
    <title>Customer's Canvas Quick Start Sample Page</title>
    <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
    <script id="CcIframeApiScript" type="text/javascript" src="/cc/Resources/SPEditor/Scripts/IFrame/IframeApi.js">

    <!-- The iframe to display the editor in. -->
    <iframe id="editorFrame" width="100%" height="800px"></iframe>

    //Initializing the product with only one template - "BusinessCard.psd".
    productDefinition = { surfaces: ["BusinessCard"] };
    //Getting the iframe element to display the editor in.
    var iframe = document.getElementById("editorFrame");
    var editor = null;
    //Loading the editor.
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
        //If the editor has been successfully loaded.
        .then(function (e) {
        editor = e;
        //If there was an error thrown when loading the editor.
        .catch(function (error) {
        console.error("The editor failed to load with an exception: ", error);



When the design page is loaded, it will display the ~\ProductTemplates\Designs\businesscard.psd file in the editor:

A single page design example.

Multipage Products

You can add as many surfaces (pages) to the product as you like. The IProductDefinition interface defines product surfaces as an array. For example, specify design templates for two surfaces of a double-sided business card:

productDefinition = { surfaces: ["BusinessCard2_side1", "BusinessCard2_side2"] };

A double page design example.

For multipage products having all their page templates stored in a folder, use the ISurfacesFromFolder interface:

productDefinition = {surfaces: { designFolder: "photoBook" } };

For more information, see the Multipage Products topic.

If you organize designs in subfolders, add a relative path to a template file name. For example, if you have a separate folder called \businesscards\ for business card templates, the product definition may look as follows:

productDefinition = { surfaces: ["businesscards\\modern"] };


To let you have more realistic product design, the web-to-print editor allows for adding additional elements which improve the product preview, but are not printed in hi-res outputs. Mockups are such a kind of these elements. If you have mockups, you can specify them by defining the ISurfaceTemplate.mockup property:

productDefinition = { 
    surfaces: [
        {printAreas: [{designFile: "envelopeDesign"}], mockup: {down: "envelopeMockup"} }

or set the ISurfacesFromFolder.mockupFolder property to specify a folder containing mockups:

productDefinition = {surfaces: { designFolder: "photoBook", mockupFolder: "pageMockups" } };

Mockups may also be organized into subfolders, like design templates.

See Also


IFrame API Reference