### Run TypeScript Example for Dynamic Image Rendering

Source: https://customerscanvas.com/dev/dynamic-image/latest/getting-started

This tip explains how to run the dynamic image example as a TypeScript file if you have TypeScript and ts-node installed. It provides the command-line instruction to execute the script.

```bash
$ ts-node dynamic-image.ts
```

--------------------------------

### Initialize Product with Surface (JavaScript)

Source: https://customerscanvas.com/dev/editors/design-atoms-js/getting-started

Demonstrates how to import the Product module from Design Atoms and initialize a new Product with a Surface. This is a basic example of using the Design Atoms model.

```javascript
import { Product } from "@aurigma/design-atoms/Model/Product";

let product = new Product([new Surface(100, 100)]);
```

--------------------------------

### Basic Widget Configuration Example (JSON)

Source: https://customerscanvas.com/dev/ui-framework/widgets/reference/index

Illustrates a basic configuration for a widget, specifying its type, title, name, and parameters. This serves as a foundational example for widget setup.

```json
{
  "widgets": [{
    "type": "option",
    "title": "Choose size",
    "name": "size-selector",
    "params": {
      "id": 0
    }
 }]
}
```

--------------------------------

### Initialize E-commerce Driver and Editor (JavaScript)

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Loads the e-commerce driver and editor modules, then initializes them using the `driver.init` method with product, editor, configuration, settings, restore data, quantity, and user information.

```javascript
const driver = (await moduleLoader.dynamicImport("ecommerceDriver", `${uiFrameworkBaseUrl}/drivers/default-driver.js`)).ecommerceDriver;
const editor = (await moduleLoader.dynamicImportDefault("editor", `${uiFrameworkBaseUrl}/editor.js`)).editor;

const ecommerce = await driver.init(product, editor, config, /* settings */ { customersCanvasBaseUrl: "" },
                  /* restore data */ null, /*quantity*/ 1, /* user info*/ { id: 'test-user' });

```

--------------------------------

### Example Configuration File Structure (JSON)

Source: https://customerscanvas.com/dev/preflight/latest/getting-started

Illustrates the structure of a typical `config.json` file used by the Preflight Tool. It includes settings for widgets, language, backend URL, and other parameters.

```json
{
    "showSteps": true,
    "widgets": [
        {
            "name": "preflight",
            "type": "preflight",
            "params": {
                "config": {
                    "language": "en",
                    "backendUrl": "",
                    "startFromUploader": true,
                ...
            }
        }
    ],
    "steps": [
        {
            ...
        }
    ]
}

```

--------------------------------

### Install UI Framework Package with npm

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Installs the UI Framework package using npm. This package is pre-compiled and bundled, eliminating the need for manual building.

```bash
npm install @aurigma/ui-framework

```

--------------------------------

### Define Basic UI Framework Editor Configuration

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Defines a minimal configuration object for the UI Framework editor. This example includes a 'hello' widget and a 'main' step, but lacks practical functionality.

```javascript
const config = {
  "showSteps": false,
  "widgets": [
    {
      "name": "hello",
      "type": "static-text",
      "params": {
        "text": "Hello world!"
      }
    }
  ],
  "steps": [
    {
      "name": "main",
      "mainPanel": {
        "name": "hello"
      }
    }
  ]
};

```

--------------------------------

### Initialize StorefrontJS Instance

Source: https://customerscanvas.com/dev/backoffice/storefront/storefrontjs/getting-started

Initializes the StorefrontJS library with tenant and storefront details. Requires tenant ID, storefront ID, CCHub URL, and user information. Customization options for localization and theme settings are available.

```javascript
const user = {
  id: "sam.wood",
  userToken: "ccApiToken"
};

const storefront = new Aurigma.StorefrontJS({
  tenantId: <yourTenantIdHere>,
  storefrontId: <yourStorefrontIdHere>,
  cchubUrl: "https://customerscanvashub.com",
  user: user
});
```

--------------------------------

### Initialize Driver and Render Editor (JavaScript)

Source: https://customerscanvas.com/dev/preflight/latest/getting-started

Initializes the e-commerce driver with product, editor, configuration, and other settings. It then renders the editor within the specified container element.

```javascript
const ecommerce = await driver.init(product, editor, config, settings, null, quantity, user);
ecommerce.products.current.renderEditor(document.getElementById("editor-parent"));

```

--------------------------------

### Get Product Integration Details

Source: https://customerscanvas.com/dev/backoffice/storefront/storefrontjs/getting-started

Retrieves editor settings and tenant application links for a given product reference or SKU. This step is crucial for configuring the editor and is necessary before loading it.

```javascript
const details = await storefront.getIntegrationDetails('yourProductReferenceHere');
```

```javascript
const details = await storefront.getIntegrationDetailsBySku('yourProductSkuHere');
```

--------------------------------

### Create Project with Single Item API Call Examples

Source: https://customerscanvas.com/dev/backoffice/api/storefront/working-with-projects

Examples of how to call the /api/storefront/v1/projects/with-single-item endpoint to create a project. Includes cURL, HTTP, C#, and TypeScript examples.

```curl
curl -X POST "https://api.customerscanvashub.com/api/storefront/v1/projects/with-single-item?storefrontId=12" \
-H "accept: text/plain" \
-H "Content-Type: application/json" \
-H "Authorization: Bearer <TOKEN>" \
-d '{
    "ownerId": "6527afc635b52bfadd355226",
    "item": {
        "productReference": "24297",
        "designIds": ["62da200abb25c5477797d9cb"],
        "fields": {
            "name": "Campaign",
            "orientation": "Vertical",
            "trim": false
        }
    }
}'
```

