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
        } else if (dataObj.action === "set_model_preview_src") {
            const previewImage = document.createElement("img");
            previewImage.src = dataObj.src;
        }
    } 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
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
index – geometry index at the model, needs to be changed
id – material id in ROOMTODO base

Get model preview

JavaScript

iframeConfigurator.contentWindow.postMessage(
    `{"action": "create_model_preview", "width": "${width}", "height": "${height}"}`,
    "*"
);

This code will generate preview image and will send post message to parent site with image src.
width – width of the image in pixels to be generated
height – height of the image in pixels to be generated

demos

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