---
title: "Initialization | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/template-editor/initialization/"
---

# Initialization

> In this article, you'll learn how to integrate the Template Editor into your storefront and provide the initial data.

|Workflow Element|Tag|Script|Styles|
|---|---|---|---|
|Template Editor|`<au-template-editor>`|[workflow-elements/<wbr />template-editor/<wbr />index.js](https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements/template-editor/index.js)|[workflow-elements/<wbr />template-editor/<wbr />styles.css](https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements/template-editor/styles.css)|

## Prerequisites

1. Before embedding the Template Editor on a page, create a product in your Customer's Canvas tenant as described in the [Creating a New Product](https://customerscanvas.com/docs/hub/admin-guide/pim/creating-products.md#creating-a-new-product) topic.
2. Create a workflow of the Workflow Elements type as described in the [Workflow Elements Overview](https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements.md) topic.

## Adding an editor to a page

There are two aproaches to integrate an editor:

- Dynamically as described in the [integration basics](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements.md#integrating-workflow-elements)
- Statically as described below

### 1. Add links to the script and styles

Use the base URL from your tenant settings, the component name, and the script file names. To learn how to add these links dynamically, you can refer to the [Workflow Elements](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements.md).

```html
<head>
    <script defer src="https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements/template-editor/index.js"></script>
    <link href="https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements/template-editor/styles.css" >
</head>
```

### 2. Add a tag to the page

When you know in advance the workflow element tag, you can statically add it as follows:

```html
<body>
    <au-template-editor></au-template-editor>
</body>
```

### 3. Provide configuration parameters

To initialize the Template Editor, use the `workflowElement.init(config)` method, which takes integration settings, product properties, and parameters of the workflow element in the following format:

```json
{
    "configVersion": 2,
    "integration": {
        "tenantId": <yourTenantId>,
        "storefrontId": <yourStorefrontId>,
        "cchubApiGatewayUrl": "<yourCchubApiGatewayUrl>",
        "user": {
            "id": "<userId>",
            "token": "<userToken>"
        }
    },
    "input": {},
    "settings": {},
    "resouces": {}
}
```

The `integration` object contains the configuration settings for your Customer's Canvas account. The `input` specifies a design identifier that will be loaded into the editor. In the [`settings`](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/template-editor/settings.md), you can customize the appearance and behavior of the editor. The [`resources`](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/template-editor/resources.md) provide additional data like the root folders of assets.

#### Creating the integration object

The `integration` object has the following properties:

- `tenantId`: take this from the [tenant's settings](https://customerscanvas.com/docs/hub/admin-guide/settings/tenant.md).
- `storefrontId`: register your integration as described in the [Integrations Settings](https://customerscanvas.com/docs/hub/admin-guide/settings/integrations.md) topic.
- `cchubApiGatewayUrl`: define either `https://api.eu.customerscanvashub.com`, `https://api.au.customerscanvashub.com`, or `https://api.customerscanvashub.com`, depending on where your tenant is hosted — in Europe, Australia, or the USA.
- `user.id`: register your users as described in the [Registering customers](https://customerscanvas.com/docs/hub/dev-center/api/storefront/register-customers.md) topic.
- `user.token`: generate a token as described in the [Registering customers](https://customerscanvas.com/docs/hub/dev-center/api/storefront/register-customers.md) topic.

This is how the `integration` object may look like:

```json
{
    "integration": {
        "tenantId": 12345,
        "storefrontId": 123456,
        "cchubApiGatewayUrl": "https://api.customerscanvashub.com",
        "user": {
            "id": "john.wood",
            "token": "fcmVhZCIsIlN0b3JlZnJvbnRVc2Vyc19mdWxsIiwiU3R..."
        }
    }
}
```

#### Creating the input object

In the `input`, you can pass identifiers of public design templates or private user's designs to be loaded in the Template Editor.

##### Public templates

Public deign templates are stored under **Assets** > **Designs** in your Customer's Canvas account. To open a template in the Template Editor, you will need its ID. Get the ID from the asset properties and pass within `designTemplateId` to the `input` object:

```js
const input = {
    "designTemplateId": "61cd31a43056bcc33e919927"
};
```

##### Private designs

When the user has already edited a design template, the personalized design is saved in this user's private storage.

To access private storage, you will need the ID of the user who created the design and [that user's token](https://customerscanvas.com/docs/hub/dev-center/api/storefront/register-customers.md). Using the endpoint [`GET /api/storage/v1/private-designs`](https://customerscanvas.com/docs/hub/dev-center/api/asset-storage.md#tag/privatedesigns/GetAll), get the design properties. Then, you can open the editor using the design ID:

```js
const input = {
    "designId": "66bcc31cd39271a43cc3e919"
};
```

### 4. Set up external styles

To redefine the styles of the Template Editor, add a `<style>` element to the page after the **styles.css** link and modify the desired CSS properties. For example, to open the Template Editor with 10-pixel margins, use:

```html
<style>
    body { margin: 10px; }
</style>
```

### 5. Load the Template Editor

You can access the component's DOM element using `document.getElementsByTagName`. Note that methods of a workflow element can only be called after its script has been loaded.

```js
window.addEventListener("DOMContentLoaded", async () => {

    let templateEditor = document.getElementsByTagName("au-template-editor").item(0);

    templateEditor.init({
        "configVersion": 2,
        "integration": {
            "tenantId": 12345,
            "storefrontId": 123456,
            "cchubApiGatewayUrl": "https://api.customerscanvashub.com",
            "user": {
                "id": "john.wood",
                "token": "fcmVhZCIsIlN0b3JlZnJvbnRVc2Vyc19mdWxsIiwiU3R..."
            }
        }
        "input": {
            "designTemplateId": "61cd31a43056bcc33e919927"
        },
        "settings": {
            "itemBuilder": {
                "image": { "borderWidth": 10, "borderColor": "rgb(255, 0, 13)" }
            },
            "listSettings": { "bulletChar": "*" }
        }
    });
});
```