```http
POST https://api.customerscanvashub.com/api/storefront/v1/projects/with-single-item?storefrontId=12
{
    "ownerId": "6527afc635b52bfadd355226",
    "item": {
        "productReference": "24297",
        "designIds": ["62da200abb25c5477797d9cb"],
        "fields": {
            "name": "Campaign",
            "orientation": "Vertical",
            "trim": false
        }
    }
}
```

```csharp
// Set a real storefront ID.
var storefrontId = 12;
// Set a product reference, owner ID, design IDs, and custom fields.
var body = @"{
    \"ownerId\": \"6527afc635b52bfadd355226\",
    \"item\": {
        \"productReference\": \"24297\",
        \"designIds\": [\"62da200abb25c5477797d9cb\"],
        \"fields\": {
            \"name\": \"Campaign\",
            \"orientation\": \"Vertical\",
            \"trim\": false
        }
    }
}";
var project = await projectsApiClient.CreateWithSingleItemAsync(storefrontId, null, body);
```

```typescript
// Set a real storefront ID.
var storefrontId = 12;
// Set a product reference, owner ID, design IDs, and custom fields.
var body = {
    "ownerId": "6527afc635b52bfadd355226",
    "item": {
        "productReference": "24297",
        "designIds": ["62da200abb25c5477797d9cb"],
        "fields": {
            "name": "Campaign",
            "orientation": "Vertical",
            "trim": false
        }
    }
};
var project = _projectsApiClient.createWithSingleItem(storefrontId, null, JSON.stringify(body));
```

--------------------------------

### Create New Console Application with .NET CLI

Source: https://customerscanvas.com/dev/dynamic-image/latest/getting-started

This command demonstrates how to create a new, empty console application using the .NET CLI. This serves as a starting point for C# applications that will interact with external APIs.

```bash
$ dotnet new console 

```

--------------------------------

### Setup Method API

Source: https://customerscanvas.com/dev/editors/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Configuration.Configuration

Documentation for the Setup method, which is used to configure the Customers Canvas Dev environment.

```APIDOC
## Setup Method

### Description
Initializes and configures the Customers Canvas Dev environment with specified settings.

### Method
POST

### Endpoint
/websites/customerscanvas_dev/setup

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **param1** (Boolean) - Required - Description for the first parameter.
- **param2** (IEnumerable<Assembly>) - Required - Description for the second parameter (collection of assemblies).
- **param3** (TypeRegistrationOrderedDict) - Required - Description for the third parameter (ordered dictionary for type registration).
- **param4** (Boolean) - Required - Description for the fourth parameter.

### Request Example
```json
{
  "param1": true,
  "param2": [
    // Assembly objects would be represented here, specific format depends on implementation
  ],
  "param3": {
    // TypeRegistrationOrderedDict structure would be defined here
  },
  "param4": false
}
```

### Response
#### Success Response (200)
- **message** (string) - A success message indicating the setup was completed.

#### Response Example
```json
{
  "message": "Setup completed successfully."
}
```
```

--------------------------------

### Define Product Object for UI Framework

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Defines a sample product object, including its ID, SKU, name, description, options, price, and attributes. This object is used to configure the editor.

```javascript
const product = {
  id: 0,
  sku: "PRODUCT-001",
  name: "My Product",
  description: "This is a test product.",
  options: [],
  price: 1,
  attributes: []
};

```

--------------------------------

### Generate Mockup API Call Examples

Source: https://customerscanvas.com/dev/backoffice/api/asset-generator/creating-visual-assets

Provides examples of how to call the mockup generation API using cURL, HTTP, C#, and TypeScript. These examples demonstrate sending the request body and necessary headers.

```curl
curl -X POST \
  "https://api.customerscanvashub.com/api/asset-generator/v1/mockups/generate" \
  -H "accept: application/json" \
  -H "Authorization: Bearer <TOKEN>" \
  -H "Content-Type: application/json" \
  -d '{
    "specName": "FEFCO 0201",
    "specParameters": {
        "L": "50",
        "W": "37",
        "H": "25",
        "CT": "Corrugated",
        "FT": "B",
        "BPS": "Both"
    },
    "mockupFileName": "box2x1.5x1",
    "mockupFilePath": "/Generated",
    "privateStorageOwner": ""
}'
```

```http
POST https://api.customerscanvashub.com/api/asset-generator/v1/mockups/generate
Accept: application/json
Authorization: Bearer <TOKEN>
Content-Type: application/json

{
  "specName": "FEFCO 0201",
  "specParameters": {
    "L": "50",
    "W": "37",
    "H": "25",
    "CT": "Corrugated",
    "FT": "B",
    "BPS": "Both"
  },
  "mockupFileName": "box2x1.5x1",
  "mockupFilePath": "/Generated",
  "privateStorageOwner": ""
}
```

```csharp
var body = @"
{
    "specName": "FEFCO 0201",
    "specParameters": {
        "L": "50",
        "W": "37",
        "H": "25",
        "CT": "Corrugated",
        "FT": "B",
        "BPS": "Both"
    },
    "mockupFileName": "box2x1.5x1",
    "mockupFilePath": "/Generated",
    "privateStorageOwner": ""
}
";

var response = await mockupGeneratorApiClient.GenerateAsync(body);
```

