Articles on: API

[Legacy] 3D Viewer Documentation

3D Viewer Documentation

Basic embed code

You can embed Sayduck's 3D Viewer in your site in a matter of seconds. All you need to do is copy the embed code from the embed & export tab, and paste it on your own site.

<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>

Container/viewer size
Decides the size of the 3D viewer in the webpage. This can be adjusted by changing the variable within the style.
<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;"

Product UUID
The product UUID decides which product will be loaded. On the Viewer Instant, you will also need to include the type of the product - variants or configurator
data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"

Viewer settings
Viewer settings are used to change the default UI and feature settings. Adding these is optional.

  "appearance": {
    "background": "white",
    "hide-photo-studio": true,
    "hide-embed": true    
  },
  "controls": {
    "no-pan": true
  }
}'```

**Script**
This script loads our 3D viewer to the page.
`<script type="text/javascript" src="https://viewer.sayduck.com"></script>`

### Configure viewer settings

There are a few options available when embedding the 3D Viewer in your website. All of these options can be found in the customize embed code tab and easily applied to the embed code.

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "background": "white",
    "hide-photo-studio": true,
    "hide-embed": true    
  },
  "controls": {
    "no-pan": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/customize-embed3_e0jhxe.png)

### Size

The viewer is fully responsive and mobile-compatible, so you can set the size best suited for your website. Of course, you can also define the viewer size through CSS – for example to be able to manage media queries – and fit the viewer in your responsive layouts.

By default, the inline style attributes are:

* **min-height: 450px**
* **min-width: 300px**
* **width: 100%**
* **height: 100%**

**Embed code**

style="min-height:450px;min-width:300px;width:100%;height:100%;"


### Background

By default, the 3D Viewer will display products in a "Gray" environment. However, if this does not fit your website's styling, there is the possibility to have a more neutral white background. Otherwise, if you want to have full control on the background (for example overlaying the rendered 3D on a picture or your own website's branding), you can use the transparent option which will make the 3D Viewer's background completely transparent.

**Parameter** `background`
**Accepted values** `white | light | gray | dark | transparent`
**Default value**	`gray`
**Example**	`"background": "transparent"`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "background": "transparent"
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/background_white_joan8s.png)

##### Background advanced

**Parameter** `background-advanced`
**Accepted values** `#fcba03` (hex value)
**Example** `"color": "#fcba03"`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "background-advanced": {
            "color": "#fcba03"
          }
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

**Parameter** `background-advanced`
**Accepted values** `imageUrl`
**Example** `"image": "imageURL"`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "background-advanced": {
            "image": "https://cdn.sayduck.io/a/shared_assets/files/000/774/646/ba36285b79a77429997f578e6f97ef37750bdcfffcbf77b2585d47985cd4a788-original.png"
          }
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

**Parameter** `background-advanced`
**Accepted values** `imageUrl`
**Example** ```"cubeMap": [
            "imageURL-positive-x.png",
            "imageURL-negative-x.png",
            "imageURL-positive-y.png",
            "imageURL-negative-y.png",
            "imageURL-positive-z.png",
            "imageURL-negative-z.png"
            ]```

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "background-advanced": {
            "cubeMap": [
            "https://staging-cdn.sayduck.io/a/shared_assets/files/000/174/577/65a65493e7d33aec67096dd19d4bcaaaaff6f2440e71bcc31b40a8e4e2885935-original.png",
            "https://staging-cdn.sayduck.io/a/shared_assets/files/000/174/578/ad95de735cc02e253796827e3dd31802c072e467c7e8f02c076aedbeed0fe9f1-original.png",
            "https://staging-cdn.sayduck.io/a/shared_assets/files/000/174/591/caa0397e70f05c9e382ead3890d07bc6efedd84246e2e2abbfb467d8b74c4930-original.png",
            "https://staging-cdn.sayduck.io/a/shared_assets/files/000/174/576/465e42116fbe97162356448ab2e3e6adb199e89a9bf35f9228c87293c1515329-original.png",
            "https://staging-cdn.sayduck.io/a/shared_assets/files/000/174/575/b5c2abc6fba655240ecdd25575f6cadd9166196368c62cb00f3edba168b730e9-original.png",
            "https://staging-cdn.sayduck.io/a/shared_assets/files/000/174/574/8aa6d13454df393c9d0ece6a7cc99b331e268d827ad7f310c546b700e6a78d43-original.png"
            ]
          }
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

