# Embedded Diagram

URL: https://smartcut.dev/docs/embed

> Embed a SmartCut cut list visualisation on your website using an iframe

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

```html
<!-- 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:

```javascript
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

```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

```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

```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;
}
```