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

# Web-component API

> This API allows you to interact with a web component through calls to its methods or to receive and modify data using its properties. This also includes events that the web component sends.

The API of the 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 `getElementByTagName(tag)`:

```js
const configurator = document.getElementByTagName("au-configurator").item(0);
```

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

```js
const choisesValues = editor.getChoices();
console.log(choisesValues);
```

## Methods

### init(configuration)

**Description**: Initializes the component after reading parameters from the workflow and opening a product.

**Arguments**:

- `configuration`: `IConfiguratorInitArgs`

**Returns**: `void`

**Example**:

```js
configurator.init(
    configVersion: 2,
    integration: {
        tenantId: <yourTenantId>,
        user: {
            id: <userId>,
            token: <userToken>
        },
        storefrontId: <yourStorefrontId>,
        cchubApiGatewayUrl: "https://api.customerscanvashub.com"
    },
    input: {
        productReferenceId: <externalProductReference>,
        productId: <ccProductId>
    },
    settings: {
        measureUnit: "mm",
        showUploadButton: false
    }
);
```

### getChoices()

**Description**: Returns a `HashMap` of the selected option values.

**Arguments**: none

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

**Example**:

```js
const choises = configurator.getChoices();
console.log(choises);
```

### setChoices(choices)

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

**Arguments**:

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

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

**Example**:

```js
await configurator.setChoices({ 'Color': ['green'] });
```

### getPrice()

**Description**: Returns data on the price of the selected option and quantity.

**Arguments**: none

**Returns**: [`LineItemCostDto`](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/configurator/output-data.md)

**Example**:

```js
const configuredPrice = configurator.getPrice();
```

### getCurrentSKU()

**Description**: Returns the SKU of the current product variant.

**Arguments**: none

**Returns**: `string`

**Example**:

```js
const currentSKU = configurator.getCurrentSKU();
console.log(currentSKU);
```

### getCurrentVariant()

**Description**: Returns the current `productVariantId`.

**Arguments**: none

**Returns**: `number`

**Example**:

```js
const productVariant = configurator.getCurrentVariant();
console.log(productVariant);
```

### getSpecParameters()

**Description**: Returns the mockup parameters.

**Arguments**: none

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

**Example**:

```js
const mockupParameters = configurator.getSpecParameters();
console.log(mockupParameters);
```

### showLoader(value)

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

**Arguments**:

- **value**: boolean

**Returns**: `void`

**Example**: This is how you can display the loader.

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

## Events

### loaded

**Description**: When the Configurator is loaded to the page and initialized, it triggers this event.

**Example**:

```js
configurator.addEventListener("loaded", event => console.log(event));
```

### submit

**Description**: The Configurator triggers this event when a customer has finished configuring the product. This event passes the price data and visual assets for the configured product. For reference, read the [Output data](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/configurator/output-data.md) topic.

**Example**: This is how you can handle this event:

```js
configurator.addEventListener("submit", event => {
    console.log(event);
});
```