---
title: "Web-component API | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/web-component-api/"
---

# Web-component API

> This API allows you to interact with a Simple Editor web component through calls to its methods or to receive and modify data using its properties.

The API of the Simple Editor web component will only be available after it has been loaded and initialized, and you will need to get the HTML element using a method available in the Document Object Model (DOM). For example, you can use `getElementsByTagName(tag)`:

```js
const simpleEditor = document.getElementsByTagName("au-simple-editor").item(0);
```

After obtaining the element, you can use this API as follows:

```js
const choicesValues = simpleEditor.getChoicesValues();
console.warn(choicesValues);
```

## Methods

### init(configuration)

**Description**: Initializes the component after reading parameters from the workflow file.

**Arguments**:

- `configuration`: `ISimpleEditorElementInitArgsV2`

**Returns**: `void`

**Example**:

```js
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": {}
});
```

### update(configuration)

**Description**: Updates the editor configuration without reloading the page.

**Arguments**:

- `configuration`: `IWorkflowElementInitArgs | IWorkflowElementInitArgsV2` — has the same structure as the argument of `init()`.

**Returns**: `void`

**Example**:

```js
simpleEditor.update(configuration);
```

### getChoices()

**Description**: Returns the selected option values grouped by option ID.

**Arguments**: none

**Returns**: `Record<number, number[]>`

**Example**:

```js
const choices = simpleEditor.getChoices();
console.log(choices);
// Example output:
// { 123: [23] }
```

### setChoices(choices)

**Description**: Sets the option values based on the input `HashMap`.

**Arguments**:

- **choices**: `Record<number, number[]>`

**Returns**: `Promise<void>`

**Example**:

```js
await simpleEditor.setChoices({ 123: [23] });
```

### getChoicesValues()

**Description**: Returns data on the selected options in the format: **option name : value name**. If multiple selections are possible, an array of selected value names is returned.

**Arguments**: none

**Returns**: `Record<string, string | string[]>`

**Example**:

```js
const choicesValues = simpleEditor.getChoicesValues();
console.log(choicesValues);
```

### getToggleChoices()

**Description**: Retrieves a record of toggle choices, where each key maps to an object containing a `title` and a `value` of type `ToggleValue`.

**Arguments**: none

**Returns**: `Record<string, { title: string; value: ToggleValue }>`

**Example**:

```js
const toggleChoices = simpleEditor.getToggleChoices();
console.log(toggleChoices);
// Example output:
// {
//   "Text color": { title: "Amber", value: {color: 'cmyk(0%,11%,100%,0%)'} }
// }
```

### showLoader(value)

**Description**: Enables and disables the component loader on the page.

**Arguments**:

- **value**: boolean

**Returns**: `void`

**Example**:

```js
simpleEditor.showLoader(true);
```

### setVariantBySku(sku)

**Description**: Sets the current variant by SKU.

**Arguments**:

- **sku**: string

**Returns**: `void`

**Example**:

```js
// Set the current variant to the one with SKU "SKU12345".
simpleEditor.setVariantBySku("SKU12345");
```

### saveDesign()

**Description**: Saves the current state of the design.

**Arguments**: none

**Returns**: `Promise<string>`

**Example**:

```js
const designId = await simpleEditor.saveDesign();
console.log(designId);
```

### getLineItem()

**Description**: Returns the line item with the current customization results.

**Arguments**: none

**Returns**: `Promise<ILineItem>`

**Example**:

```js
const lineItem = await simpleEditor.getLineItem();
console.log(lineItem);
```

### getQuantity()

**Description**: Returns the current quantity value.

**Arguments**: none

**Returns**: `number`

**Example**:

```js
const quantity = simpleEditor.getQuantity();
console.log(quantity);
```

### setQuantity(quantity)

**Description**: Programmatically sets the product quantity.

**Arguments**:

- **quantity**: number

**Returns**: `void`

**Example**:

```js
// Set the quantity to 5.
simpleEditor.setQuantity(5);
```

### getVDPData()

**Description**: Returns a `HashMap` of variables by surfaces.

**Arguments**: none

**Returns**: `Record<string, any>`

**Example**:

```js
const variables = simpleEditor.getVDPData();
console.log(variables);
```

### getCurrentSKU()

**Description**: Returns the current SKU value.

**Arguments**: none

**Returns**: `string`

**Example**:

```js
const sku = simpleEditor.getCurrentSKU();
console.log(sku);
```

### getPlaceholdersContent()

**Description**: Retrieves images from placeholders.

**Arguments**: none

**Returns**: `ImageItem[]`

**Example**:

```js
const placeholderImages = simpleEditor.getPlaceholdersContent();
```

### getTextItems()

**Description**: Returns all text elements of the design.

**Arguments**: none

**Returns**: `BaseTextItem[]`

**Example**:

```js
const textItems = simpleEditor.getTextItems();
console.log(textItems);
```

### getPIMOptions()

**Description**: Returns the product options loaded from PIM.

**Arguments**: none

**Returns**: `ProductOption[]`

**Example**:

```js
const pimOptions = simpleEditor.getPIMOptions();
console.log(pimOptions);
```

### getCurrentDesignVariant()

**Description**: Returns the current design variant.

**Arguments**: none

**Returns**: `ProductInformationDesign`

**Example**:

```js
const currentDesignVariant = simpleEditor.getCurrentDesignVariant();
console.log(currentDesignVariant);
```

## Properties

### injector

**Description**: Allows you to get the provider values.

**Type**: Injector

**Example**:

```js
const store = simpleEditor.injector.get("STORE_TOKEN");
console.log(store);
```