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

# Initialization

> In this article, you'll learn how to embed the Simple Editor as a web component on a page (store, website, etc.), as well as the settings necessary for its operation. We will assume that the workflow file contains a single workflow element in a file, `simple-editor`.

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

## Prerequisites

1. Before embedding the Simple Editor on a page, create a PIM 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. To configure the editor, 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.
3. To launch the Simple Editor, you need a URL linking to the Workflow Elements library. In the user interface, you can find this link through **Settings** > **Applications** > **Workflow Elements URL**. In real applications, get the application URLs by using the endpoint [`GET /api/storefront/v1/tenant-info/applications`](https://customerscanvas.com/docs/hub/dev-center/api/storefront.md#tag/tenantinfo/GetApplicationsInfo).

    This URL will look as follows:

    `https://staticjs-aurigma.azureedge.net/libs/<environment>/workflow-elements/<application>`

## Adding an editor to a page

There are two methods 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 script and styles

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

Add styles to the page head.

```html
<html>
  <head>
    <link href="https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements/simple-editor/styles.css" rel="stylesheet" type="text/css">
    ...
  </head>
  ...
```

Place the script in the `<body>` tag after all the main content.

```html
<body>
  ...
  <script defer src="https://staticjs-aurigma.azureedge.net/libs/us/workflow-elements/simple-editor/index.js"></script>
</body>
```

This example hardcodes the `us` environment, which matches a tenant hosted on the US servers with the Simple Editor deployed.

:::important
The environment of the Workflow Elements must match the environment of your tenant. So, if your tenant is deployed on the European servers, specify `eu` here. For Australian servers, specify `au`.
:::

### 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-simple-editor></au-simple-editor>
</body>
```

### 3. Provide configuration parameters

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

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

The `settings`, `resources`, and `localization` objects are usually taken from workflow files in your tenant. You can retrieve a workflow file specified for a product by using the endpoint [`GET /api/storefront/v1/products/{id}/personalization-workflow`](https://customerscanvas.com/docs/hub/dev-center/api/storefront.md#tag/products/GetPersonalizationWorkflow) as described in the [Starting personalization session](https://customerscanvas.com/docs/hub/dev-center/scenarios/online-store/starting-personalization-session.md). To learn how you can configure the editor appearance, refer to the [Simple Editor Settings](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/settings.md) topic.

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

The `input` contains product properties to load the product into the editor. These properties allows you to retrieve products defined in Customer's Canvas in two ways. Let's take a look at them.

##### Product reference

If you integrate Customer's Canvas with a standard e-commerce platform, like Shopify, you can load the editor based on a product ID from that system. In this scenario, Customer's Canvas uses the external product ID to link the product, as described in the [Product Links](https://customerscanvas.com/docs/hub/admin-guide/pim/products-links.md) article. 

To get such an external product reference, you can call the `api/storefront/v1/product-references/ext` endpoint.

To load external products to the editor, pass the following properties to the `input`:

- `productReferenceId` is a product ID in an e-commerce system.
- `productId` is a product ID in Customer's Canvas.

```js
const input = {
    "productReferenceId": "8255218868440",
    "productId": 2502
};
```

The `productId` property is optional here. However, it's highly recommended to use it, as it allows fetching product variants earlier, reducing the editor initialization time.

##### PIM data

Use this approach with custom e-commerce integrations, when an external system knows the product ID from Customer's Canvas PIM module. In this case, you create products in Customer's Canvas and receive a product list in the admin panel of your store. You can also use the Storefront API to get a product list `/api/storefront/v1/products` and product links `/api/storefront/v1/products/{id}/links` endpoint.

The `input` object will have the following properties:

-  `productId` is a product ID in Customer's Canvas.
-  `productLinkId` is a Cusomer's Canvas product link identifier.

```js
const input = {
    "productId": 2502,
    "productLinkId": 26468
};
```

Note that the product link is optional here. For example, you can load the Simple Editor to preview a PIM product just by using its `productId` from Customer's Canvas:

```js
const input = {
    "productId": 2502
};
```

### 4. Load the 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
document.addEventListener("DOMContentLoaded", async () => {

    let simpleEditor = document.getElementsByTagName("au-simple-editor").item(0);

    simpleEditor.init({
        "configVersion": 2,
        "integration": {
            "tenantId": 12345,
            "storefrontId": 123456,
            "cchubApiGatewayUrl": "https://api.customerscanvashub.com",
            "user": {
                "id": "john.wood",
                "token": "fcmVhZCIsIlN0b3JlZnJvbnRVc2Vyc19mdWxsIiwiU3R..."
            }
        },
        "input": {
            "productId": 2502
        },
        "settings": {
            "pageSelector": { "enabled": true },
            "options": { "disableUnavailable": true }
        },
        "resources": {}
    });
});

```

### 5. Handle the output

To receive data from the component, subscribe to the `submit` event.

```js
simpleEditor.addEventListener("addtocart", event => console.log(event));
```

To learn more about the result, refer to the [Simple Editor Output Data](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/output-data.md) topic.