This article shows you how to use the configurator API with example integrations.

Configurator API Examples

How to disable default picker?

<div style="height: 600px; width: 600px;">
  <sayduck-viewer
    product="bfb3fa80-00f2-013b-941b-2a321134e5e0"
    mode="configurator"
    hide-picker
  ></sayduck-viewer>
</div>
<script src="https://viewer.sayduck.com" type="module" async></script>

Create basic picker

api.configurator.createPicker(): HTMLElement

This will create a simple picker with buttons that change the variants. The elements themselves won't have any styling, you need style them for yourself. If you want more control over how the picker works/looks it's recommended to create your own picker.

Here's a list of classes of the elements created:

sayduck-picker - Container element
sayduck-configuration - Configuration
sayduck-configuration-label - Configuration label
sayduck-variant-button - Variant button
sayduck-variant-button-active - Variant active

Example integration: https://jsfiddle.net/uh3cL5e4/1/

<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
  }
  .sayduck-configuration {
    padding-top: 0;
    margin: 4px;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 1px 2px 1px #ccc;
    border-radius: 10px;
    overflow: hidden;
  }
  .sayduck-configuration-label {
    font-weight: 500;
    background: #006ab5;
    color: white;
    padding: 2px;
    padding-left: 8px;
  }
  .sayduck-variant-button-active {
    background: #888aff;
    color: white;
  }
  .sayduck-variant-button {
    outline: none;
    border: none;
    font-size: 12px;
    text-align: start;
    padding: 8px;
    transition: all 0.1s ease-in-out;
  }
</style>

<div style="height: 600px; width: 600px;">
  <sayduck-viewer
    product="bfb3fa80-00f2-013b-941b-2a321134e5e0"
    mode="configurator"
    hide-picker
  ></sayduck-viewer>
  <div id="picker"></div>
</div>
<script>
  window.addEventListener("sayduck.api-ready", (event) => {
    const api = event.detail.instance;
    const element = api.configurator.createPicker();
    document.getElementById("picker").appendChild(element);
  });
</script>
<script src="https://viewer.sayduck.com" type="module" async></script>

Integrate to existing picker

api.configurator.setActiveByUuid("variant-uuid");

This event will load the given variation when trigged. When integrating the configurator to an existing picker, you will need these events to each button that loads an option.

As each UUID is hard coded, this will add most stability to your interaction as the UUIDs will not change.

Example integration: https://jsfiddle.net/1tymk9er/

<div style="height: 600px; width: 600px;">
  <sayduck-viewer product="6d4315a0-cdcc-0139-af34-7a7ba4e508ed" 
  mode="configurator"
  quality-preset="quality"
  hide-picker
>
  </sayduck-viewer>
  
        <button id="btn1">
          SEAT - WHITE
        </button>
        <button id="btn2">
          SEAT - RED
        </button>
        <button id="btn3">
          LEGS - OAK
        </button>
        <button id="btn4">
          LEGS - WALNUT
        </button>
    </div>

   <script>
        let api;
        window.addEventListener('sayduck.api-ready', (event) => {
            api = event.detail.instance
            addToButton();
        });
		
       	function addToButton(){
            document.querySelector("#btn1").onclick = () => {
            	//SEAT - WHITE
       				api.configurator.setActiveByUuid("0aa3c2a0-34ae-013a-899a-369ef6649311");
            }
            document.querySelector("#btn2").onclick = () => {
            	//SEAT - RED
       				api.configurator.setActiveByUuid("16c349e0-cdce-0139-f4af-7a7ba4e508ed");
            }
            document.querySelector("#btn3").onclick = () => {
            	//LEGS - OAK
       				api.configurator.setActiveByUuid("e4ab2b30-34ad-013a-be13-369ef6649311");
            }
            document.querySelector("#btn4").onclick = () => {
            	//LEGS - WALNUT
       				api.configurator.setActiveByUuid("106f7510-34ae-013a-7862-369ef6649311");
            }
        }
		
 </script>
<script src="https://viewer.sayduck.com" type="module" async></script>

Updated on: 08/03/2023