> ## 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).

# Migration guide

This article will show you how to start using the new Sayduck 3D Viewer.

| We encourage you to take the required steps to migrate to the new Sayduck 3D Viewer before the previous viewer is discontinued on August 31, 2023, 1:00 AM UTC.


# 1. Inspect your product in the editor 3D viewer

First, check that your product looks correct in the editor 3D Viewer. This can be easily done by opening the **Variants** & **Configurations** menu from the bottom.

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-28-at-13361_553x4s.png)

# 2. Publish your product

When everything looks correct, click the **Publish** found in the migration tab.

We have changed the assets used in the Viewer, so this step is needed even if your product was already published. 

| This will not effect your live product using our old 3D Viewer

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-28-at-13370_zw42fq.png)

After this, check that your product looks and loads correctly in the new Sayduck 3D Viewer with the **Preview** button.

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-28-at-14040_1wb5gzr.png)

# 3. Migrate embed code

After your product has been **Published**, go to your Embed section and click on the **Configure embed code**.

Toggle the **New 3D viewer**, **Copy** & **Paste** the code to your website.

1. Click the highlighted button **(...)**
2. Toggle **New 3D Viewer**
3. Select Viewer settings (optional)
4. Click **Copy** & **Paste** Embed code to your website

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/image-3_10s97y4.png)

### What changed in the Embed code?

The only notable change is the addition of `mode` to the embed code. Products are now labeled as either `mode="variants"` or `mode="configurator"`

Otherwise, we have simplified the Embed code to help you apply settings more easily. 

**Instant Viewer embed code**

```
<div style="min-width:300px;width:100%;height:450px;">
  <sayduck-viewer 
    product="f2d88b70-120a-013a-bcd8-128799098bec" 
    mode="variants" 
    hide-photo-studio 
    hide-embed 
    hide-toggle-lights>
  </sayduck-viewer>
</div><script src="https://viewer.sayduck.com" type="module" async></script>
```

### Custom API Integration

If you are using a custom API integration, check our new updated [Sayduck 3D Viewer API](/en/article/sayduck-3d-viewer-api-1ftbxnx/) documentation.

# 4. Finalize Migration

Once you have embedded the new Sayduck 3D Viewer, you can **Finalize Migration.**

||| After this, you will no longer have access to the old Sayduck 3D Viewer on this product.

![](https://storage.crisp.chat/users/helpdesk/website/cae6f284ce714800/screenshot-2023-02-28-at-13412_kq6xq3.png)