Skip to content
zea-favicon
Zea Knowledge Base
Zea Knowledge Base
Zea Partner Program
Release Notes
Zea Parts

icon picker
Embedding Zea Parts




<!doctype html>
<html>
<head>
<title>Test Embed Parts</title>
<meta name="description" content="Our first page" />
<script type="module">
const hideHeader = window.document.getElementById('hideHeader')
const hideCart = window.document.getElementById('hideCart')
const hideLogo = window.document.getElementById('hideLogo')
const language = window.document.getElementById('language-select')

const urlInput = window.document.getElementById('url')
const iframe = window.document.getElementById('ih-embed')
const output = window.document.getElementById('output')

const updateUrl = () => {
iframe.src = `${urlInput.value}?embedded${
hideHeader.checked ? '&hideHeader' : ''
}${hideCart.checked ? '&hideCart' : ''}${
hideLogo.checked ? '&hideLogo' : ''
}${language.value ? '&language=' + language.value : ''}`
}

hideHeader.addEventListener('change', updateUrl)
hideCart.addEventListener('change', updateUrl)
hideLogo.addEventListener('change', updateUrl)
language.addEventListener('change', updateUrl)

urlInput.addEventListener('change', updateUrl)
function openInNewTab(url) {
window.open(url, '_blank').focus()
}
let mouseOverHighlighted = []
let mouseClickHighlighted = []
window.addEventListener('message', function (event) {
const data = event.data
output.textContent = JSON.stringify(data)

switch (data.type) {
case 'add-to-cart': {
break
}
case 'part-selected': {
break
}
case 'open-part-page': {
openInNewTab(
`${urlInput.value}?embedded&type=part-number&q=${data.detail.partNumber}`,
)
break
}
}
})
</script>
<meta name="keywords" content="html tutorial template" />
<style>
body {
background-color: linen;
}
.container {
display: flex; /* or inline-flex */
flex-direction: column;
justify-content: space-between;
padding: 10px;
}
#url {
width: 80%;
}
.wh-full {
width: 100%;
height: 100%;
}
#ih-embed {
width: calc(100% - 20px);
height: 600px;
border: none;
}
</style>
</head>
<body class="wh-full">
<h2>Embedded Parts Page Example</h2>
<div class="container">
<label for="name">Published Parts Url:</label>
<input type="text" id="url" name="url" required />
<div>
<label for="hideHeader">Hide Header:</label>
<input
type="checkbox"
id="hideHeader"
name="rotation"
required
size="100"
/>
</div>
<div>
<label for="hideCart">Hide Shopping Cart:</label>
<input
type="checkbox"
id="hideCart"
name="hideCart"
required
size="100"
/>
</div>
<div>
<label for="hideLogo">Hide Logo:</label>
<input
type="checkbox"
id="hideLogo"
name="hideLogo"
required
size="100"
/>
</div>
<div>
<select name="language" id="language-select">
<option value="">--Please choose a Language--</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="es">Spanish</option>
</select>
</div>
</div>
<iframe
src=""
id="ih-embed"
allow="xr-spatial-tracking"
allowfullscreen=""
></iframe>
<div id="output"></div>
</body>
</html>

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.