##### Custom theme color

The custom theme color will change the color of the loading bar and the spin effect. Choose a color that fits your brand theme. 

**Parameter** `theme-color`
**Accepted values** 0-255 white | light | gray | dark | transparent
**Example**	`"theme-color":{"red":58,"green":217,"blue":205,"alpha":255}`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "theme-color":{"red":58,"green":217,"blue":205,"alpha":255}
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

### Action menu

The action menu can be found from the top right corner of the 3D viewer. The active tools available in the menu are Dimensions, Photo studio, Embed and Annotations. 

**Parameter** `hide-action-menu`
**Accepted values** `true | false`
**Default value**	`false`
**Example**	`"hide-action-menu": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "hide-action-menu": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

### Dimensions

The 3D Viewer supports product dimensions. When the dimensions button is clicked, the product dimensions will be displayed in the 3D Viewer, as can be seen below. Dimension values can be managed on Sayduck's delivery system, if you are the owner of the product or brand.

**Edit Properties > Dimensions**

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/dimensions_vattb7.gif)

###### Hiding the dimensions button

The 3D Viewer supports product dimensions. When the dimensions button is clicked, the product dimensions will be displayed in the 3D Viewer, as can be seen below.

**Parameter** `hide-dimensions`
**Accepted values** `true | false`
**Default value**	`false`
**Example**	`"hide-dimensions": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "hide-dimensions": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/dimentions_1mjo315.png)


###### Showing dimensions on page load

You can also decide to have the dimensions showing by default in the initial loaded scene by using the parameter show-dimensions-on-load. Note that if you both hide the dimensions button and show dimensions on page load, the user will not be able to hide the dimensions and they will always appear on top of the visualized product.

**Parameter** `show-dimensions-on-load`
**Accepted values** `false | true`
**Default value**	`false`
**Example**	`"show-dimensions-on-load":true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "show-dimensions-on-load":true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Dimensions API

**Show dimension**

`window.dispatchEvent(new CustomEvent("sayduck.viewer.actions.showModelDataDimensions"))`

**Hide dimensions**

`window.dispatchEvent(new CustomEvent("sayduck.viewer.actions.hideModelDataDimensions"))`

### Photo studio

###### Hide Icon

The 3D Viewer provides a Photo Studio feature, which enables the user to take and download pictures of the product or any of its details from any angle. A few typical view angles are also available as shortcuts.

**Parameter** `hide-photo-studio`
**Accepted values** `false | true`
**Default value**	`false`
**Example**	`"hide-photo-studio": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "hide-photo-studio": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/photostudio_6uc4b7.png)

**NB: Taking a photo sometimes crashes on devices with lower memory. As such, it is recommended to hide the Photo Studio feature on mobile devices.**

###### Request photo

**Available parameters**

```- format: "png"|"jpg"         // Optional, defaults to "png"

- keepPosition: true|false    // Optional. Does not reset the product to its initial position.

// Might result in a partial image (for example if the product is zoomed in).

- noCrop: true|false          // Optional. Keeps the whitespace around the product (for example if it is zoomed out).

- verticalAngle: [-90,90]     // Optional, defaults to 15.

- horizontalAngle:[-180,180]  // Optional, defaults to -35.

- width: 2048  // Optional, defaults to 4096.

- height: 2048  // Optional, defaults to 4096.

** Listen to photoTaken event**

document.addEventListener('sayduck.viewer.photoTaken', function(event) { console.log(event.detail) });

Request a photo

window.dispatchEvent(new CustomEvent('sayduck.viewer.actions.takePhoto', { detail: { format: 'jpg', keepPosition: true, noCrop: true, width: 2048, height: 2048 } }));

Example event.detail received:

  dataUrl: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...",
  verticalAngle: 15,
  horizontalAngle: -35,
}```

### Embed

The viewer by default has an embed icon that displays the viewer embed code. 

