3D Viewer - Embed code
Sayduck 3D Viewer (Embed code)
Embed code
The sayduck viewer is a webcomponent built with LIT element. In order to embed the sayduck viewer on your site, simply import the scripts and add the tag.
<div style="min-width:300px;width:100%;height:450px;">
<sayduck-viewer
product="f9340390-2087-0137-a0d4-6eec82cfb9d4"
mode="variants"
>
</sayduck-viewer>
</div>
<script src="https://viewer.dev.sayduck.app/sayduck-viewer.js" type="module" async></script>It consists of three elements container, sayduck-viewer and 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 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>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 correctly
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 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 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. Mainly used when when building 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
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
Web AR button initiates AR on iOS and Android devices and loads a QR code when used on desktop.
Each device uses 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 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'
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 additional information when clicked.
Hide show annotation from 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 manually added to your Product properties and then displayed in the 3D Viewer.
When no values are added, the Show dimensions button will display products real dimensions.
Force real dimensions
real-dimensions
The Show dimensions button will displays the products real dimensions instead of the values added to the Product properties.
Hide show dimensions
hide-dimensions
Removes a show dimensions 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 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 of show camera positions from the action menu.
Camera positions on load
camera-positions-on-load
Loads the Camera position element when 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 customer 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 to be interacted before zoom works.
Two finger rotate (mobile)
two-finger-rotate
Requires 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 on loading first variant and after keeps downloading variants when page is idle. (default)
"eager" Shows loading overlay until all variants are loaded.
"lazy" Only loads 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.
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.
Configurator
Initial configuration
initial-configuration='{
"part-uuid": "variant-uuid",
"part-uuid2": "variant-uuid2"
}'
Choose the first configuration loaded in the 3D Viewer.
Updated on: 13/03/2023
Thank you!