---
title: "Getting Started"
canonical: https://customerscanvas.com/docs/cc6/getting-started-with-di.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Dynamic Image"
    versions: ["0.x (may differ)"]
---

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

# Getting Started

**Applies to:** Customer's Canvas On-Premises; Dynamic Image 0.x (may differ) · **Archived documentation**
 
The Dynamic Image represents a web service that allows for generating images dynamically from PSD files, where you can replace and modify layers, by using HTTP requests.
 
## The Distribution Package
  
You can contact our [support team↗](https://customerscanvas.com/account/cases/add) to get the Dynamic Image. This distribution package represents the `DynamicImage_<version-number>.zip` file and contains the following folders:
 
- `DI-<version-number>` - the compiled application.
- `LicenseManager` - a utility to register Customer's Canvas.
- `readme.md` - instructions to get started.
 
## Deploying the Dynamic Image
  
To deploy this application:
 
- Unzip the archive to a new IIS folder.
- In IIS Manager, create an application pool with the **NetworkService** identity.
- Create an Application (if you want to put it to a folder of your main site) or Add a website to the Sites list associated with this folder (if you want to deploy the service on a separate domain).
- Set up the AppPool that you have created for this application/site.

**Note** 
A user account, under which the Dynamic Image runs in IIS, must have Read and Write permissions to the `App_Data` and `Logs` folders.
 
For detailed instructions, you can refer to the topic about [Deploying Applications to Windows Servers](https://customerscanvas.com/docs/cc6/deploying-application-to-windows-server.htm.md).
 
## Application Settings
  
In `AppSettings.config`, you can specify custom folders for the cache, assets, resulting images, and other settings or leave the default values.
 
```
<!-- API security key. -->
<add key="ApiSecurityKey" value="" />

<!-- Paths to the resources. -->
<add key="FontPath" value="..\Assets\fonts" />
<add key="ImagePath" value="..\Assets\images" />
<add key="TemplatePath" value="..\Assets\templates" />

<!-- Paths to the resulting hires files. -->
<add key="ResultHiresPath" value="..\Results\Pdf" />
<!-- Paths to the resulting preview files. -->
<add key="ResultPreviewPath" value="..\Results\Images" />

<!-- If `true`, it stores rendering results directly in the file system as .pdf and .png files.
     If this value is `false`, then the files are stored in the internal format,
        and you can limit the size and expiration time for both storages of the resulting files. -->
<add key="SaveResultsToFileSystem" value="true" />

<!-- The expiration time for resulting hires files, in seconds. For example, 864000 is 10 days. -->
<add key="ResultHiresExpirationTimespan" value="0" />
<!-- The maximum size of the resulting hires files, in bytes. For example, 4294967296 is 4 GiB. -->
<add key="ResultHiresMaxSize" value="0" />

<!-- The expiration time for resulting preview files, in seconds. For example, 864000 is 10 days. -->
<add key="ResultPreviewExpirationTimespan" value="0" />
<!-- The maximum size of the resulting preview files, in bytes. For example, 4294967296 is 4 GiB. -->
<add key="ResultPreviewMaxSize" value="0" />

<!-- Paths to the cache. -->
<add key="CachePath" value=".\App_Data\Cache\FileCache" />
<add key="FontCachePath" value=".\App_Data\Cache\FontCache" />

<!-- Enables the cache. If true, it caches every render request. -->
<add key="EnableCache" value="true" />
<!-- Cache expiration time, in seconds. By default, it's 10 days. -->
<add key="CacheExpirationTimespan" value="864000" />
<!-- The maximum size of the cache, in bytes. By default, it's 4 GiB. -->
<add key="CacheMaxSize" value="4294967296" />

<!-- The resize interpolation mode for preview images. -->
<add key="PreviewResizeInterpolationMode" value="Anisotropic9" />
<!-- Allows for uploading images in the `ImagePath` folder through the Web API. -->
<add key="AllowUploadImages" value="true" />

<!-- The maximum number of tasks for rendering proof images and hi-res outputs that the Dynamic Image can perform at the same time. -->
<add key="MaxConcurrentRenderingTasks" value="12" />
<!-- Preloads external images before the rendering. If `true`, it could speed up the rendering. -->
<add key="PreloadImages" value="false" />
<!-- An experimental optimization that speeds up the rendering of preview images, but may blur them. Use with caution. -->
<add key="OptimizePreview" value="false" />

<!-- Debugging and logging. -->
<add key="EnableSwagger" value="false" />
<add key="LogAllRequests" value="false" />
<add key="EnableDebugLogs" value="false" />
```
 
If you set **EnableSwagger** to `true`, then you can navigate to `<your-site-url>/swagger` and explore the interactive Web API in your browser.
 
## Registering a License Key
  
To start working with the Dynamic Image, you need a license key - either an evaluation or production key. To obtain a license, you can use the License Manager:
 
- In the `LicenseManager` folder, run `LicenseManager.exe`.
- Obtain an activation code and [register your license key](https://customerscanvas.com/docs/cc6/registering-production-license-keys.htm.md).
 
## Running the Dynamic Image
  
Let us assume that your Dynamic Image instance shares a domain name with the main website and is located in the `/DI-0.6.5/` virtual folder, and a `badge.psd` template is in the folder with templates. To personalize this template, open the following sample in your browser.
 
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>The Dynamic Image Sample</title>

    <script language="javascript">
document.addEventListener("DOMContentLoaded", function() {

    var cfg = {
        "Photo": {
            "type": "image",
            "image": "https://example.com/photoId/500/500",
            "resizeMode": "fill"
        },
        "Name": {
            "type": "text",
            "text": "John Wood"
        },
        "Background": {
            "type": "shape",
            "color": "#eeeb00"
        }
    };

    var data = {
        template: "badge.psd",
        data: cfg,
        format: "png"
    };

    (async() => {
        const response = await fetch("http://localhost/DI-0.6.5/api/rendering/preview", {
            method: "POST",
            headers: { "Content-Type": "application/json; charset=utf-8" },
            body: JSON.stringify(data)
        });
        const result = await response.json();
        if (response.status === 200)
            // A link to the personalized copy.
            console.log("Personalized image: " + result);
        else if (response.status === 500)
            // Exception details.
            console.log(result.details);
    })()
});
    </script>
</head>
<body>
    <h3>The Dynamic Image Sample</h3>
</body>
</html>
```
 
When the page is loaded, it will display a link to a preview image in the browser console.
 
If you face any problem with the Dynamic Image, please contact our [support team↗](https://customerscanvas.com/account/cases/add).
 
## See Also
  
### Manual
 
- [Dynamic Image API](https://customerscanvas.com/docs/cc6/dynamic-image-api.htm.md)
- [Integration with E-commerce Overview](https://customerscanvas.com/docs/cc6/integration-with-e-commerce.htm.md)