**Parameter** `hide-embed`
**Accepted values** `false | true`
**Default value**	`false`
**Example**	`"hide-embed": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "hide-embed": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/embedpng_xlwkmx.png)

### Annotations

Annotations are interactable notes that have a camera position and a position on your product. They are used to highlight and give additional information the most important parts of your product. Check out [annotations](/en/article/annotations-1kvkguw/) for more information.

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/annotationspng_18s3okk.png)

###### Hide annotations button

The 3D Viewer supports product annotations. When the annotations button is clicked, the annotations will be displayed in the 3D Viewer and can be then interacted with.

**Parameter** `hide-annotations`
**Accepted values** `true | false`
**Default value**	`false`
**Example**	`"hide-dimensions": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "hide-dimensions": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/annotationsembed_18bt1y8.png)

###### Show the annotations on load

You can also decide to have the annotations showing by default in the initial loaded scene by using the parameter show-annotations-on-load. Note that if you both hide the annotations button and show annotations on page load, the user will not be able to hide the annotations and they will always appear on top of the visualized product.

**Parameter** `show-annotations-on-load`
**Accepted values** `false | true`
**Default value**	`false`
**Example**	`"show-annotations-on-load":true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "show-annotations-on-load":true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

### Variants

###### Initial variant

You can select which variant should the 3D Viewer load first. This enables you to match the default variant with the version of the product on your own webpage. 

**Parameter** `initial`
**Accepted values** `[variant-uuid]`
**Example** `"initial": "[variant-uuid]"`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "variants": {
    "initial": "a4954830-306b-0138-000e-0a5b9944da42"
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Hiding variants

Select which variants you wish to include on your live 3D viewer. With this you do not have to delete and variants completely, but you can just hide them temporarily. 

**Embed code**

**Parameter** `include`
**Accepted values** `[variant-uuid]`
**Example** `"include": ["variant_uuid", "variant_uuid2", ...]`

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "variants": {
    "include": ["a4954830-306b-0138-000e-0a5b9944da42"]
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Hiding the picker

You can hide the variant picker. This will enable you to use your own HTML element for picking variants through the API.

**Parameter** `hide-picker`
**Accepted values** `false | true`
**Default value**	`false`
**Example**	`"hide-picker": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "hide-picker": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/variantpicker_1caslhz.png)

###### Change displayed variant

Change the displayed variant without reloading the viewer. May be used to create a new variant picker when used together with hide-picker.

```window.dispatchEvent(
  new CustomEvent("sayduck.viewer.actions.showModel", {
    detail: {modelUuid: "variantUuid" }
  })
); ```

Check out [Custom Variant Picker](https://help.sayduck.com/en/article/custom-variant-picker-778uxs/#1-custom-variant-picker) for more information.

| You can find variant UUID by selecting it on the product page.

###### Variant picker customization

Background color of the variant picker button.

**Parameter** `pickerBackground`
**Accepted values** `1-255`
**Default value** `rgba(255,255,255, 0.3)`
**Example** `"buttonBackground": "rgba(255,255,255, 0.3)"`

Variant picker text color.

**Parameter** `pickerTextColor`
**Accepted values** `color`
**Default value** `"black"`
**Example** `"pickerTextColor": "black"`

Button border thickness and color.

**Parameter** `border`
**Accepted values** `[px] [color]`
**Default value** `1px solid black`
**Example** `"border": "1px solid black"`

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "mobile-ui-settings": {
     "pickerBackground": "rgba(255,255,255, 0.3)",
     "pickerTextColor": "black",
     "border":  "1px solid black"
   }
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/800_1hb7gd0.png)

###### Reset camera on variant load

Camera will reset to initial zoom distance on each variant change. 

**Parameter** `reset-camera-on-variant-change`
**Accepted values** `false | true`
**Default value**	`false`
**Example**	`"reset-camera-on-variant-change": false`

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "behaviour":{
      "reset-camera-on-variant-change":true
      }
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```


### Web AR

The 3D viewer provides the option to direct users from web to AR with one-click. 

**Parameter** `hide-web-ar`
**Accepted values** `false | true`
**Default value**	`false`
**Example**	`"hide-web-ar": false`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "hide-web-ar": false
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/web_ar_helpdesk_6h8t07.png)

###### Desktop Web AR icon

Web AR icon opens QR code which opens the AR viewer when scanned on a mobile device.

**Parameter** `enableQrCode`
**Accepted values** `false | true`
**Default value**	`false`
**Example**	`"enable-qr-code": false`


```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "enable-qr-code": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/unnamed_1940lyu.png)

