Initialization

Last updated on March 3, 2025
•
3 minutes to read

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/template-editor/index.js	workflow-elements/template-editor/styles.css

Prerequisites

Before embedding the Template Editor on a page, create a product in your Customer's Canvas tenant as described in the Creating products topic.
Create a workflow of the Workflow Elements type as described in the Overview topic.

Adding an editor to a page

There are two aproaches to integrate an editor:

Dynamically as described in the integration basics
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 What are Workflow Elements.

<head>
    <script 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:

<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:

{
    "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, you can customize the appearance and behavior of the editor. The resources 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.
storefrontId: register your integration as described in the Integrations 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 topic.
user.token: generate a token as described in the Registering customers topic.

This is how the integration object may look like:

{
    "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:

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. Using the endpoint PrivateDesigns_GetAll, get the design properties. Then, you can open the editor using the design ID:

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:

<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.

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": "*" }
        }
    });
});