1 Embedding a product in a 3D Viewer
1.1 Basic embed code
1.2 Additional options
1.2.1 Size
1.2.2 Background
1.2.3 Action menu
1.2.4 Dimensions
1.2.4.1 Hiding the dimensions button
1.2.4.2 Showing dimensions on page load
1.2.5 Photo studio
1.2.5.1 Hide icon
1.2.5.2 Request image
1.2.6 Embed button
1.2.7 Annotations
1.2.7.1 Hiding the annotations button
1.2.7.2 Showing annotations on page load
1.2.8 Variants
1.2.8.1 Initial variant
1.2.8.2 Hiding variant
1.2.8.3 Hiding the picker
1.2.8.4 Change displayed variant
1.2.9 Web AR
1.2.10 Hiding the hand hint
1.2.11 Loading
1.2.11.1 Hide loading bar
1.2.12 User interactions
1.2.12.1 Disable zooming
1.2.12.2 Disable rotating
1.2.12.3 Disable panning
1.2.12.4 Click to zoom
1.2.12.5 Two finger rotate
1.3 Dynamic 3D viewer

1. Embedding a product in a 3D Viewer

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

1.2 Additional options

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>




1.2.1 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%;"

1.2.2 Background

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

Embed code

data-viewer-options='{
"appearance": {
"background": "transparent"
}
}'


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.



1.2.3 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

data-viewer-options='{
"appearance": {
"hide-action-menu": true
}
}'


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



Dimensions are always displayed in mm and/or in

1.2.4.1 Hiding the dimensions button

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

Embed code

data-viewer-options='{
"appearance": {
"hide-dimensions": true
}
}'


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.



1.2.4.2 Showing dimensions on page load

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

Embed code

data-viewer-options='{
"appearance": {
"show-dimensions-on-load":true
}
}'


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.

1.2.5 Photo studio

1.2.5.1 Hide Icon

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

Embed code

data-viewer-options='{
"appearance": {
"hide-photo-studio": true
}
}'


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.



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.

1.2.5.2 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 } }));

Example event.detail received:

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


1.2.6 Embed

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

Embed code

data-viewer-options='{
"appearance": {
"hide-embed": true
}
}'


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



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



1.2.7.1 Hide annotations button

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

Embed code

data-viewer-options='{
"appearance": {
"hide-dimensions": true
}
}'


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.



1.2.7.2 Show the annotations on load

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

Embed code

data-viewer-options='{
"appearance": {
"show-annotations-on-load":true
}
}'


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.

1.2.8 Variants

1.2.8.1 Initial variant

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

Embed code

data-viewer-options='{
"variants": {
"initial": "[variant_uuid]"
}
}'


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.

1.2.8.2 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", ...]

data-viewer-options='{
"variants": {
"include": ["variant_uuid", "variant_uuid2", ...]
}
}'


1.2.8.3 Hiding the picker

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

Embed code

data-viewer-options='{
"appearance": {
"hide-picker": true
}
}'


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



1.2.8.4 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" }
})
);


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

1.2.9 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

data-viewer-options='{
"appearance": {
"hide-web-ar": false
}
}




1.2.10 Hiding the hand hint

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

Embed code

data-viewer-options='{
"appearance": {
"hide-hand-hint": true
}
}'


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



1.2.11 Loading

1.2.11.1 Hide loading bar

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

Embed code

data-viewer-options='{
"appearance": {
"hide-loading-bar": true
}
}'


1.2.12 User interactions

1.2.12.1 Disable zooming

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

Embed code

data-viewer-options='{
"controls": {
"no-zoom": true
}
}'


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

1.2.12.2 Disable rotating

Parameter disable-rotate
Accepted values 0,1
Default value 0
Example "no-rotate": true

Embed code

data-viewer-options='{
"controls": {
"no-rotate": true
}
}'


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

1.2.12.3 Disable panning

Parameter disable-pan
Accepted values 0,1
Default value 0
Example "no-pan": true

Embed code

data-viewer-options='{
"controls": {
"no-pan": true
}
}'


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

1.2.12.4 Click to zoom

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

Embed code

data-viewer-options='{
"controls": {
"no-click-to-zoom": true
}
}'


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

1.2.12.5 Two finger rotate

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

Embed code

data-viewer-options='{
"controls": {
"two-finger-rotate": true
}
}'


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

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

Was this article helpful?
Cancel
Thank you!