> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.sayduck.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

![](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:

${youtube}[](iVttsJWOxFE)

### 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](/en/article/3d-viewer-embed-code-19bw806/)

![](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](/en/article/3d-viewer-api-documentation-1ftbxnx/)