Understanding Hosted Version of Customer's Canvas

Customer's Canvas is available in two versions: hosted and on-premises. This topic describes the hosted version and helps you start working with it. If you are not sure which version is the best for your needs, this write-up can help you decide whether you need hosted or on-premises version.

The main difference between the versions is that all instances of the hosted version are located on our servers, whereas on-premises instances are hosted by you. Each hosted instance is a copy of Customer's Canvas dedicated to handle one site's requests. There are pros and cons with the hosted version:

  • Pro: you do not need to deploy it by yourself.
  • Pro: it does not require any ASP.NET experience.
  • Pro: there is a monthly subscription fee, so you can start with small investments.
  • Con: you do not have access to server settings.
  • Con: Customer's Canvas source code is not available for the hosted version.

Trial access to the hosted version can be requested from Request Hosted Trial page.

When you purchase or evaluate the hosted version of Customer's Canvas, you get:

  1. Your own Customer's Canvas instance, in other words, the copy of Customer's Canvas that handles requests from your site only.
  2. A file manager to get access to the file system of your Customer's Canvas instance.
  3. Direct access to Customer's Canvas configuration files.
  4. An API that allows you to integrate Customer's Canvas into your system.

To administrate your Customer's Canvas instance follow the http://h.customerscanvas.com/ link and enter your login and password.

File System of Customer's Canvas Hosted Instance

You can add your own images, fonts, product templates, etc. to your instance of Customer's Canvas. All the files you upload need to be placed in the correct folders in the Customer's Canvas file system in order for them to be used. Let us look at an overview of the Customer's Canvas file system:

  • \Configuration\ folder contains the editor configuration file, localization files, and CSS custom styles.
  • \Fonts\ folder contains custom fonts, that can be used in your products.
  • \ProductTemplates\designs\ folder contains product templates. Templates can be organized in subfolders.
  • \ProductTemplates\mockups\ folder contains mockups. Mockups help to visualize a product, but they are not rendered to hi resolution images.
  • \PublicGalleryFolder\ folder contains public images, that can be utilized by users while customizing products. You can create subfolders to categorize images.
  • \UserDataFolder\someUserId\; this folder is created for each user who interact with Customer's Canvas. someUserId is the identifier you specify using the Customer's Canvas API via the userId argument. If the argument is not specified, then the default user identifier is utilized.
    • \UserDataFolder\someUserId\states\ folder contains products created by someUserId user.
    • \UserDataFolder\someUserId\images\ folder contains images uploaded by someUserId user.

For more information about fonts, templates, mockups, and public images see the Configuring Products section.

You can manage files and folders of your Customer's Canvas instance using the web file manager described below.

File Manager

The file manager includes folder tree navigation on the left and file view on the right just like the standard Windows File Explorer.

Navigation in the file manager.

Using the file manager you can: upload and download files, delete, move, and rename files, and open mockups and templates in the web-to-print editor.

Actions available in the file manager.

Upload files

Mainly, you need access to the file system of your Customer's Canvas instance to upload product templates. The file manager allows you to upload several files at once. All uploaded files will be placed to folder being viewed at that time. There are two ways to upload files:

  1. Drop selected files to file view. The files will be uploaded instantly.

or:

  1. Click Browse... button and select files you want to upload.
  2. Click the Upload link.

Download, delete, copy, and move files

You can also download, delete, copy, and move files using the file manager. To perform any of these actions:

  1. Select a file.
  2. Click the desired action button or press an action key: F6 for move, Del for delete.

Rename files

If you want to rename file:

  1. Select a file
  2. Click the Rename button or press Enter.
  3. Enter new name and press Enter.

Open files in the editor

There are two ways to open a file in the editor:

  1. Double-click the file.

or:

  1. Select a file
  2. Click the Test template in the editor button or press Enter.

Configuring Customer's Canvas Hosted

There are two tabs in your Customer's Canvas account, that allow you to edit configuration files:

Editing the configuration files.

The web.config and ~\Configuration\clientConfig.json configuration files contain general settings applied to all products. After you have edited a configuration file, click the Save button in the bottom right corner. The Reset button resets all unsaved changes. It does not restore a configuration file to its default state.

Configuration parameters are discussed in the other topics of this documentation.

Note

All topics in this documentation discussing such subjects as configuring the product, Customer's Canvas integration, etc. are applied to both the hosted and on-premises versions.

Managing Local Fonts

You can manage custom fonts simply by uploading or deleting them in the ~\Fonts\ folder using the file manager. After you have changed local fonts, you should click the Reload local fonts button to apply changes to the web-to-print editor. The button is located in the Actions tab:

Reload local fonts.

Localizing Customer's Canvas Hosted

By default Customer's Canvas includes localization files for English (en) and Russian (ru) languages. You can set one of these languages as the default interface language by setting the defaultLanguage parameter in ~\Configuration\clientConfig.json. This file is avaialble for editing in the related tab:

Editing the configuration file.

For example, for English interface set:

"defaultLanguage": "en"

To create your own translation, you should edit the ~\Configuration\translations.json file. This file is avaialble for editing in the related tab:

Editing the localization file.

For more information see the Localization of Customer's Canvas topic.

Using Customer's Canvas Hosted

Customer's Canvas user interface is the web-to-print editor. To build the editor into your design page you use the API URL, which includes the URL to your Customer's Canvas instance. The instance URL can be found in your account.

The instance URL.

The API URL appears as follows: http://h.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/SPEditor/Scripts/IFrame/IframeApi.js, where xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx is the instance URL. The following code snippet displays the editor with the businesscard2_side1.psd business card template loaded into it:

HTML
<!DOCTYPE html>

<head>
    <title>Simplest Design Page</title>
    <!-- The IFrame API script. IMPORTANT! Do not remove or change the id. -->
    <script id="CcIframeApiScript" type="text/javascript" 
    src="http://h.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/SPEditor/Scripts/IFrame/IframeApi.js">
    </script>
</head>
<body>
    <!-- The iframe to display the editor into. -->
    <iframe id="editorFrame" width="100%" height="800px"></iframe>
</body>

<script>
    //Initializing product with only one template – "businesscard2_side1.psd".
    productDefinition = { surfaces: ["businesscard2_side1"] };
    //Getting the iframe element to display the editor into.
    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);
    });

</script>
</html>

Just copy this code, paste it to an html file, and replace xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx with the identifier of your Customer's Canvas instance. Open the saved file in a browser; you should see the editor. By clicking on the Download button, you can get the high resolution output of your newly-created product. A real use case of the integration of Customer's Canvas into a web site is discussed in the Integration with E-commerce Overview topic.

See Also

Manual