> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.sayduck.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 3D Viewer - Configurator API Examples

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