```typescript
const body = {
    "specName": "FEFCO 0201",
    "specParameters": {
        "L": "50",
        "W": "37",
        "H": "25",
        "CT": "Corrugated",
        "FT": "B",
        "BPS": "Both"
    },
    "mockupFileName": "box2x1.5x1",
    "mockupFilePath": "/Generated",
    "privateStorageOwner": ""
};

const response = await _mockupGeneratorApiClient.generate(body);
```

--------------------------------

### POST /api/rendering/preview - Minimal Rendering Request

Source: https://customerscanvas.com/dev/dynamic-image/latest/getting-started

This endpoint allows you to render a PSD mockup with basic settings. It requires the template path and the desired output format.

```APIDOC
## POST /api/rendering/preview

### Description
This endpoint renders a PSD mockup with the specified template and format. It's the most basic request to get a preview image.

### Method
POST

### Endpoint
`https://<your-dynamic-image-instance>/api/rendering/preview`

### Parameters
#### Request Body
- **template** (string) - Required - The path to the PSD template file in Asset Storage.
- **format** (string) - Required - The desired output image format (e.g., 'png', 'jpeg').

### Request Example
```json
{
    "template": "/mugs/preview-mockup-mug-left.psd",
    "format": "png"
}
```

### Response
#### Success Response (200)
- **url** (string) - The URL to the rendered image.

#### Response Example
```json
{
  "url": "https://<your-dynamic-image-instance>/api/download/?file=6191D97FD6D484C220755B53333598B8.png"
}
```
```

--------------------------------

### Run PHP Script

Source: https://customerscanvas.com/dev/dynamic-image/latest/getting-started

This command executes a PHP script from the command line. It is used to run the `dynamic-image.php` file, which makes a request to the Dynamic Image API.

```bash
$ php -f dynamic-image.php

```

--------------------------------

### StorefrontJS Initialization and Editor Loading

Source: https://customerscanvas.com/dev/backoffice/howto/launching-personalization-process

Demonstrates how to initialize the StorefrontJS library, load the editor for a product, and handle the completion of the personalization process.

```APIDOC
## StorefrontJS Initialization and Editor Loading

### Description
This section details the initialization of the StorefrontJS library, how to load the product editor, and how to subscribe to the completion event for personalization.

### Initialization
```javascript
// Initialization
const user = {
    // User ID in your application, replace it with yours
    id: "sam.wood", 
    // API access token
    userToken: "yourUserToken"
};

const storefront = new Aurigma.StorefrontJS({
    // Customer's Canvas tenant ID (your account > Settings > Tenant, copy from Tenant ID field)
    tenantId: 1234567,
    // Storefront ID in Customer's Canvas (your account > Settings > Integrations)
    storefrontId: 1392,
    // Customer's Canvas base URL. Depending on your instance region, it is either
    // https://customerscanvashub.com, https://eu.customerscanvashub.com, or https://au.customerscanvashub.com
    cchubUrl: "https://customerscanvashub.com/",
    user: user
});
```

### Loading the Editor
```javascript
// Getting an HTML element in which the editor will be inserted
const container = document.getElementById('editor-container');

// A reference to a product in your application that the integration is connected to, 
// replace it with yours
const productReference = "7846621020300";
// Getting details about the product integration
const details = await storefront.getIntegrationDetails(productReference);

// Loading the editor
await storefront.loadEditor(container, details);
```

### Handling Personalization Completion
```javascript
// Handling the editing completion event
storefront.onFinish.subscribe(async (storefront, personalizationResults) => {
    alert("Completed");
});
```

### Loading Product by SKU
```javascript
const details = await storefront.getIntegrationDetailsBySku(<your-SKU>);
```
```

--------------------------------

### Load UI Framework ModuleLoader Locally (JavaScript)

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Imports the moduleLoader script from a local installation of the UI Framework package. This is used when building your own scripts.

```javascript
import moduleLoader from "./node_modules/@aurigma/ui-framework/dist/moduleLoader.js";
const uiFrameworkBaseUrl = "./node_modules/@aurigma/ui-framework/dist";

```

--------------------------------

### Load UI Framework ModuleLoader from CDN (JavaScript)

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Dynamically imports the moduleLoader script from Azure CDN to load UI Framework modules. This is an alternative to local installation.

```javascript
import moduleLoader from "https://staticjs-aurigma.azureedge.net/ui-framework/latest/moduleLoader.js";
const uiFrameworkBaseUrl = "https://staticjs-aurigma.azureedge.net/ui-framework/latest";

```

--------------------------------

### Setup Method Signature in C#

Source: https://customerscanvas.com/dev/editors/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Configuration.Configuration

This C# code snippet shows the signature for a 'Setup' method. It accepts a boolean, an enumerable collection of assemblies, a dictionary for type registration, and another boolean as parameters. This method is likely used for initializing or configuring the application's components.

```csharp
public void Setup(Boolean, IEnumerable<Assembly>, TypeRegistrationOrderedDict, Boolean)
```

--------------------------------

### Initialize Web Component with Configuration

Source: https://customerscanvas.com/dev/backoffice/workflow-elements/template-editor/web-component-api

This example shows how to initialize a web component using the `init` method. It requires a configuration object containing details for integration, input, and settings.

```javascript
editor.init(
    configVersion: 2,
    integration: {
        tenantId: <yourTenantId>,
        user: {
            id: <userId>,
            token: <userToken>
        },
        storefrontId: <yourStorefrontId>,
        cchubApiGatewayUrl: "https://api.customerscanvashub.com/"
    },
    input: {
        designTemplateId: <templateId>
    },
    settings: {
        itemBuilder: {
            image: { borderWidth: 10, borderColor: "rgb(255, 0, 13)" }
        },
        listSettings: { bulletChar: "*" }
  }
);
```

--------------------------------

### Install Design Atoms Front-end Library (npm)

Source: https://customerscanvas.com/dev/editors/design-atoms-js/getting-started

Installs the Design Atoms front-end library using npm. This is the first step to integrating Design Atoms into your project.

```bash
npm install @aurigma/design-atoms --save
```

--------------------------------

### HTML Container for Editor

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Defines a DIV element that serves as the container for the UI Framework editor on an HTML page.

```html
<div id="editor-container" class="editor-container">
</div>

