# Advanced Integration The configurator can be controlled programmatically by calling functions on the web component. You can use this API to for example to change configurations or to take a screenshot. ## Basic Example The following example loads a specific configurator by calling a function on the element instead of specifying the template uuid as html attribute: {% code lineNumbers="true" %} ```html ``` {% endcode %} We use the Custom Elements Api here (`customElements.whenDefined`) to make sure the functions are available. There is a more elaborate example available in the [sample repository](https://github.com/colormass/samples/tree/prod/configurator-webcomponents/api). In the repository, there is also a cm-configurator.d.ts file, which lists all available functions. A limitation of the web components currently is that they cannot immediately load a specific configuration. In case of the iframe configurator, this can be achieved with query parameters of the url. Should this feature be required, it can be added short-term. ## Listening to Events In order to get notified when something happens on the configurator, you can register different event listeners. The following code registers a callback that is invoked when the scene has finished loading: {% code lineNumbers="true" %} ```html ``` {% endcode %} The full section of the previous example is contained for context. After the scene provided to loadConfigurator has finished loading, the configurator will print all available parameters on the console. You can use those parameters to change configurations programmatically. ## Changing Configurations With the API of the web component, it is possible to change configurations dynamically without clicking on an item in the menu. For this purpose, you can use the parameters returned by cmConfigurator.getParameterlist(). Here is the (shortened) list of the parameters that was printed by the previous example: {% code lineNumbers="true" %} ```json [ { "id": "0fb20bb9-2284-4a8b-b6e0-db02ebc36742/ced9d80c-7103-43f2-a5ba-2d90e0c823b3", "type": "config", "name": "Seat", "values": [ { "id": "3d7420d9-6117-428f-ba41-890ecd157f8e", "name": "Blazer Darthmouth" }, { "id": "e6ddc079-8026-4e4f-95ca-6e2be019a0f6", "name": "Oceanic Atoll" }, { "id": "18479bf9-e393-4da9-9fc9-dfb37077550b", "name": "Lucia Tenom" }, ], "value": "087612ab-9a50-43e3-8626-b1c37322b499" }, { "id": "0fb20bb9-2284-4a8b-b6e0-db02ebc36742/60a5a88a-7701-4c10-819e-deb5f87f15c4", "type": "config", "name": "Back", "values": [ { "id": "c93e318c-88ee-4e8c-9b56-9c7075f53784", "name": "Main Line Flax Bayswater" }, { "id": "4c190056-bc69-49f5-a081-c82a86658124", "name": "Synergy Quilt Chemistry" }, ], "value": "42763086-b3e6-48cb-ac63-2172f2245bf9" } ] ``` {% endcode %} The configurator of this example has two configuration groups: *Back \_and \_seat*. Each has multiple variants. This is reflected in the above json array. In order to set those groups programmatically, you can use the following code: {% code lineNumbers="true" %} ```javascript ``` {% endcode %} The full api is illustrated in the [samples repository](https://github.com/colormass/samples/tree/prod/configurator-webcomponents) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.colormass.com/dev/configurator/web-components/advanced-integration.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.