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.parent.postMessage(JSON.stringify(values), '*')
  }
})

Sending values to the configurator

Width Depth 300 mm 400 mm 500 mm Height

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)
    }
  }
})