Product configurator

Example of code for the integration of Roomtodo planner into merchant's websites

HTML

<iframe
    frameborder="0"
    id="iframe"
    src="https://example.com/planner/matconfig">
</iframe>

<script>
let iframeConfigurator;

window.addEventListener("message", messageListener);

function messageListener(e) {
    try {
        const dataObj = JSON.parse(e.data);
        if (dataObj.action === "program_ready") {
            iframeConfigurator = document.getElementById("iframe");
            // Roomtodo configurator is ready
        }
    } catch (error) {
        console.error("Error parse JSON string!");
    }
}
</script>

Actions

Load model to the scene

JavaScript

iframeConfigurator.contentWindow.postMessage(
    `{"action": "add_model", "model_id": "${modelId}"}`, "*"
);

This code will add a model to the scene
variable modelId – model id in ROOMTODO base

Set material for the model's geometries

JavaScript

iframeConfigurator.contentWindow.postMessage(
    `{"action": "set_material", "geometry_index": "${index}", "material_id": "${id}"}`,
    "*"
);

This code will set material to the geometry
variable index – geometry index at the model, needs to be changed
variable id – material id in ROOMTODO base

demos

https://matconfig.realist.digital/3227.html
https://matconfig.realist.digital/254.html