DynaMaker Docs

DynaMaker Docs

  • dynamaker.com
  • Account

›Integration

Getting Started

  • Introduction
  • Dashboard
  • Before You Code

Training

  • Introduction
  • Tutorials

    • My First App
    • My First Drawing
    • My First Assembly
    • Presets, Test & Debug
    • User Interface
    • Factories

    How To

    • Download Files
    • Save & Load
    • Add Textures

Snippets

  • Introduction
  • Circular Pattern
  • Rectangular Pattern

Integration

  • Embedding
  • REST APIs
  • Quotations
  • Webhooks

Library

  • Introduction
  • SKYMATH
  • SKYSKETCH
  • SKYCAD
  • SKYPARAM
  • SKYUI
  • SKYDRAWING
  • PRESET
  • SKYEXPORT_POLY
  • STUDIO

Other

  • Changes 2021-02-17
  • Changes 2020-10-20
  • Did You Know...
  • FAQ

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


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)
    }
  }
})
← Rectangular PatternREST APIs →
  • Using The postMessage API
    • Getting values from the configurator
    • Sending values to the configurator
DynaMaker Docs
Docs
Getting StartedTrainingLibrary
Community
LoginExamplesLinkedIn
More
HomepageBlogNews
Copyright © 2021 Skymaker AB