```

--------------------------------

### Load StorefrontJS Editor

Source: https://customerscanvas.com/dev/backoffice/storefront/storefrontjs/getting-started

Loads the StorefrontJS editor into a specified HTML container. Requires the HTML container element and the integration details obtained in the previous step.

```javascript
await storefront.loadEditor(container, details);
```

--------------------------------

### Configure Preflight Widget with Default Settings

Source: https://customerscanvas.com/dev/editors/ui-framework/widgets/preflight

This example demonstrates how to configure the Preflight widget with a comprehensive set of default parameters. It includes settings for language, backend URL, file types, product dimensions, viewer options, validation rules (color space), and UI toolbar customization. The `onPageChange` callback is also shown for handling page transitions.

```json
{
  "name": "preflight",
  "type": "preflight",
  "params": {
    "config": {
      "language": "en",
      "backendUrl": "http://preflight.example.com",
      "startFromUploader": true,
      "uploader": {
        "fileTypes": [ ".pdf", ".jpeg", ".jpg", ".psd" ],
        "multiple": true
      },
      "product": {
        "dpi": 300,
        "size": {
          "width": 595,
          "height": 842
        },
        "bleed": 20,
        "safetyLines": [
          {
            "color": "#00ff00",
            "altColor": "#00ff00",
            "margin": 40
          }
        ],
        "pages": 4,
        "allowAddPages": true,
        "allowDeletePages": true
      },
      "viewer": {
        "keepAspectRatio": false,
        "zoom": {
          "min": 0.2,
          "max": 1.2,
          "step": 0.1
        }
      },
      "rules": [
        {
          "type": "colorspace",
          "severity": "error",
          "enableFix": true,
          "params": {
            "allowedColorSpaces": [ "cmyk" ]
          }
        }
      ],
      "interface": {
        "topToolbar": [
          {
            "name": "upload"
          },
          {
            "name": "fitToBleed"
          },
          {
            "name": "fitToTrim"
          },
          {
            "name": "center"
          },
          {
            "name": "reset"
          }
        ]
      }
    },
    "onPageChange": [
      "{{ #function(page) page==='editor' && main.stepIndex === 0 ? main.nextStep() : ''  }}"
    ]
  }
}
```

--------------------------------

### Resize Configuration Example (JSON)

Source: https://customerscanvas.com/dev/ui-framework/widgets/design-editor-commands/resize

This JSON configuration demonstrates how to use the resize command. It specifies the target type, dimensions, default resize options, and container-specific resize settings.

```json
{
  "type": "design-editor", 
  "name": "editor",
  "params": {
    "initial": { ... }, 
    "resize": {
      "resizeParams": {
        "targetType": "product",
        "width": "1000",
        "height": "1000",
        "defaultOptions": {
          "resize": 0,
          "resetPlaceholderContent": false
        },
        "containerOptions": {
          "Background": {
            "resize": 2,
            "resetPlaceholderContent": true
          }
        }
      }
    }
  }
}
```

--------------------------------

### Install Design Atoms NuGet Package via Package Manager Console

Source: https://customerscanvas.com/dev/editors/design-atoms-cs/getting-started

This command installs the Design Atoms NuGet package using the Package Manager Console in Visual Studio. Ensure you have the NuGet Package Manager open and the correct project selected.

```csharp
Install-Package Aurigma.DesignAtoms
```

--------------------------------

### Render Editor into Container (JavaScript)

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Renders the initialized UI Framework editor into the specified HTML container element. This makes the editor visible and interactive on the page.

```javascript
ecommerce.products.current.renderEditor(document.getElementById("editor-container"));

```

--------------------------------

### Example Viewer Configuration

Source: https://customerscanvas.com/dev/preflight/latest/configure-ui

A comprehensive example of viewer configuration, including bleed zone masking, image highlighting, aspect ratio behavior, ruler settings, and zoom parameters.

```json
{
    "viewer": {
        "shadeBleedZone": true,
        "highlightImages": true,
        "keepAspectRatio": false,
        "rulers": {
            "enabled": true,
            "unit": "point"
        },
        "zoom": {
            "min": 0.2,
            "max": 2.0,
            "step": 0.2,
            "default": 1
        }
    }
}
```

--------------------------------

### Run the .NET Core Sample Application

Source: https://customerscanvas.com/dev/dynamic-image/latest/sample-project

This command compiles and runs the .NET Core sample application. By default, it will be accessible at http://localhost:5000, unless a different port has been configured.

```bash
dotnet run
```

--------------------------------

### Example Configuration for IAssetSources.IGallerySourceConfig

Source: https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/iassetsources.igallerysourceconfig-interface

This example demonstrates how to configure the asset sources, specifically a user gallery named 'My files' with allowed image extensions.

```json
{
  "assetSources": {
    "My files": {
      "type": "PrivateSource",
      "allowedExtensions": [ "jpg", "jpeg", "png" ]
    }
  }
}
```

--------------------------------

### Handle Editor Completion Event

Source: https://customerscanvas.com/dev/backoffice/storefront/storefrontjs/getting-started

Subscribes to the `onFinish` event to process editing results. This event fires before adding an item to the cart and allows saving raw projects or cart items.

```javascript
storefront.onFinish.subscribe(async (storefront, personalizationResults) => {
  // Your code here...
});
```

--------------------------------

### Basic Configuration Example

Source: https://customerscanvas.com/dev/ui-framework/widgets/data-driven-editor

An example of a basic configuration for the data-driven editor.

```APIDOC
## Basic Configuration Example

