Embed your products

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:

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 highlighted button (...), select viewer settings and click Copy.

Learn more from 3D Viewer - Embed code

Preview

Preview will open your product in a shareable preview URL. It is used to see how your published product looks before embedding it to your website.

Example preview: https://preview.sayduck.com/460cb140-b1d7-013b-3386-3a8d1a8dd8d9?mode=configurator

API integration

For more detailed information, check out our 3D Viewer - API documentation

Updated on: 26/11/2024