> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.sayduck.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# 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**
```
```
###### Container/viewer size
Decides the size of the 3D viewer on the webpage. This can be adjusted by changing the variable within the style.
```
```
###### 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.
```
```
###### Script
The script loads our 3D viewer to the page.
``````
### Add new viewer settings
To add Viewer settings, one needs to add the parameter within the `` element. The only mandatory parameters are `product` and `mode`.
```
```
###### 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.
### Download assets
`downloadable-model`
Adds button to downloads the GLB file of the active scene.
### 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": "Loading",
"configuratorLoadText": "Loading",
"configuratorPickerLabel": "Configurator",
"configuratorLoadAssets": "Loading materials and geometries...",
"variantLoadPrefix": "Loading",
"desktop_qrCodeGenerating": "Generating QR Code...",
"desktop_qrCodeCallToAction":
"Point your camera at the QR code. Tap the banner that appears on your screen.",
"embedViewerTitle": "Embed 3D viewer",
"embedViewerDescription": "Copy and paste the following embed code on any site",
"embedViewerParagraph": "Paste the following embed code on any site.",
"embedViewerCopySuccessful": "Copy successful",
"embedViewerCopyError": "Something went wrong",
"arText": "View in AR",
"menu_dimensions_tooltip": "Show dimensions",
"menu_annotations_tooltip": "Show annotations",
"menu_lights_tooltip": "Toggle lights",
"menu_fullscreen_tooltip": "Toggle fullscreen",
"menu_cameraPositions_tooltip": "Toggle camera positions",
"menu_screenshot_tooltip": "Take screenshot",
"menu_embed_tooltip": "Show embed code",
"screenshot_taken": "Screenshot taken",
}
```
### 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.