# API Reference

The configurator expects messages in the following format:

{% code lineNumbers="true" %}

```javascript
const message = {
  data: {
    method: string,
    parameters: {},
  },
  type: "colormass",
};
```

{% endcode %}

Sending a message can be done as follows:

{% code lineNumbers="true" %}

```javascript
window.onload = () => {
  cmConfigurator = document.getElementById("cmConfigurator").contentWindow;
  cmConfigurator.postMessage(message, "https://configurator.colormass.com");
};
```

{% endcode %}

| **Method name** | **Description and Parameters**                                                                                                                                                                                                                           |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| *showUi*        | <p>Shows or hides the default user interface.<br>- <code>value: boolean</code></p>                                                                                                                                                                       |
| *saveSnapshot*  | Initiates the download of a JPG file of the currently rendered view of the configurator.                                                                                                                                                                 |
| *options*       | Prints all the possible configuration options with their IDs to the console.                                                                                                                                                                             |
| *option*        | <p>Sets a specific configuration based on the parameters below.<br>- <code>groupId: string</code><br>- <code>variantId: string</code></p>                                                                                                                |
| *setMaterial*   | <p>Sets the material of the specific <code>variantId</code> to the <code>materialId</code> provided. This is only possible if the variant contains an overridable material.<br>- <code>materialId: string</code><br>- <code>variantId: string</code></p> |

## **Events**

In order to receive events from the iframe window, you have to initialize an event listener on the main window as follows:

{% code lineNumbers="true" %}

```javascript
window.onload = () => {
    window.addEventListener("message", receiveMessage, false);
}

function receiveMessage(message) {
    if (message.origin !== "https://configurator.colormass.com" ||
        message.data.type !== "colormass") return;
    const data = message.data.data;
    const methodName = data.method;
    const parameters = data.parameters;
    // Handle event based on the method's name and parameters
}
```

{% endcode %}

| **Event name**             | **Description and Parameters**                                                                                                                                                                                         |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| *loadingCompleted*         | Triggered when the configurator finished loading.                                                                                                                                                                      |
| *keydown*                  | <p>Triggered on the keydown event. Given that the main window cannot access the keydown event of the iframe directly, this makes it possible to capture a subset of those events.<br>- <code>parameters: {}</code></p> |
| *settingMaterialCompleted* | Triggered when setting a specific material using the *setMaterial* method finished.                                                                                                                                    |