Question 1

Embed your products

Accepted Answer

How to embed the 3D viewer?

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

Example embed code

```

Where can I embed the 3D viewer?

The 3D viewer can be embedded to any website or ecommerce Platform that support custom html.

Supported ecommerce 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 to your website.

Configure embed code

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

Click the highlighted button (…), select viewer settings and

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.

let api;

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

Invoke the sayduck.request-api event

import { ViewerApi } from '@sayduck/viewer-jellyfish';

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;
}

Which option you choose depends on the environment in which you want to embed the Sayduck Viewer. E.g. in react it is recommended to use the request-event because subscribing to the ready-event is not possible to do before it has already fired.

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 in

Question 4

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 ecommerce. 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 dime

Question 5

Getting Started

Accepted Answer

Getting Started

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

To create a New Product, simply click the Add product button.

1. Uploading 3D assets

Sayduck Platform requires you to have your own 3D assets in order to start uploading.

Supported upload files:

OBJ
glTF
GLB

Can I use the Platform without any 3D assets?

Each customer will have a Tutorial product with pre-existing 3D assets. This product can be used to try out our features.

2. Editing your 3D scene

Once you have uploaded your 3D model, it will be added to your 3D scene and displayed in the 3D viewer. After this, you can choose to make changes to it.

To learn more, check out this tutorial video

Question 6

3D Viewer - Embed code

Accepted Answer

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.

```

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

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

Featured Articles

Browse All Categories