### Description
Provides a basic configuration object for initializing the data-driven editor.

### Request Example
```json
{
    "name": "dd-editor",
    "type": "data-driven-editor",
    "params": {
        "config": {
            "access": {
                "userId": "back_office_user_id",
                "token": "back_office_token",
                "tenantId": "back_office_tenant_id"
            },
            "api": {
                "designAtoms": "https://api.customerscanvashub.com/atoms",
                "assetProcessor": "https://api.customerscanvashub.com/processor/",
                "assetStorage": "https://api.customerscanvashub.com/storage/"
            },
            "design": {
                "designId": "your_design_id",
                "dataSetId": "your_dataset_id",
                "isPrivateDesign": false
            },
            "settings": {
                "lang": "en",
                "enableSymbols": true,
                "allowManipulations": false
            }
        }
    }
}
```
```

--------------------------------

### Configure Multipage Product with Mockups in JavaScript

Source: https://customerscanvas.com/dev/editors/iframe-api/product-definition/multiple-pages

Illustrates configuring a multipage product from a folder, including setting up page mockups and preview mockups. This allows for visual representation of product pages and their previews within the editor.

```javascript
let productDefinition = {
    surfaces: {
        designFolder: "myphotoBook",
        mockupFolder: { down: "pageMockups" },
        previewMockupFolder: "pagePreviewMockups"
    }
};

```

--------------------------------

### Initialize StorefrontJS and Load Editor (JavaScript)

Source: https://customerscanvas.com/dev/backoffice/howto/launching-personalization-process

This JavaScript code demonstrates how to initialize the StorefrontJS library, load a product editor into a specified HTML container, and subscribe to the finish event. It requires user credentials, tenant and storefront IDs, and the Customer's Canvas hub URL.

```javascript
// Initialization
const user = {
    // User ID in your application, replace it with yours
    id: "sam.wood", 
    // API access token
    userToken: "yourUserToken"
};

const storefront = new Aurigma.StorefrontJS({
    // Customer's Canvas tenant ID (your account > Settings > Tenant, copy from Tenant ID field)
    tenantId: 1234567, 
    // Storefront ID in Customer's Canvas (your account > Settings > Integrations)
    storefrontId: 1392, 
    // Customer's Canvas base URL. Depending on your instance region, it is either
    // https://customerscanvashub.com, https://eu.customerscanvashub.com, or https://au.customerscanvashub.com
    cchubUrl: "https://customerscanvashub.com/",
    user: user
});

// Getting an HTML element in which the editor will be inserted
const container = document.getElementById('editor-container');

// A reference to a product in your application that the integration is connected to,
// replace it with yours
const productReference = "7846621020300";
// Getting details about the product integration
const details = await storefront.getIntegrationDetails(productReference);

// Loading the editor
await storefront.loadEditor(container, details);

// Handling the editing completion event
storefront.onFinish.subscribe(async (storefront, personalizationResults) => {
    alert("Completed");
});
```

--------------------------------

### Setup Method Declaration (C#)

Source: https://customerscanvas.com/dev/editors/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Configuration.Configuration

Declares the static Setup method for configuration. It accepts parameters for enabling CORS, specifying controller assemblies, providing additional bindings, and enabling attribute routes. This method implements the IConfiguration interface.

```csharp
public static void Setup(bool enableCors = false, IEnumerable<Assembly> controllerAssemblies = null, TypeRegistrationOrderedDict additionalBindings = null, bool enableMappingAttributeRoutes = true)
```

--------------------------------

### Initialize Design Editor Driver with Settings

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Initializes the UI Framework driver, specifying the base URL for the Design Editor instance. This is a prerequisite for loading and interacting with the editor. It requires the product definition and editor configuration.

```javascript
const settings = {
    customersCanvasBaseUrl: "https://example.com:44300/" };
}

const ecommerce = await driver.init(product, editor, config, settings, null, 1, { id: 'test-user' });
```

--------------------------------

### GET /api/files/get/{GUID}

Source: https://customerscanvas.com/dev/preflight/latest/web-api/get

Downloads a file from the server using its unique identifier (GUID).

```APIDOC
## GET /api/files/get/{GUID}

### Description
Downloads a file from the server by its GUID.

### Method
GET

### Endpoint
/api/files/get/{GUID}

### Parameters
#### Path Parameters
- **GUID** (string) - Required - The unique identifier of the file, including its extension.

### Request Example
```
GET /api/files/get/425a3537-2e59-450d-bbc2-484fcd3d63bd.pdf
```

### Response
#### Success Response (200)
- **File Content** (application/octet-stream) - The content of the file as a stream.