###### Show QR code on load

You can also decide to have the QR code showing by default in the initial loaded scene by using the parameter "show-qr-code-on-load". 

**Parameter** `show-qr-code-on-load`
**Accepted values** `false | true`
**Default value**	`false`
**Example**	`"show-qr-code-on-load":true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "show-qr-code-on-load":true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Web AR button customization

Displayed text in Web AR button.

**Parameter** `arText`
**Accepted values** `"text"`
**Default value** `"Discover in AR"`
**Example** `"arText": "Discover in AR"`

Background colour of the Web AR button.

**Parameter** `buttonBackground`
**Accepted values** `1-255`
**Default value** `rgba(255,255,255, 0.3)`
**Example** `"buttonBackground": "rgba(255,255,255, 0.3)"`

Button text color.

**Parameter** `buttonTextColor`
**Accepted values** `color`
**Default value** `black`
**Example** `"buttonTextColor": "black"`

Button border thickness and color.

**Parameter** `border`
**Accepted values** `[px] [color]`
**Default value** `1px solid black`
**Example** `"border": "1px solid black"`

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "mobile-ui-settings": {
     "arText": "Discover in AR",
     "buttonBackground": "rgba(255,255,255, 0.3)",
     "buttonTextColor": "black",
     "border":  "1px solid black"
   }
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/nopickeropen_1qx0ga.png)

###### Launch AR (for custom AR button)

You can create your own AR button and use the event below to launch the 3D viewer AR.

`window.dispatchEvent(new CustomEvent('sayduck.viewer.actions.launchWebAr'));`

###### Custom action button (iOS AR)

You can add a custom button to the AR quick look.

**Parameter** `title | subtitle | callToActionLabel`
**Accepted values** `text`
**Example values** `"title": "Test title" | "subtitle": "Test subtitle" | "callToActionLabel": "Buy"`

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "ios-ar-custom-action": {
      "title": "Test title",
      "subtitle": "Test subtitle",
      "callToActionLabel": "Buy"
    }
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

You can create a event that triggers when the user clicks the button.

`document.addEventListener("sayduck.viewer.iosArCustomAction.clicked", (e) => console.log(e.detail), false);`

###### Custom Web link (Android AR)

Add custom web link to your Android AR experience.

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "android-ar-custom-action": {
        "title": "Test title",
        "url": "https://www.example.com"
    }
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

### Hiding the hand hint

After the product has finished loading, a moving hand hint will attract the user's attention to the fact that they can interact with the 3D Viewer. In case you do not want that hint to be displayed, you can simply use the hide-hand-hint=1 parameter. In that case, the product will by default autorotate (which you can also disable by explicitly setting autorotate=0).

**Parameter** `hide-hand-hint`
**Accepted values**  `false | true`
**Default value**	`false`
**Example**	`"hide-hand-hint": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "hide-hand-hint": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/handhint_ywn2cw.png)

### Loading

###### Hide loading bar

**Parameter** `hide-loading-bar`
**Accepted values**  `false | true`
**Default value**	`false`
**example** `"hide-loading-bar": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "hide-loading-bar": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Load new product without reloading page

To load a new product without reloading the page, use this event. It updates the productUuid directly in the embed code. It is most commonly used in one page ecommerce themes.

Replace the productUuid with the that of your chosen product.

```window.dispatchEvent(
  new CustomEvent("sayduck.viewer.actions.update3dViewer", {
    detail: {productUuid: "productUuid]"}
  })
); ```

###### Click to load

The 3D viewer is only loaded after one clicks it. 

**Parameter** `show-click-to-load`
**Accepted values**  `false | true`
**Default value**	`false`
**example** `"show-click-to-load":true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "show-click-to-load": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/click-to-loadpng_1m3dl9f.png)

###### click-to-load-background-repeat

**Parameter** `click-to-load-background-repeat`
**Accepted values** `no-repeat | repeat`
**Default value**	`no-repeat`
**Example** `"click-to-load-background-repeat": "no-repeat"`

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "click-to-load-background-repeat": "no-repeat"
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### click-to-load-background-size

