API Reference

The configurator expects messages in the following format:

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

Sending a message can be done as follows:

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

Method name	Description and Parameters
showUi	Shows or hides the default user interface. - value: boolean
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	Sets a specific configuration based on the parameters below. - groupId: string - variantId: string
setMaterial	Sets the material of the specific variantId to the materialId provided. This is only possible if the variant contains an overridable material. - materialId: string - variantId: string

Events

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

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
}

Event name	Description and Parameters
loadingCompleted	Triggered when the configurator finished loading.
keydown	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. - parameters: {}
settingMaterialCompleted	Triggered when setting a specific material using the setMaterial method finished.