1 - SmartCut Embed.md

SmartCut embed

Embed a cutlist layout on your website using the SmartCut API.

More detail at - SmartCut

An example result is available using the iframe src link below:

https://cutlistevo.com/embed/?result=1733

Set the iframe src attribute using javascript to change the displayed result to the id returned by the 'calculate' API call.

iframe messages

You can communicate with the iframe using window.postMesage(). See the javascript file below for some examples.

Messages sent from the iframe include:

• resize - passes the new width and height as 'w' and 'h'
• loaded - when the visualisation has loaded and a result found, stock ids are send as payload to help if creating an external navigation
• noResult - when no result has been found
• error - any error
• partClick - when a part has been clicked - various data included

Messages which can be sent to the iframe include:

• navigate - pass the stock id as 'stockID' to navigate to a particular stock item, use the stackedStock passed with the loaded event as the list of stock ids which can be used

Parameters

Parameters can be sent with the request, which include the colours listed below and the following:

• dn - disable the stock navigation when set to true
• hs - hide the stock information at the top

Colours

Can be styled to suit your brand using additional parameters, which accept a HEX colour value (without the # symbol)

• pca - part colour A
• pcb - part colour B
• pch - part colour hover
• pcs - part colour selected (also nav selected colour)
• sc - stock colour (also nav primary colour)
• tc - text colour

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

Notes

• The embed must be present on a page using HTTPS otherwise it will not work

2 - page.html

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

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

3 - script.js

//listen to these events from the iframe
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
);

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

4 - style.css

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

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