#### Response Example
```
Status Code: 200 OK
Content-type: application/octet-stream

[Binary file content]
```
```

--------------------------------

### Configure Design Editor Widget and Product Definition

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Configures the 'design-editor' widget to be inserted into the main panel. It specifies the product definition ID to load a specific design and sets the editor mode. This configuration is essential for displaying the correct design within the editor.

```javascript
const config = {
  "widgets": [
    {
      "name": "editor",
      "type": "design-editor",
      "params": {
        "initial": {
          "productDefinition": "5fe423ee2510eb0cfd293042",
          "editorConfig": {
            "initialMode": "Advanced"
          }
        }
      }
    }
  ],
  "steps": [
    {
      "name": "Editor",
      "mainPanel": {
        "name": "editor"
      }
    }
  ]
};
```

--------------------------------

### Widget Configuration Examples

Source: https://customerscanvas.com/dev/ui-framework/widgets/reference/index

Examples of configuration objects for various widgets within the Data-Driven Editor, including design selectors, finish buttons, galleries, HTML content, and input text fields.

```APIDOC
## Widget Configuration Examples

### Description
Provides configuration examples for different widgets used within the Data-Driven Editor.

#### IDesignSelectorConfig
Provides gallery properties for the `pim-design-selector` widget.

**Example:**
```json
{
  "type": "pim-design-selector",
  "name": "pim-design-selector",
  "params": {
    "designs": "{{ $['pim-ajax'].output.designs }}",
    "onChange": "{{ #function console.warn($['pim-design-selector']._); }}",
    "itemWidth": "200px"
  }
}
```

#### IFinishButtonConfig
Provides button properties for the `finish-button` widget.

**Example:**
```json
{
  "widgets": [
    {
      "type": "finish-button",
      "name": "finish-btn",
      "params": {
        "enabled": true,
        "onClick": [
          "{{ #function cart.submit() }}"
        ]
      }
    }
  ]
}
```

#### IGalleryConfig
Provides gallery properties for the `gallery` widget.

**Example:**
```json
{
  "widgets": [
    {
      "name": "bg-request",
      "type": "ajax",
      "params": {
        "url": "http://example.com/api/backgrounds/christmas",
        "method": "GET"
      }
    },
    {
      "name": "bg-gallery",
      "type": "gallery",
      "params": {
        "prompt": "Choose a background",
        "items": "{{$['bg-request'].response}}"
      }
    }
  ]
}
```

#### IHtmlConfig
Provides properties for the `html` widget.

**Example:**
```json
{
  "widgets": [
    {
      "name": "data-based",
      "type": "html",
      "title": "HTML with data",
      "params": {
        "data": [
          {
            "title": "Color",
            "value": "Space Gray"
          },
          {
            "title": "Shape",
            "value": "Rounded Rect"
          }
        ],
        "template": {
          "<>": "div",
          "html": [
            {
              "<>": "span",
              "text": "${title}: ",
              "style": "font-weight: bold"
            },
            {
              "<>": "span",
              "text": "${value}"
            }
          ]
        }
      }
    }
  ]
}
```

#### IImageCarouselConfig
Provides properties for the `image-carousel` widget.

**Example:**
```json
{
  "widgets": [
    {
      "name": "images",
      "type": "image-carousel",
      "params": {
        "images": [
          {
            "title": "Front Side",
            "url": "http://example.com/some/url/1/front.jpg"
          },
          {
            "title": "Back Side",
            "url": "http://example.com/some/url/1/back.jpg"
          }
        ]
      }
    }
  ]
}
```

#### IInputTextConfig
Provides properties for the `input-text` widget.

**Example:**
```json
{
  "widgets": [
    {
      "name": "quantity",
      "title": "Quantity",
      "type": "input-text",
      "params": {
        "defaultValue": "{{ order.quantity }}",
        "placeholder": "Quantity",
        "type": "number",
        "min": "1"
      }
    }
  ]
}
```
```

--------------------------------

### Insert Image into Smart Object via API (JavaScript/TypeScript)

Source: https://customerscanvas.com/dev/dynamic-image/latest/getting-started

This JavaScript code snippet shows how to use the 'node-fetch' library to send a POST request to the Dynamic Image API for inserting an image into a Smart Object. Ensure you have NodeJS and 'node-fetch' installed, and replace the placeholder URL.

```javascript
const fetch = require('node-fetch');
// Provide a request payload.
const payload = {
    template: "/mugs/preview-mockup-mug-left.psd",
    format: "png",
    data: {
        "Design\Left": {
            "type": "image",
            "image": "https://picsum.photos/id/425/1200/600",
            "resizeMode": "fill"
        },
        "Handle": {
            "type": "shape",
            "color": "#686343"
        } 
    }
};

// Make a request.
fetch("https://<your-dynamic-image-instance>/api/rendering/preview", {
    method: "POST",
    body: JSON.stringify(payload)                                      
})
    .then(res => res.json())
    // Print a link to the personalized preview image.
    .then(json => console.log(json));

```

--------------------------------

### Receive Edited Design Data via 'onSubmitted' Event

Source: https://customerscanvas.com/dev/ui-framework/getting-started

Subscribes to the 'onSubmitted' event handler of the ecommerce object to receive data when the user finishes editing. This allows for processing the edited design, such as creating an order in the e-commerce system. It iterates through line items to log order details.

```javascript
ecommerce.cart.onSubmitted.subscribe(function (data) {
  console.log("submitted");
  data.lineItems.forEach(function (order) {
    console.log(order);
  })
});
```

--------------------------------

### Initializing UI Framework and Product Data

Source: https://customerscanvas.com/dev/ui-framework/howto/integration-with-ecommerce

Shows how to initialize the CustomersCanvas UI framework by loading the default driver and editor. It details passing product, configuration, quantity, and user information to the driver's init method.

```javascript
const uiFrameworkBaseUrl = "https://staticjs-aurigma.azureedge.net/ui-framework/latest";
import moduleLoader from "https://staticjs-aurigma.azureedge.net/ui-framework/latest/moduleLoader.js";
document.addEventListener('DOMContentLoaded', async () => {

    const product = {
        /* Create it as explained above */
    };

    const config = {
        /* Create some config or download it from a server */
    };
    
    let initialQuantity = 1;

    // Load the default driver to your page. It is always distributed along with
    // the UI Framework in the drivers/default-driver.js file.
    const driver = (await moduleLoader.dynamicImport("ecommerceDriver", `${uiFrameworkBaseUrl}/drivers/default-driver.js`)).ecommerceDriver;
    
    const editor = (await moduleLoader.dynamicImportDefault("editor", `${uiFrameworkBaseUrl}/editor.js`)).editor;

    // Pass the product to this init method:
    const ecommerce = await driver.init(product, editor, config, /* settings */ {"customersCanvasBaseUrl": ""}, null, initialQuantity, /* user info*/ {"id": 'test-user'});
    ecommerce.products.current.renderEditor(document.getElementById("editor-container"));

	...
});

