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.

Example

Try changing the configuration of the bookshelf below! If everything works as expected, the values will be updated via the postMessage API: Loading...


Snippets

Here are the code snippets used in the bookshelf example above:

// 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 { length, depth, height } = JSON.parse(event.data)
    outputElement.innerHTML = `<strong>${length} 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), '*')
  }
})
← Rectangular PatternREST APIs →