Skip to main content

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 = `<strong>${width} x ${depth} x ${height}</strong>`
      }
    }, false)
</script>

</html>