```

--------------------------------

### Create Product Object Model with C#

Source: https://customerscanvas.com/dev/editors/design-atoms-cs/intro

Demonstrates how to create a basic product object model using the `Aurigma.DesignAtoms.Model` library in C#. This involves initializing a `Product` object and adding a `Surface` to it.

```csharp
using Aurigma.DesignAtoms.Model;
var product = new Product {
    Surfaces = { new Surface(400, 400) }
};

```

--------------------------------

### Get Layer by Name with Start Index

Source: https://customerscanvas.com/dev/editors/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Canvas.LayerCollection

Retrieves a layer by its name, starting the search from a specified index. This is useful for finding subsequent layers with the same name.

```APIDOC
## GET /api/layers/{startIndex}

### Description
Retrieves a layer by its name, starting the search from a specified index. This is useful for finding subsequent layers with the same name.

### Method
GET

### Endpoint
/api/layers/{startIndex}

### Parameters
#### Path Parameters
- **startIndex** (Int32) - Required - The index from which to start the search.
#### Query Parameters
- **name** (String) - Required - The name of the layer to retrieve.

### Response
#### Success Response (200)
- **Layer** (Layer) - The found layer object.

#### Response Example
```json
{
  "layerName": "ExampleLayer",
  "layerId": "123e4567-e89b-12d3-a456-426614174000"
}
```
```

--------------------------------

### Initialize Viewer Controller with JavaScript

Source: https://customerscanvas.com/dev/editors/design-atoms-cs/intro

Shows how to initialize the `Viewer` component on the front end and connect it to a back-end API using JavaScript. This requires specifying the backend URL and a container element for the viewer.

```javascript
const backendUrl = "http://<yourInstanceUrl>";
const holder = document.querySelector("#viewer-container") as HTMLDivElement;
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});

```

--------------------------------

### Dynamic Image Request to Change Shape Layer Color

Source: https://customerscanvas.com/dev/dynamic-image/latest/getting-started

This example shows how to modify a specific layer's properties in a PSD mockup using the Dynamic Image API. By including a 'data' object in the request payload, you can target layers by name (e.g., 'Handle') and apply commands like changing the 'color' of a shape layer.

```HTTP
POST https://<your-dynamic-image-instance>/api/rendering/preview
{
    "template": "/mugs/preview-mockup-mug-left.psd",
    "format": "png",
    "data": {
        "Handle": {
            "type": "shape",
            "color": "#686343"
        }
    }
}

```

--------------------------------

### Create Product from Surface Definition

Source: https://customerscanvas.com/dev/editors/design-atoms-cs/howto/importing-templates

This comprehensive example demonstrates creating a two-page product using the 'FromDefinition' method. It shows how to load an IDML template for the first page and define an empty surface for the second page. It also includes setting up dependency injection and rendering the product to a PDF file.

```csharp
using System.IO;
using System.Drawing;
using Aurigma.DesignAtoms.Configuration;
using Aurigma.DesignAtoms.Convert;
using Aurigma.DesignAtoms.Rendering;
using Autofac;
using Newtonsoft.Json;