**Parameter** `click-to-load-background-size`
**Accepted values** `contain | cover`
**Default value**	`contain`
**Example** `"click-to-load-background-size": "contain"`

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "appearance": {
    "click-to-load-background-size": "contain"
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

### Camera

###### Set camera angle

Changes camera angle based on the input vertical and horizontal angle.

**Accepted values** verticalAngle: [-90,90] | horizontalAngle: [-90,90]

```window.dispatchEvent(new CustomEvent('sayduck.viewer.actions.setCameraAngles', 
	{ detail: { verticalAngle: 15, horizontalAngle: 90 } 
  }
));```

###### Disable zooming 

You can remove the ability for a user to zoom by scrolling the mouse wheel (mobile: Pinch in/out with your fingers).

**Parameter** `disable-zoom`
**Accepted values** `false | true`
**Default value**	`false`
**Example** `"no-zoom": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "controls": {
    "no-zoom": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Disable rotating

You can remove the ability for a user to rotate the product by clicking and holding the left mouse button (mobile: 1 finger drag).

**Parameter** `no-rotate`
**Accepted values** `false | true`
**Default value**	`false`
**Example** `"no-rotate": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "controls": {
    "no-rotate": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Disable panning

You can remove the ability for a user to move the product around by clicking and holding the right mouse button (mobile: 2-finger drag).

**Parameter** `no-pan`
**Accepted values** `false | true`
**Default value**	`false`
**Example** `"no-pan": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "controls": {
    "no-pan": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Click to zoom

Allow zooming without first clicking on the 3D Viewer. This option might interfere when the user is scrolling down the page.

**Parameter** `no-click-to-zoom`
**Accepted values** `true | false`
**Default value**	`false`
**Example** `"no-click-to-zoom": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "controls": {
    "no-click-to-zoom": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Two finger rotate

Rotation on mobile will require two fingers to prevent interference when the user is swiping to scroll down the page.

**Parameter** `two-finger-rotate`
**Accepted values** `true | false` 
**Default value** `false`
**Example** `"two-finger-rotate": true`

**Embed code**

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "controls": {
    "two-finger-rotate": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

### Light switch

###### Hide lights switch

**Parameter** `hide-toggle-lights`
**Accepted values** `true | false` 
**Default value** `false`
**Example** `"hide-toggle-lights": true`

```<div id="sayduck-3d-viewer-container" style="min-height:450px;min-width:300px;width:100%;height:100%;" data-product-uuid="f9340390-2087-0137-a0d4-6eec82cfb9d4"
data-viewer-options='{
  "controls": {
    "hide-toggle-lights": true
  }
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>```

###### Toggle light switch on/off 

```window.dispatchEvent(
  new CustomEvent("sayduck.viewer.actions.toggleSwitchableLights")
);```

# Dynamic 3D viewer

Dynamic 3D Viewer allows our users to update the Base Colour texture on an embedded 3D viewer directly with an javascript event. This can be used to create custom products like Mugs, Pillows or Paintings by letting your customers upload their own .jpg or .png texture to an template 3D product.

For more information [Dynamic 3D Viewer](/en/article/dynamic-3d-viewer-qyg58h/).

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/dynamic-3d-viewer_1g5u1fe.gif)

### Dynamic USDZ viewer

The dynamic AR is a completely different product of ours, called the Dynamic USDZ Viewer (with a similar but separate tier pricing than the Dynamic 3D Viewer), with a slightly different implementation.

For the dynamic USDZ viewer to work correctly, you should disable the web AR in the 3D Viewer, which does not support dynamically updated texture. 

For more information [Dynamic USDZ Viewer](/en/article/dynamic-usdz-viewer-r7yavz/).

# Configurator

To communicate with Sayduck's 3D Configurator, you can use the JavaScript API, which is based upon plain JavaScript events.. In the following sections, we detail the available messages, and their data format. You can setup event listeners to catch the events and react appropriately.

 For more information [Configurator API](/en/article/configurator-api-3po2ll/).

Updated on: 07/03/2023

Was this article helpful?

Thank you!