Embedded Diagram

Embed an interactive cutting layout visualisation on your website using a simple iframe. The embed displays the optimised cut layout for a given calculation result and can communicate with your page via postMessage.

Quick Start

<!-- Replace the result value with your calculation job ID -->
<div id="smartcut-vis-message">Loading...</div>

<iframe
  id="smartcut-vis"
  src="https://cutlistevo.com/embed/?result=1733"
  allowtransparency="true"
  frameborder="0"
  height="0"
></iframe>

Set the src attribute dynamically using the jobId returned by the /v3/calculate API call:

const jobId = 1733 // returned by /v3/calculate
document.getElementById('smartcut-vis').src =
  `https://cutlistevo.com/embed/?result=${jobId}`

A live example is available at: https://cutlistevo.com/embed/?result=1733

Parameters

Pass parameters as query string values on the iframe src URL.

Parameter	Description
result	Required. The calculation job ID to display
dn	Set to true to disable the stock navigation controls
hs	Set to true to hide the stock information header

Colours

Customise the colour scheme using HEX values (without the # prefix).

Parameter	Description
pca	Part colour A
pcb	Part colour B
pch	Part colour on hover
pcs	Part colour when selected
sc	Stock (board) background colour
tc	Text colour

Example:

https://cutlistevo.com/embed/?result=1733&pca=BAD0F5&pcb=346AC9&pch=E09318&pcs=D35A5A&sc=EBEB58

iframe Messages

Communicate with the embed using the browser's postMessage API.

Messages from the iframe

Listen for these events on window:

Type	Description
resize	The embed has resized — w and h contain the new dimensions in pixels
loaded	The visualisation has loaded and a result was found — payload contains the stock IDs
noResult	No result was found for the given job ID
error	An error occurred — message contains the error text
partClick	A part was clicked — message contains part data

Messages to the iframe

Send these events to the iframe using contentWindow.postMessage:

Type	Fields	Description
navigate	stockID	Navigate to a specific stock item by its ID (e.g. '1.0')

Notes

• The embed must be hosted on a page served over HTTPS — it will not work on HTTP.
• The iframe height starts at 0 and is set dynamically by the resize message.

Full Example

HTML

<div id="smartcut-vis-message">Loading...</div>

<iframe
  id="smartcut-vis"
  src="https://cutlistevo.com/embed/?result=1733"
  allowtransparency="true"
  frameborder="0"
  height="0"
></iframe>

JavaScript

window.addEventListener('message', (e) => {
  if (!e.data) return
  if (e.data?.origin !== 'smartcut') return

  switch (e.data.type) {
    case 'resize':
      document.getElementById('smartcut-vis').style.height = e.data.h + 'px'
      break
    case 'loaded':
      document.getElementById('smartcut-vis-message').style.display = 'none'
      document.getElementById('smartcut-vis').style.visibility = 'visible'
      break
    case 'noResult':
      document.getElementById('smartcut-vis-message').innerText = 'No result found'
      break
    case 'error':
      document.getElementById('smartcut-vis-message').innerText = e.data.message
      break
    case 'partClick':
      console.log(e.data.message)
      break
  }
}, false)

// Navigate to a specific stock item
document.getElementById('smartcut-vis').contentWindow.postMessage(
  { type: 'navigate', stockID: '1.0' }
)

CSS

#smartcut-vis,
#smartcut-vis-message {
  width: 100%;
  max-width: 1000px;
}

#smartcut-vis {
  background-color: rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  visibility: hidden;
}