Display your products in 3D by embedding the Sayduck Platform 3D viewer to any HTML website!

Embedding products

Open Embed & Export tab and Publish your product.

Copy Embed code or click Configure embed options to customize your embed code



You can find more info about individual parameters below.

(Optional) Choose parametes you wish to include in your viewer.

Copy and paste the code to any html website!



If you do not have a website, you can test embedding the 3D viewer to https://jsfiddle.net

Parameters

Example embed code with multiple parameters

<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
},
"variants": {
"include": ["f9532a70-2087-0137-9141-6eec82cfb9d4"]
}
}'></div><script type="text/javascript" src="https://viewer.sayduck.com"></script>


Multiple Viewer Per Page Support

Function: Allows users to embed multiple 3D viewer to a single page.
Options: <div id="... ...> | <div class="... ...>
Default: <div id="... ...>

Embed code

<div class="sayduck-3d-viewer-container".... ...."https://viewer.sayduck.com"></script>
...
<div class="sayduck-3d-viewer-container".... ...."https://viewer.sayduck.com"></script>

Adjust viewer scale

You can adjust the viewer scale by editing the adjusting these values in the embed code.

Min-height: 450px
Min-width: 300px
Width: 100%
Height: 100%

3D Viewer Appearance

Background

By default, the 3D Viewer will display products in a "Studio" 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. In this situation, you can overlay the 3D Viewer's iframe on any other HTML element with the background or content of your choice.



Change background

Parameter: background-color
Options: white | studio | transparent
Default: studio

Embed code

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


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.



Hiding hand hint

Parameter: hide-hand-hint
Options: true | false
Default: false

Embed code

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


Variant picker

Displays the different variant options active in the product and allows users change variants directly from the viewer.



Hide variant picker

Parameter: hide-picker
Options: true | false
Default: false

Embed code

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


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. Dimensions values can be added from the Product Properties.



Hide dimensions icon

Parameter: hide-dimensions
Options: true | false
Default: false

Embed code

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


Photo studio

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.



Hide photo studio icon

Function: Used to take photos of the 3D product.
Options: true | false
Default: false

Embed code

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


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.

Embed

This feature adds the product embed code to the 3D viewer. Allowing everyone to copy and embed your product.



Parameter: hide-embed
Options: true | false
Default: false

Embed code

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


Hide action menu

Function: The tool menu on the top right of the 3D viewer.
Options: true | false
Default: false

Embed code

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


Hide loading bar

Function: Loading bar animation on a loading 3D viewer.
Options: true | false
Default: false

Embed code

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




Show click to load

You can decide to use the load-on-demand parameter, which makes the viewer load only the initial variant in a first step, and then download the data on demand only when the user selects a new variants. That makes the viewer load a lot faster initially and spares the user some unnecessary data download.

Parameter: show-click-to-load
Options: true | false
Default: false

Embed code

data-viewer-options='{
"appearance":{
"show-click-to-load":true
}
}'


Web AR

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



Function: Displays your product in AR.
Options: true | false
Default: false

Embed code

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


3D Viewer Camera Controls

Click to zoom

Function: Allow zooming without first clicking on the 3D Viewer. This option might interfere when the user is scrolling down the page.
Options: true | false
Default: false

Embed code

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


Zoom

Function: Use the mouse wheel to zoom in and out (mobile: Pinch in/out with your fingers).
Options: true | false
Default: false

Embed code

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


Pan

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: disable-pan
Options: true | false
Default: false

Embed code

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


Rotate

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: disable-rotate
Options: true | false
Default: false

Embed code

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


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
Options: true | false
Default: false

Embed code

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


Variants

Hiding variants

Define which variants you wish to include and the rest will be hidden.

Embed code

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


Change displayed variant (JavaScript)

Ability to change the displayed variant without reloading the viewer.

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


You can find variant UUID by selecting it on the product page.
Was this article helpful?
Cancel
Thank you!