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.

data-viewer-options='{
  "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>

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>

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>

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

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>

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>

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>

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 for more information.

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>

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>

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

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>

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>

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>

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>

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>

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.

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.

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.

Updated on: 07/03/2023

Was this article helpful?

Thank you!