Embed your products
To embed the 3D viewer, copy & paste the product Embed code to your webpage.
Example embed code
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2022-11-10-at-17271_yfbidr.png)
To learn all the steps, check out this video:
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
The product Embed code will be generated when you Publish your product.
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-27-at-14053_vldv0t.png)
After your product has been Published, you can choose to Preview the viewer or Copy the embed code and add it to your website.
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-28-at-13051_14p8r62.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-23-at-15161_fa49gx.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-27-at-14083_1m89lqv.png)
For more detailed information, check out our 3D Viewer - API documentation
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>
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2022-11-10-at-17271_yfbidr.png)
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.
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-27-at-14053_vldv0t.png)
After your product has been Published, you can choose to Preview the viewer or Copy the embed code and add it to your website.
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-28-at-13051_14p8r62.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-23-at-15161_fa49gx.png)
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
![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-27-at-14083_1m89lqv.png)
API integration
For more detailed information, check out our 3D Viewer - API documentation
Updated on: 28/04/2023
Thank you!