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/bxI79qnVPLp/" 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...



Below are code snippets that demonstrate how to retrieve and communicate configuration values between the parent window and an embedded configurator. These code snippets facilitate the exchange of configuration data between the parent window and the embedded configurator, helping you display and capture user-customized product specifications on your website.

Code in the parent window​

In the parent window, you can use the following code to capture and display configuration values from the embedded configurator. This code listens for messages from the configurator and updates the displayed values accordingly.

// Get a reference to the HTML element where you want to display the configuration
const outputElement = document.getElementById('current-bookshelf-configuration')

// Add an event listener to listen for messages from the configurator
window.addEventListener(
  'message',
  (event) => {
    // Ensure that the message is coming from a trusted source (e.g., 'https://deployed.dynamaker.com')
    if (event.origin === 'https://deployed.dynamaker.com') {
      // Parse the received JSON data containing width, depth, and height
      const { width, depth, height } = JSON.parse(event.data)

      // Update the HTML element with the parsed values
      outputElement.innerHTML = `<strong>${width} x ${depth} x ${height}</strong>`
    }
  },
  false,
)

Code in the embedded configurator​

In the embedded configurator, use the following code to send the configuration values back to the parent window. This code ensures that the values are only sent when they are valid.

// Use the configurator's method to add a completion callback
configurator.addCompletionCallback((valid, values) => {
  // Check if the configuration is valid
  if (!valid) return

  // Check if the configurator is embedded in a different window
  if (window.parent !== window) {
    // Send the configuration values to the parent window as JSON
    window.parent.postMessage(values, '*')
  }
})

Sending values to the configurator​


You may need to send updated configuration values to the embedded configurator from your parent window. This enables the configurator to reflect any changes made by the user or your application. Below, we provide code snippets demonstrating how to achieve this.

The appearance of the standard DynaMaker UI can be changed (or hidden) completely in the UI-editor tab with some CSS snippets in STYLE. Other UI items (i.e. menu, quickbar or metrics) could be added too to enhance your integration!

Code in the parent window​

In the parent window, you can send updated values to the embedded configurator using the following code:

// Get references to relevant elements and the configurator iframe
const iframe = document.getElementById('configurator-iframe')
const widthInput = document.getElementById('widthInput')
const depthInput = document.getElementById('depthInput')
const heightInput = document.getElementById('heightInput')

// Define a function to send updated values when inputs change
const onChange = () => {
  const dataToSend = {
    type: 'dynamaker.onConfigurationUpdate',
    configuration: {
      width: Number(widthInput.value),
      depth: Number(depthInput.value),
      height: Number(heightInput.value),
    },
  }

  iframe.contentWindow.postMessage(dataToSend, '*') // Send the updated properties to the configurator
}

// Attach the onChange function to input change events
widthInput.addEventListener('change', onChange)
depthInput.addEventListener('change', onChange)
heightInput.addEventListener('change', onChange)

Code in the embedded configurator​

In the embedded configurator, you can listen for messages from the parent window and update the configurator's state accordingly:

// Add an event listener to listen for messages from the parent window
window.addEventListener('message', (event) => {
  if (event.data?.type === 'dynamaker.onConfigurationUpdate') {
      const properties = event.data.configuration
      myComponent.setProperties(properties) // Send properties to main component
      Studio.requestGeometryUpdate() // Request a geometry update to reflect the changes
    } catch (error) {
      console.error(error)
    }
  }
})