How to embed the 3D viewer?

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>

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 click Copy.

Learn more from 3D Viewer - Embed code

Preview

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

Example link: https://preview.dev.sayduck.app/1f137a70-1bae-013b-821e-165305497773

API integration

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

Updated on: 07/03/2023