Web-component API

• Last updated on July 24, 2025
• •
• 2-3 minutes to read

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 getElementByTagName(tag):

const simpleEditor  = document.getElementByTagName("au-simple-editor").item(0);

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

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:

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

getChoices()

Description: Returns a HashMap of the selected option values.

Arguments: none

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

Example:

const choices = simpleEditor.getChoices();
console.log(choices);

setChoices(choices)

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

Arguments:

• choices: Record<number, number[]>

Returns: Promise<void>

Example:

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<number, number[]>

Example:

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:

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:

simpleEditor.showLoader(true);

setVariantBySku(sku)

Description: Sets the current variant by SKU.

Arguments:

• sku: string

Returns: void

Example:

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

const designID = simpleEditor.saveDesign();
console.log(designID);

getQuantity()

Description: Returns the current quantity value.

Arguments: none

Returns: number

Example:

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

setQuantity(quantity)

Description: Programmatically sets the product quantity.

Arguments:

• quantity: number

Returns: void

Example:

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

getVDPData()

Description: Returns a HashMap of variables by surfaces.

Arguments: none

Returns: Record<string, any>

Example:

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

getCurrentSKU()

Description: Returns the current SKU value.

Arguments: none

Returns: string

Example:

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

getPlaceholdersContent()

Description: Retrieves images from placeholders.

Arguments: none

Returns: ImageItem[]

Example:

const placeholderImages = simpleEditor.getPlaceholdersContent();

getTextItems()

Description: Returns all text elements of the design.

Arguments: none

Returns: BaseTextItem[]

Example:

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

getCurrentDesignVariant()

Description: Returns the current design variant.

Arguments: none

Returns: ProductInformationDesign

Example:

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

Properties

injector

Description: Allows you to get the provider values.

Type: Injector

Example:

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