Custom variant picker

The Sayduck viewer variant picker is just an template. You can always create your own picker that suits your brand better.

Here is a link to an example variant picker: https://jsfiddle.net/t1o6scb8/

Hide Sayduck picker

Add "hide-picker":true option to the embed code.

Embed code

<div class="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;"
data-product-uuid="5d2d0360-7e6c-0139-85b6-5eab550b5db2" data-viewer-options='{"appearance":{"background":"gray","hide-picker":true}}'>
</div><script defer type="text/javascript" src="https://viewer.sayduck.com"></script>


Create picker design

To create your own picker, you can use simple HTML code. Below you can see one example of a variant picker.

Example picker design

<div id="container" style="position: absolute; bottom: 0; max-width: calc(100% - 62px); background: rgba(0,0,0,0.2); border-top-right-radius: 10px; padding: 16px;">
<button id="whiteBtn">White</button>
<button id="redBtn">Red</button>
</div>


Change variant when click button event

document.getElementById("whiteBtn").onclick = function() {
window.dispatchEvent(
new CustomEvent("sayduck.viewer.actions.showModel", {
detail: {modelUuid: "5d7c4b80-7e6c-0139-7db7-5eab550b5db2" }
})
);
}


Full HTML code:

<div class="sayduck-3d-viewer-wrap" style="position:relative;">
<div class="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;"
data-product-uuid="5d2d0360-7e6c-0139-85b6-5eab550b5db2" data-viewer-options='{"appearance":{"background":"gray","hide-picker":true,"enable-qr-code":true}}'>
</div><script defer type="text/javascript" src="https://viewer.sayduck.com"></script>
<div id="container" style="position: absolute; bottom: 0; max-width: calc(100% - 62px); background: rgba(0,0,0,0.2); border-top-right-radius: 10px; padding: 16px;">
<button id="whiteBtn">White</button>
<button id="redBtn">Red</button>
</div>
</div>

<script>
document.getElementById("whiteBtn").onclick = function() {
window.dispatchEvent(
new CustomEvent("sayduck.viewer.actions.showModel", {
detail: {modelUuid: "5d7c4b80-7e6c-0139-7db7-5eab550b5db2" }
})
);
}

document.getElementById("redBtn").onclick = function() {
window.dispatchEvent(
new CustomEvent("sayduck.viewer.actions.showModel", {
detail: {modelUuid: "630225d0-7e6c-0139-53ab-72b0740fd98a" }
})
);
}
</script>
Was this article helpful?
Cancel
Thank you!