Embedding Your Dynamic Tool
An iframe can be used to integrate a DynaMaker project with your web page. In the simple case where you just embed the
configurator, all you have to do is to set the src
of the iframe element so that it points to your project URL.
<iframe src="https://deployed.dynamaker.com/applications/nlG3smhahc2/" width="100%" height="500px"></iframe>
Using The postMessage
API
You can send information back and forth between your web page and the embedded configurator by using the postMessage API. This is a very effective approach and best suitable when your integration (or part of it) does not require protected business logic to be done on the server.
Getting values from the configurator
Try changing the configuration of the bookshelf below! If everything works as expected, the values will be updated via
the postMessage
API: Loading...
Here are the code snippets used to get values from the configurator:
- in the parent window (this page)
const outputElement = document.getElementById('current-bookshelf-configuration')
window.addEventListener('message', (event) => {
if (event.origin === 'https://deployed.dynamaker.com') {
const { width, depth, height } = JSON.parse(event.data)
outputElement.innerHTML = `<strong>${width} x ${depth} x ${height}</strong>`
}
}, false)
- in the embedded configurator
configurator.addCompletionCallback((valid, values) => {
if (!valid) return
if (window.parent !== window) {
window.parent.postMessage(JSON.stringify(values), '*')
}
})
Sending values to the configurator
Snippets
Here are the code snippets used to send values to the configurator:
// in the parent window (this page)
const iframe = document.getElementById('configurator-iframe')
const widthInput = document.getElementById('widthInput')
const depthInput = document.getElementById('depthInput')
const heightInput = document.getElementById('heightInput')
const onchange = () => {
const properties = {
width: Number(widthInput.value),
depth: Number(depthInput.value),
height: Number(heightInput.value),
}
iframe.contentWindow.postMessage(JSON.stringify(properties), '*')
}
widthInput.onchange = onchange
depthInput.onchange = onchange
heightInput.onchange = onchange
// in the embedded configurator
window.addEventListener('message', (event) => {
if (typeof event.data === 'string' && event.data.length > 0) {
try {
const json = JSON.parse(event.data)
ACTIONS.setMainComponentProperties(json)
Studio.requestGeometryUpdate()
Studio.requestLightweightGeometryUpdate()
} catch (error) {
console.error(error)
}
}
})
Example
You can use this example as reference and implement additional features to it. It contains the following information:
<!DOCTYPE html>
<html>
</head>
<body>
Data from DynaMaker: <span id="current-bookshelf-configuration"><strong>1453 x 300 x 1500</strong></span></p>
<iframe class="dropshadow no-border" width="100%" height="500px" src="https://deployed.dynamaker.com/applications/bxI79qnVPLp/"></iframe>
</body>
<script>
const outputElement = document.getElementById('current-bookshelf-configuration')
window.addEventListener('message', (event) => {
if (event.origin === 'https://deployed.dynamaker.com') {
const { width, depth, height } = JSON.parse(event.data)
outputElement.innerHTML = ``
}
}, false)
</script>
</html>