Question 1

Embed your products

Accepted Answer

To embed the 3D viewer, copy & paste the product Embed code to your webpage.

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>

To learn all the steps, check out this video:

${youtube}

Where can I embed the 3D viewer?

The 3D viewer can be embedded in any website or e-commerce Platform that supports custom HTML.

Supported e-commerce platforms:

Shopify
Wix
Adobe Commerce (Magento)
WooCommerce
PrestaShop
BigCommerce
Squarespace
Big Cartel
Weebly
Volusion
OpenCart

Where can I find my embed code?

The product Embed code will be generated when you Publish your product.

After your product has been Published, you can choose to Preview the viewer or Copy the embed code and add it to your website.

Configure embed code

There are various customization options that can be added to the embed code. To do this:

Click the highli

Question 2

Embed Products to Shopify

Accepted Answer

Embed Products to Shopify

Embedding the Sayduck 3D viewer to Shopify is very simple. Here is a video that follows our help article and uses the information in it to embed the Sayduck 3D viewer to the Shopify default theme. Just follow along!

${youtube}

Create a metafield for your Shopify product

Create a metafield for your Shopify product, where you can store the matching Sayduck's product UUID for each of your Shopify products.

For example, create the metafield sayduck.product-uuid (namespace: "sayduck" and key: "product-uuid").

Locate product UUID

You can get the Sayduck product's UUID from the 3D Viewer embed code:

<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.sayduck.com" type="module" async></script>

It's the value of the data-product-uuid attribute and look something like: f9340390-2087-0137-a0d4-6eec82cfb9d4

Embed 3D viewer

Paste a 3D Viewer embed code where you want it to be visible - most likely in your Single Product page's template code, for example replacing the product image(s).

You probably also want to customise the style of the 3D Viewer container div, so that it looks and behave as you desire. Additionally, you might want to only display the 3D Viewer if the product has a Sayduck product UUID stored in its

Question 3

3D Viewer - API documentation

Accepted Answer

3D Viewer API

The sayduck viewer exposes an api object with various methods that you can use to interact with the sayduck viewer. There are two methods to access the viewer api.

Listen for the sayduck.api-ready event (Recommended)¨

let api;

window.addEventListener('sayduck.api-ready', (event) => {
    api = (event as CustomEvent).detail.instance;
});

Invoke the sayduck.request-api event

async function getViewerApi() {

  const request = new CustomEvent('sayduck.request-api', {
    bubbles: true,
    composed: true,
    detail: {
      instance: {},
    },
  });

  window.dispatchEvent(request);
  const api = await request.detail.instance;
  return api;
}

glTF Loaded

sayduck.editor.gltfLoaded Sent when the 3D Viewer has finished loading.

Variants API

Functionality related to variants is available on the configurator (api.variants) property of the api and is only available when viewer mode attribute is set to variants.

<sayduck-viewer product="product-uuid" 
  mode="variants"
>
</sayduck-viewer>

Change variant

api.variants.setActiveVariant("variant-uuid"); Set active variant to input.

List variant UUIDs

api.variants.getVariants(); List all variant uuids, names and metadata.

Configurator API

Functionality related to configurator is available on the configurator (api.configurator) property of the api and is only available when viewer mode attribute is set to configurator.

``` <sayd

Question 4

3D Viewer - Embed code

Accepted Answer

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

<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>```

###### 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 <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

Question 5

Getting Started

Accepted Answer

Getting Started with Sayduck Platform

We know that jumping into the world of 3D can be challenging. This is why we created in-depth tutorial videos to help you.

${youtube}

Need help?

Whenever your are in need of help, use the Contact support button to open our chat or access our Help Desk articles.

All sent messages will be stored on our end. Even if you do not get an answer right away, you can still add all your questions and get them answered directly to your email.

Create a New Product

Click the New Product button, choose product type (Variants/Configurator), give it a name and hit Create.

Variant product (Premium) - One size/material products or simple material configurator (one option menu)

To learn more, check out: Variants - What & How to use?

Configurable product (Business pro) - 3D Configurator with many size/material options

To learn more, check out: Configurator - What & How to use?

1. Uploading 3D assets

Sayduck Platform requires you to have your own 3D assets.

Supported upload files:

OBJ
glTF
GLB

To learn more, check out: [3D Assets - How to upload?](/en/article/3d-assets-how-to-upload

Question 6

3D Assets - How to upload?

Accepted Answer

Uploading 3D Assets

This article will show you how to upload 3D assets to the Platform.

${youtube}

How to Prepare assets before upload?

The preparation of 3D assets is very important for e-commerce. Using these methods, you can reduce your product data by multiple MB.

Use the minimal amount of polygons (<100 000)
Merge meshes that share materials
Use minimal resolution and quality for textures

To learn more, check out: 3D Assets - How to prepare?

How to upload 3D assets?

To upload 3D assets (meshes/textures), drag & drop the files to the product editor or use the assets button.

Accepted formats:

.obj
.glTF (local, remote, embedded)
.glb

Once processed, uploaded assets are added to your Product Assets and your 3D model will appear in the 3D viewer.

Product uploaded with no materials

If no Material information is found in the uploaded asset, a default material will be created and assigned to your Meshes.

Confirm product size and position

After uploading your model, it is good to check that your asset dim

Featured Articles

Browse All Categories