Integration with E-commerce Overview

Customer's Canvas is an ASP.NET application that is ready to be integrated with any e-commerce system, no matter what you are using. Customer's Canvas can take care of the following tasks with ease:

  • Importing templates from PSD files (in the Photoshop format)
  • Providing the user interface for creating personalized products
  • Allowing users to get images from public and user-created image collections
  • Rendering user-created products into proof images and print-ready output
  • Saving user-created products into the file system to edit them in the future
  • Generating links to rendered files: the proof images and the hi-res output

The starting point of any Customer's Canvas integration is to establish the hosting model for Customer's Canvas. There are three ways to do this:

  • On the same server as the e-commerce system Customer's Canvas is integrated with
  • On any other ASP.NET hosting server
  • Getting the hosted version of Customer's Canvas

To get more information on Customer's Canvas hosting, see the Deploying Customer's Canvas to Windows Servers topic.

After successfully hosting Customer's Canvas, it can be easily integrated into an e-commerce system. To better understand how Customer's Canvas and the system are connected and what tasks are solved by each side, take a look at the following diagram illustrating a common ordering workflow on a typical web-to-print site.

The diagram of a typical ordering process.

The workflow is colored here to clearly indicate where each step is implemented. Steps I, IV, and V are implemented by the e-commerce system, while step II is completely conducted by Customer's Canvas. Step III is shared. The important thing to keep in mind here is that all the navigation between the steps should be implemented by the e-commerce system; it is responsible for all the transfers from one step to the next. Let us take a more in-depth look at each step below.

(I), System: in the first step, the system has to provide a user interface to select a template or load a previously saved design.

Selecting a product template.

(II), Customer's Canvas: on the second step, a user can edit the design. This is where Customer's Canvas comes in. At the beginning of this step, the system sets the following data: a product template or user design, editing parameters, user information, and, optionally, metadata the system may need to link with the order.

Editing the product template.

The front end of Customer's Canvas is the web-to-print editor, like the one shown above. You build the editor into your system's design page by adding the IFrame API script to the page and loading the editor into the <iframe> tag. For reference, the IFRAME element is an HTML container designed to allow the embedding of externally-hosted content into a webpage. Take a look at the following example.

<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8" />
    <title>Simplest Design Page</title>
    <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
    <script id="CcIframeApiScript" type="text/javascript" src="">

    <!-- 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);


Please note that all the print templates and images (including both the public graphics library and user uploaded images) should be placed into the Customer's Canvas file system before the product is opened in the editor. For more information, refer to the Configuring Products and Photoshop Templates sections.

(III), System and Customer's Canvas: to proceed to the third step, the user should tell the system that editing is finished by clicking the corresponding button (submit, finish, next, etc.) The system transfers this signal to Customer's Canvas using its IFrame API (see the Integration With E-commerce section). By receiving the signal, Customer's Canvas processes the product and delivers print-ready content and additional metadata to the host website. The way this takes place is: the website triggers a special method in Customer's Canvas and passes a reference to a callback function within it. Customer's Canvas processes the personalized product, then triggers the callback function and returns the following data: rendering status, links to ready-to-print output and proof images, a link for further editing the product, etc. The described interconnection between Customer's Canvas and the system is illustrated in the following diagram.

The workflow between the editor and your system after the product editing is finished.

After this interconnection is finished, the system displays the approval page containing proof images, which is presented as the third step in the initial workflow diagram above. Here a user accepts the design or comes back to the editing step.

The approval page.

For test purposes, you can omit the approval page and just use the default Download button. This way, you can simply download the print-ready output on the client side. Though in the real system, this button should be disabled in the editor configuration:

    productDefinition = { surfaces: ["BusinessCard"] };
    //Getting the iframe element to display the editor in.
    var iframe = document.getElementById("editorFrame");
    //Defining the editor configuration.
    configuration = { widgets: {FinishButton: {mode: "Disabled"}} };
    //Loading the editor with the given configuration.
    CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration).then(function(e) {editor = e});

And do not forget to make your own navigation to the approval page.

(IV, V), System: the last two steps are conducted by the system, without the participation of Customer's Canvas. Here, the system uses data received from Customer's Canvas in the third step to create the order within the system and associate the resulting print-ready output with it, to link user-created products with their profile to enable editing in the future, or to make a repeat order by using the existing print-ready output.

See Also