3D Viewer - Embed code
The sayduck viewer is a web component built with LIT element. It consists of three elements container, sayduck-viewer and script.
To embed the sayduck viewer on your site, copy and paste the Embed code to your website.
Example embed code
Decides the size of the 3D viewer on the webpage. This can be adjusted by changing the variable within the style.
This is the element that loads the 3D viewer based on the added viewer settings. In the next section, we list all the available viewer settings.
The script loads our 3D viewer to the page.
To add Viewer settings, one needs to add the parameter within the <sayduck-viewer> element. The only mandatory parameters are product and mode.
These settings can also be added using the Configure embed code menu.
product="f9340390-2087-0137-a0d4-6eec82cfb9d4"
The viewer loads products based on their unique id (uuid).
mode="variants" | "configurator"
Products are categorized into two types - variants and configurators.
Products with incorrect mode will not load
quality-preset='performance'
There are now two quality options for the viewer - performance & quality.
performance Reduced rendering and texture quality for customers looking for the optimal performance
quality Improved rendering and visual quality for customers looking for the optimal visual experience
background="light" | "gray" | "dark" | "white" | "transparent"
Changes the background colour of the 3D viewer.
Transparent background will use the webpage background color
background="#add8e6" | "rgb(173,216,230)" | "LightBlue"
Changes background to any RGB value with a hex code, rgb value or color name.
background-image="image-url"
Changes viewer background to an image URL.
theme-primary-colour="rgba(255,0,0,1)"
theme-secondary-colour="rgba(0,0,255,1)"
It changes primary and secondary color to any RGB(1-255) A (0-1) value.
hide-product-info
Removes product and brand name.
hide-loading
Hides the loading animation in the 3D viewer.
hide-controls-hint
Removes control hint element displayed in the middle of the 3D viewer after loading has finished. This element is used to show that the 3D viewer is intractable.
hide-picker
Removes Sayduck default variant and configurator picker. used when building a custom picker using the 3D viewer API.
open-picker-on-load
Loads 3D Viewer with variant and configurator picker.
The Action menu refers to the features listed on the right side of the 3D viewer.
hide-action-menu
Removes all the features found in the highlighted menu.
The Web AR button initiates AR on iOS and Android devices and loads a QR code when used on the desktop.
Each device uses an external AR viewer - AR Quick Look for iOS and Scene Viewer for Android.
hide-qr-code
Removes the AR button on the desktop.
hide-web-ar
Removes the AR button on mobile (iOS/Android).
qr-code-on-load
The QR code is displayed in the initial viewer load.
ar-ios-title='Title'
Title of the action bar.
ar-ios-subtitle='Subtitle'
The subtitle of the action bar.
ar-ios-call-to-action='Buy'
Call to action button on the right.
api.scene.iosArCustomActionClicked();
You can create an event that is triggered when the user clicks the button.
ar-android-title='button-text'
Tile of the action bar.
ar-android-url='https://example.com'
Website URL that opens when user clicks Visit.
Annotations are 3D notes that are added to the product to give extra information when clicked.
hide-annotations
Removes show annotation from the action menu.
annotations-on-load
Loads the 3D viewer with Annotations enabled.
Your product Dimensions can be added to your Product properties and then displayed in the 3D Viewer.
When no values are added, the Show dimensions button will display the product's real dimensions.
real-dimensions
Display the product's real dimensions instead of the values added to the Product properties.
hide-dimensions
Removes the Show dimensions button from the action menu.
dimensions-on-load
Displays dimensions when 3D Viewer is loaded.
hide-embed
Removes a show embed button from the action menu.
hide-photo-studio
Removes the screenshot button from the action menu.
hide-toggle-lights
Removes the button to switch the light (on / off ) which is marked as switchable and removes emissive textures.
Changes camera angle and position to the preset location.
hide-camera-positions
Removes a button to show camera positions from the action menu.
camera-positions-on-load
Loads the Camera position element when the 3D viewer is loaded.
hide-fullscreen
Removes button to toggle fullscreen from the action menu.
localization-source="URL-to-json-file"
Allows customers to change the text used in the 3D viewer by adding a viewer setting to the embed code with a JSON file.
Example json file
disable-pan
Removes pan interaction (right-click+move mouse)
disable-rotation
Removes rotation (left-click+move mouse).
disable-zoom
Removes zooming (mouse scroll)
auto-rotate-delay="3000"
Indicates the time it takes for the auto-rotation to start after interaction in milliseconds (ms).
disable-click-to-zoom
The viewer no longer needs interaction before zoom works.
two-finger-rotate
Requires the user to use two fingers to rotate the 3D viewer.
loading-strategy='defer'
Changes the loading strategy for Variants.
"defer" Prioritizes loading the first variant and keeps downloading variants when the page is idle. (default)
"eager" Shows a loading overlay until all variants are loaded.
"lazy" Only loads the first variant and other variants are loaded when selected. This is not yet supported in configurators.
click-to-load
Loads product data only after the button has been clicked.
click-to-load-button-url='https://example.com/image.jpg'
Updates click to load button.
include-variants='["variant-uuid","variant-uuid2"]'
Choose variants you want to load in the 3D Viewer.
initial-variant="variant-uuid"
Choose the first variant loaded in the 3D Viewer.
reset-camera-on-model-change
Resets camera position each time the model updates.
Best used on products with multiple size options.
Choose the first configuration loaded in the 3D Viewer.
To embed the sayduck viewer on your site, copy and paste the Embed code to your website.
Example embed code
<div style="min-width:300px;width:100%;height:450px;">
<sayduck-viewer
product="f2d88b70-120a-013a-bcd8-128799098bec"
mode="variants">
</sayduck-viewer>
</div>
<script src="https://viewer.sayduck.com" type="module" async></script>Container/viewer size
Decides the size of the 3D viewer on the webpage. This can be adjusted by changing the variable within the style.
<div style="min-width:300px;width:100%;height:450px;">
</div>Sayduck viewer
This is the element that loads the 3D viewer based on the added viewer settings. In the next section, we list all the available viewer settings.
<sayduck-viewer>
</sayduck-viewer>Script
The script loads our 3D viewer to the page.
<script src="https://viewer.dev.sayduck.app/sayduck-viewer.js" type="module" async></script>Add new viewer settings
To add Viewer settings, one needs to add the parameter within the <sayduck-viewer> element. The only mandatory parameters are product and mode.
<sayduck-viewer
product="f9340390-2087-0137-a0d4-6eec82cfb9d4"
mode="variants"
background="gray"
hide-product-info
hide-embed
hide-controls-hint
>
</sayduck-viewer>Configure embed code
These settings can also be added using the Configure embed code menu.
Available viewer settings
Product (uuid)
product="f9340390-2087-0137-a0d4-6eec82cfb9d4"
The viewer loads products based on their unique id (uuid).
Mode
mode="variants" | "configurator"
Products are categorized into two types - variants and configurators.
Products with incorrect mode will not load
Rendering quality (quality preset)
quality-preset='performance'
There are now two quality options for the viewer - performance & quality.
performance Reduced rendering and texture quality for customers looking for the optimal performance
quality Improved rendering and visual quality for customers looking for the optimal visual experience
Preset background
background="light" | "gray" | "dark" | "white" | "transparent"
Changes the background colour of the 3D viewer.
Transparent background will use the webpage background color
Custom background color (rgb)
background="#add8e6" | "rgb(173,216,230)" | "LightBlue"
Changes background to any RGB value with a hex code, rgb value or color name.
Background image
background-image="image-url"
Changes viewer background to an image URL.
UI
Custom theme color for the viewer
theme-primary-colour="rgba(255,0,0,1)"
theme-secondary-colour="rgba(0,0,255,1)"
It changes primary and secondary color to any RGB(1-255) A (0-1) value.
Hide product info
hide-product-info
Removes product and brand name.
Hide loading animation
hide-loading
Hides the loading animation in the 3D viewer.
Hide control/hand hint
hide-controls-hint
Removes control hint element displayed in the middle of the 3D viewer after loading has finished. This element is used to show that the 3D viewer is intractable.
Hide picker (variant/configurator)
hide-picker
Removes Sayduck default variant and configurator picker. used when building a custom picker using the 3D viewer API.
Open picker on load
open-picker-on-load
Loads 3D Viewer with variant and configurator picker.
Action menu
The Action menu refers to the features listed on the right side of the 3D viewer.
hide-action-menu
Removes all the features found in the highlighted menu.
Web AR
The Web AR button initiates AR on iOS and Android devices and loads a QR code when used on the desktop.
Each device uses an external AR viewer - AR Quick Look for iOS and Scene Viewer for Android.
Hide QR code (desktop)
hide-qr-code
Removes the AR button on the desktop.
Hide web ar (mobile)
hide-web-ar
Removes the AR button on mobile (iOS/Android).
Load QR code on load
qr-code-on-load
The QR code is displayed in the initial viewer load.
Custom iOS button
ar-ios-title='Title'
Title of the action bar.
ar-ios-subtitle='Subtitle'
The subtitle of the action bar.
ar-ios-call-to-action='Buy'
Call to action button on the right.
api.scene.iosArCustomActionClicked();
You can create an event that is triggered when the user clicks the button.
Custom Android AR button
ar-android-title='button-text'
Tile of the action bar.
ar-android-url='https://example.com'
Website URL that opens when user clicks Visit.
Annotations
Annotations are 3D notes that are added to the product to give extra information when clicked.
Hide show annotation from the menu
hide-annotations
Removes show annotation from the action menu.
Load annotation on viewer load
annotations-on-load
Loads the 3D viewer with Annotations enabled.
Dimensions
Your product Dimensions can be added to your Product properties and then displayed in the 3D Viewer.
When no values are added, the Show dimensions button will display the product's real dimensions.
Force real dimensions
real-dimensions
Display the product's real dimensions instead of the values added to the Product properties.
Hide show dimensions
hide-dimensions
Removes the Show dimensions button from the action menu.
Load dimensions on load
dimensions-on-load
Displays dimensions when 3D Viewer is loaded.
Hide show embed code
hide-embed
Removes a show embed button from the action menu.
Hide photo studio/screenshot
hide-photo-studio
Removes the screenshot button from the action menu.
Hide toggle lights
hide-toggle-lights
Removes the button to switch the light (on / off ) which is marked as switchable and removes emissive textures.
Camera positions
Changes camera angle and position to the preset location.
Hide show camera positions button
hide-camera-positions
Removes a button to show camera positions from the action menu.
Camera positions on load
camera-positions-on-load
Loads the Camera position element when the 3D viewer is loaded.
Hide toggle fullscreen
hide-fullscreen
Removes button to toggle fullscreen from the action menu.
Localization
localization-source="URL-to-json-file"
Allows customers to change the text used in the 3D viewer by adding a viewer setting to the embed code with a JSON file.
Example json file
{
"productLoadText": "productLoadText",
"configuratorLoadText": "configuratorLoadText",
"variantLoadPrefix": "variantLoadPrefix",
"desktop_qrCodeGenerating": "desktop_qrCodeGenerating",
"desktop_qrCodeGeneratingHint": "desktop_qrCodeGeneratingHint",
"desktop_qrCodeCallToAction": "desktop_qrCodeCallToAction",
"desktop_qrCodeCallToActionHint": "desktop_qrCodeCallToActionHint",
"embedViewerTitle": "embedViewerTitle",
"embedViewerParagraph": "EmbedViewerParagraph"
}Camera
Disable pan
disable-pan
Removes pan interaction (right-click+move mouse)
Disable rotation
disable-rotation
Removes rotation (left-click+move mouse).
Disable zoom
disable-zoom
Removes zooming (mouse scroll)
Auto-rotation delay
auto-rotate-delay="3000"
Indicates the time it takes for the auto-rotation to start after interaction in milliseconds (ms).
Disable click-to-zoom
disable-click-to-zoom
The viewer no longer needs interaction before zoom works.
Two finger rotate (mobile)
two-finger-rotate
Requires the user to use two fingers to rotate the 3D viewer.
Loading
Variant loading strategy
loading-strategy='defer'
Changes the loading strategy for Variants.
"defer" Prioritizes loading the first variant and keeps downloading variants when the page is idle. (default)
"eager" Shows a loading overlay until all variants are loaded.
"lazy" Only loads the first variant and other variants are loaded when selected. This is not yet supported in configurators.
Click to load
click-to-load
Loads product data only after the button has been clicked.
Custom click to load
click-to-load-button-url='https://example.com/image.jpg'
Updates click to load button.
Variants
Include variants
include-variants='["variant-uuid","variant-uuid2"]'
Choose variants you want to load in the 3D Viewer.
Initial variant
initial-variant="variant-uuid"
Choose the first variant loaded in the 3D Viewer.
Reset camera on variant change
reset-camera-on-model-change
Resets camera position each time the model updates.
Best used on products with multiple size options.
Configurator
Initial configuration
initial-configuration='{
"part-uuid": "variant-uuid",
"part-uuid2": "variant-uuid2"
}'Choose the first configuration loaded in the 3D Viewer.
Updated on: 23/05/2023
Thank you!