---
title: "Understanding the Hosted Version of Customer's Canvas"
canonical: https://customerscanvas.com/docs/cc4/customers-canvas-hosted.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["4.4.25", "4.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Understanding the Hosted Version of Customer's Canvas

**Applies to:** Customer's Canvas On-Premises; Design Editor 4.4.25, 4.x (may differ) · **Archived documentation**
 
Customer's Canvas is available in two versions: hosted and on-premises. This topic describes the hosted version and helps you to 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 the hosted or on-premises version.
 
The main difference between these two 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:** the Customer's Canvas source code is not available for the hosted version.

Trial access to the hosted version can be requested from the [Request Hosted Trial page](https://customerscanvas.com/get-trial?hosted=1).
 
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 [h.customerscanvas.com](https://h.customerscanvas.com/) link and enter your login and password.
 
## File System of the 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:
 
- The `\ColorProfiles\` folder contains color management profiles.
- The `\Configuration\` folder contains the editor configuration files, localization files, themes, and custom CSS styles.
    - The `\Configuration\customCss\` folder contains custom CSS styles.
    - The `\Configuration\Themes\` folder contains subfolders with themes.
- The `\Fonts\` folder contains custom fonts that can be used in your products.
- The `\ProductTemplates\` folder contains product templates, mockups, and watermark images.
    - The `\ProductTemplates\designs\` folder contains product templates. Templates can be organized in subfolders.
    - The `\ProductTemplates\mockups\` folder contains mockup files. Mockups help to visualize a product, but they are not rendered to hi-resolution images.
    - The `\ProductTemplates\watermarks\` folder contains watermark images.
- The `\PublicGalleryFolder\` folder contains public images, that can be utilized by users while customizing products. You can create subfolders to categorize images.
- The `\UserDataFolder\<someUserId>\` folder is created for every user who interacts 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.
    - The `\UserDataFolder\<someUserId>\states\` folder contains products created by the `<someUserId>` user.
    - The `\UserDataFolder\<someUserId>\images\` folder contains images uploaded by the `<someUserId>` user.

For more information about fonts, templates, mockups, and public images, see the [Configuring Products](https://customerscanvas.com/docs/cc4/configuring-products.htm.md) section.
 
You can manage files and folders of your Customer's Canvas instance using the web file manager.
 
## File Manager
  
The file manager includes folder tree navigation on the left side and file view on the right side, just like the standard Windows File Explorer.
 
![Navigation in the file manager.](https://customerscanvas.com/docs/cc4/images/HostedCCFMLayout.png)
 
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.](https://customerscanvas.com/docs/cc4/images/HostedCCFMActions.png)
 
### Upload Files
 
Mainly, you need access to the file system of your Customer's Canvas instance to upload product templates and images. The file manager allows you to upload several files at once. All uploaded files will be placed in the folder being viewed at that time. When you upload product templates and images, they instantly become available in the designer. When you upload or delete fonts, you need to reload local fonts' info.
 
There are two ways to upload files:
 
- Drop selected files into the **File view**. The files will be uploaded instantly.

or:
 
1. Click the **Browse** button and select the 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 by 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 to move, Del to delete.

### Rename Files
 
If you want to rename a file:
 
1. Select a file.
2. Click the **Rename** button or press Enter.
3. Enter the new name and press Enter.

### Open Files in the Editor
 
There are two ways to open a file in the editor:
 
- 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 four tabs in your Customer's Canvas account that allow you to edit configuration files:
 
![Editing the configuration files.](https://customerscanvas.com/docs/cc4/images/HostedCCWebConfigClientConfig.png)
 
The `AppSettings.config`, `VectorObjects.config`, `FileCache.config`, and `clientConfig.json` configuration files contain general settings that are applied to all products. After you have edited a configuration file, click the **Save** button in the lower-right corner. The **Reset** button resets all unsaved changes. It does not restore a configuration file to its default state.
 
The [Configuration Files](https://customerscanvas.com/docs/cc4/configuration.htm.md) topic describes these settings in detail.
 
**Note** 
All topics in this documentation discussing such subjects as configuring the product, the Customer's Canvas integration, etc. apply 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 by 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.](https://customerscanvas.com/docs/cc4/images/HostedCCReloadFonts.png)
 
Also, you can notify Customer's Canvas about updated local fonts through Web API. Refer to the [Custom Fonts](https://customerscanvas.com/docs/cc4/web-api-for-manipulating-fonts.htm.md) topic that describes how you can update local fonts' info.
 
### Adding Color Profiles
 
The hosted account allows you to set up color management profiles. You can upload them into the `~\ColorProfiles\` folder by using the file manager. To associate the uploaded profiles with color spaces in the editor, specify your custom profiles in `VectorObjects.config`:
 
```xml
<Aurigma.GraphicsMill.AjaxControls.VectorObjects>
    <add key="GrayscaleColorProfileFileName" value="~/ColorProfiles/grayscaleColorProfile.icc" />
    <add key="RgbColorProfileFileName" value="~/ColorProfiles/rgbColorProfile.icc" />
    <add key="CmykColorProfileFileName" value="~/ColorProfiles/cmykColorProfile.icc" />
</Aurigma.GraphicsMill.AjaxControls.VectorObjects>
```
 
Find more info on the color management in the [Configuring High Resolution and Proof Images](https://customerscanvas.com/docs/cc4/configuring-high-resolution-and-proof-images.htm.md) topic.
 
### Adding Custom CSS Styles
 
Themes help you customize the appearance of Customer's Canvas. When you navigate to the `~\Configuration\Themes\` folder, you will find [three provided themes](https://customerscanvas.com/docs/cc4/themes.htm.md): **Md**, **BootstrapDefault**, and **BootstrapEmpty**. **Md**, which stands for Material design, is the default theme. To change a basic theme, you can put custom styles into the `~\Configuration\customCss\` folder.
 
For example, you may want to set an image as the designer background and change the highlight appearance in the **Object Inspector**. You can define the following styles to implement this:
 
```
#mainContainer #mainRow {
    background-image: url("wood.jpg");
}

.objectInspector .inputs.highlight {
    color: #ffffff;
}
```
 
Now that you have prepared your custom CSS styles, say in the `mySiteStyles.css` file, you can load them within the designer page through the [IConfiguration](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) interface:
 
```
configuration = {
    customStyle: "mySiteStyles"
}
```
 
Also, you can customize one of the provided themes. For an example of such a customization, refer to the [Themes](https://customerscanvas.com/docs/cc4/themes.htm.md) topic.
 
## Localizing Customer's Canvas Hosted
  
By default, Customer's Canvas includes localization files for English (`en`), Spanish (`es`), French (`fr`), and Russian (`ru`). You can set one of these languages as the default interface language by setting the **defaultLanguage** parameter in `~\Configuration\clientConfig.json`. This file is available for editing in the related tab:
 
![Editing the configuration file.](https://customerscanvas.com/docs/cc4/images/HostedCCClientConfig.png)
 
For example, for the English interface, set:
 
`"defaultLanguage": "en"`
 
To create your own translation, you should edit the `~\Configuration\translations.json` file. This file is available for editing in the related tab:
 
![Editing the localization file.](https://customerscanvas.com/docs/cc4/images/HostedCCTranslations.png)
 
For more information, see the [Localization of Customer's Canvas](https://customerscanvas.com/docs/cc4/localization-of-cc.htm.md) topic.
 
## Using Customer's Canvas Hosted
  
The Customer's Canvas user interface is the web-to-print editor. To integrate the editor into your design page, you use the API URL, which includes the URL to your Customer's Canvas instance. This instance URL can be found in your account.
 
![The instance URL.](https://customerscanvas.com/docs/cc4/images/HostedCCURL.png)
 
The API URL appears as follows: `https://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` 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="https://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 in. -->
    <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 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);
    });

</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; the editor should appear. 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 website is discussed in the [Integration with E-commerce Overview](https://customerscanvas.com/docs/cc4/integration-with-e-commerce.htm.md) topic.
 
## See Also
  
### Manual
 
- [Integration with E-commerce Overview](https://customerscanvas.com/docs/cc4/integration-with-e-commerce.htm.md)
- [Localization of Customer's Canvas](https://customerscanvas.com/docs/cc4/localization-of-cc.htm.md)
- [Custom Fonts](https://customerscanvas.com/docs/cc4/web-api-for-manipulating-fonts.htm.md)
- [Configuring High Resolution and Proof Images](https://customerscanvas.com/docs/cc4/configuring-high-resolution-and-proof-images.htm.md)
- [Themes](https://customerscanvas.com/docs/cc4/themes.htm.md)