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

# Web-component API

> This API enables interactions with CC Options by calling its methods and accessing or modifying its properties. It also handles events sent by the web component.

The CC Options API becomes accessible only after it has finished loading and initializing. To utilize it, you must retrieve the HTML element using a method provided by the Document Object Model (DOM). For example, you can use `getElementByTagName(tag)`:

```js
const ccOptions = document.getElementByTagName("au-cc-options").item(0);
```

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

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

## Methods

### init(configuration)

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

**Arguments**:

- `configuration`: `ICcOptionsInitArgs`

**Returns**: `void`

**Example**:

```js
ccOptions.init(
    configVersion: 2,
    integration: {
        tenantId: <yourTenantId>,
        user: {
            id: <userId>,
            token: <userToken>
        },
        storefrontId: <yourStorefrontId>,
        cchubApiGatewayUrl: "https://api.customerscanvashub.com"
    },
    input: {
        externalProductId: <externalProductReference>
    },
    settings: {
        general: {
            quantityEnabled: true,
            quantityValues: "Any"
        }
    }
);
```

### getChoices()

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

**Arguments**: none

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

**Example**:

```js
const choises = ccOptions.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 ccOptions.setChoices({ 'Color': ['green'] });
```

### getOptionById(id)

**Description**: Returns extended information about the option by ID.

**Arguments**:

- **id**: `number | string`

**Returns**: `IOptionOutput`

**Example**:

```js
const option = ccOptions.getOptionById(75154);
console.log(option);
```

### getValueById(id)

**Description**: Returns extended information about the value by ID.

**Arguments**:

- **id**: `number | string`

**Returns**: `IOutputValue`

**Example**:

```js
const value = ccOptions.getValueById(266756);
console.log(value);
```

## Events

### loaded

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

**Example**:

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

### changed

**Description**: The CC Options triggers this event when a customer changes the values, it outputs the hashmap from the option and its selected values. For reference, read the [Output data](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/cc-options/output-data.md) topic.

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

```js
ccOptions.addEventListener("changed", event => console.log(event.detail));
```

For a single-choice option, the console output may lookk as follows:

```js
{
    "75154": [266756]
}
```