namespace DesignAtomsConsole
{
    class Program
    {
        static void Main(string[] args)
        {
            // Setup dependency injection.
            Injector.CurrentFactory = () => DefaultInjectorFactory.Create();

            // Instantiate TemplateParser.
            var parser = Injector.Instance.Resolve<ITemplateParser>();
            // Create a product based on a surface definition.
            var product = parser.FromDefinition(new[] {
                new SurfaceTemplate
                {
                    // Load an IDML template.
                    DesignFilename = "card.idml"
                },
                new SurfaceTemplate
                {
                    // Create an empty surface.
                    Size = new SizeF(300, 300)
                }
            });

            // Instantiate IProductRenderer.
            var renderer = Injector.Instance.Resolve<IProductRenderer>();
            using (var fileStream = File.Create("card.pdf"))
            {
                // Render the product to a file.
                renderer.RenderHiRes(fileStream, product);
            }
        }
    }
}
```

--------------------------------

### Get Provider Values from Injector

Source: https://customerscanvas.com/dev/backoffice/workflow-elements/handy-editor/web-component-api

Shows how to retrieve provider values using the editor's injector. This example demonstrates getting a 'STORE_TOKEN' from the injector and logging it.

```javascript
const store = editor.injector.get("STORE_TOKEN");
console.log(store);
```

--------------------------------

### Dynamic Configuration Example in UI Framework

Source: https://customerscanvas.com/dev/ui-framework/intro

Demonstrates how to use dynamic expressions within UI Framework configuration files to create a dynamic user interface. This example shows how a change in a 'gallery' widget can trigger a reload of the design in the 'editor' widget. The syntax allows for data binding and ensures the configuration remains valid JSON.

```json
{
   ...
  "design": "{{ $['gallery']._.name }}"
   ...
}
```

--------------------------------

### Integrate Customer's Canvas Storefront Editor with JavaScript

Source: https://customerscanvas.com/dev/backoffice/storefront/storefrontjs/getting-started

This HTML and JavaScript code demonstrates how to embed the Customer's Canvas storefront editor into a web page. It requires the storefront.main.js library and involves configuring tenant details, user authentication, and product information before loading the editor into a specified container. The integration also includes an event listener for when the editor is completed.

```html
<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="https://staticjs.blob.core.windows.net/back-office/storefront/1.2.16/storefront.main.js"></script>
    <script type="module">
      document.addEventListener("DOMContentLoaded", async function(event) {

        // Information about a user
        const user = { 
          // User ID in your application, replace it with yours
          id: "sam.wood", 
          // API access token generated in Customer's Canvas for your storefront user
          userToken: "ccApiToken"
        };

        const storefront = new Aurigma.StorefrontJS({
          // Customer's Canvas tenant ID (your account > Settings > Tenant, copy from Tenant ID field)
          tenantId: 1234567,
          // Storefront ID in Customer's Canvas (your account > Settings > Integrations)
          storefrontId: 1234,
          // Customer's Canvas base URL. Depending on your region it is either
          // https://customerscanvashub.com, https://eu.customerscanvashub.com, or https://au.customerscanvashub.com
          cchubUrl: "https://customerscanvashub.com/",
          user: user
        });

        const container = document.getElementById('editor-container');

        // A reference to a product in your application that the integration is connected to,
        // replace it with yours
        const productReference = "invitation";
        const details = await storefront.getIntegrationDetails(productReference);

        // An alternative way to get product details by SKU
        // const productSku = "10012";
        // const details = await storefront.getIntegrationDetailsBySku(productSku);

        await storefront.loadEditor(container, details);

        storefront.onFinish.subscribe(async (storefront, personalizationResults) => {
          alert("Completed");
        });

      });
    </script>
  </head>

  <body>
    <div id="editor-container" style="height:80vh;"></div>
  </body>

</html>
```

--------------------------------

### Install .Net Storefront API Client

Source: https://customerscanvas.com/dev/backoffice/api/StorefrontApi.Products

Installs the .Net client for the Storefront API, which includes PIM functionality. This client is part of the same packages as the main StorefrontAPI and resides in the `Aurigma.Storefront.Products` namespace. It is available via NuGet.

```powershell
Install-Package Aurigma.StorefrontApi.ApiClient
```

--------------------------------

### FromState Property

Source: https://customerscanvas.com/dev/editors/design-atoms-cs/reference/api/Aurigma.DesignAtoms.ImageProcessing.LineWidthMeasuring.Normals.NormalCaster.Transition

Gets the starting state of the transition. This property is read-only and returns a NormalCaster.State object.

```csharp
public NormalCaster.State FromState { get; }
```

--------------------------------

### Get Container by Name from PrintArea

Source: https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/printarea

Illustrates how to retrieve a specific container from a print area by its name using the `getContainer` method. This example loads the editor, gets the product, and then logs the container named 'foil'.

```javascript
 // Load the editor.
 const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition);
 // Get the product.
 let product = await editor.getProduct();
 // Display a container with the "foil" name.
 console.log(product.currentSurface.printAreas[0].getContainer("foil"));

```

--------------------------------

### Common Widget Configuration Example

Source: https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/icommonconfig

This example demonstrates how to define common configuration settings for widgets, including ranges for font size, tracking, and leading. It shows the structure for initializing these parameters.

```javascript
configuration = {
   widgets: {
       common: {
           fontSize: { max: 50, min: 5, step: 5 },
           tracking: { max: 100, min: -50, step: 25 },
           leading: { max: 50, min: 5, step: 5 }
       }
   }
};

```

--------------------------------

### Mockup Configuration

Source: https://customerscanvas.com/dev/preflight/reference/config

Configure mockup settings, including size, location, and image source.

```APIDOC
## Mockup Configuration

### Description
Configure mockup settings, including size, location, and image source.

### Object
`mockup`

### Properties
- **size** (object) - The width and height of the mockup, in points. If not set, the mockup fills the entire product. The real size should be >= product size.
- **location** (object) - The position of the upper-left corner of the mockup. Defaults to `{ x: 0, y: 0 }`.
- **image** (string) - The URL for web sources, filename for local sources, or ID/path for asset storage sources.
- **sourceType** (string) - The asset source type. Allowed values: `"assetStorage"`, `"local"`, `"web"`. Defaults to `"web"`.
```

--------------------------------

### Example Configuration for RichTextDialog with Fit Text Rectangle Settings

Source: https://customerscanvas.com/dev/editors/iframe-api/reference/design-editor-iframe/ifittextrectanglesettings

This example demonstrates how to configure the RichTextDialog widget, specifically setting the fitTextRectangle properties 'onAdd' and 'onUpdate' to 'shrinkOrStretchToContent'. This configuration is part of a larger editor setup.

```javascript
configuration = {
   widgets: {
       RichTextDialog: {
           bgColor: "lightgray",
           fitTextRectangle: {
               onAdd: "shrinkOrStretchToContent",
               onUpdate: "shrinkOrStretchToContent"
           },
           wysiwygMode: true
       }
   }
};
```