Articles on: Sharing

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

Was this article helpful?

Share your feedback

Cancel

Thank you!