Embedding a product in a 3D Viewer

Basic embed code

You can embed Sayduck's 3D Viewer in your site in a matter of seconds. All you need to do is copy the embed code from the embed & export tab, and paste it on your own site.



Viewer Restrictions

The free plan is for personal use only. To embed models on a commercial or company website, you will need to upgrade your plan.

Monthly views

Your plan determines how many views you're allowed per month. This amount refers to the total amount of views.

Free: 1000
Premium: 50 000
Business Pro: 100 000

These plans can be customized or upgraded to extend this limit.

White/black-listing URLs

From your organization page, you can choose to white or black-list websites.



Additional options

There are customize options available when embedding the 3D Viewer in your website. All of these options can be found in the customize embed code tab and easily applied to the embed code.

Check out 3D Viewer Documentation for further information.



API integration

For more detailed information, check out our API documentation.

Viewer size

The viewer is fully responsive and mobile-compatible, so you can set the size best suited for your website. Of course, you can also define the viewer size through CSS – for example to be able to manage media queries – and fit the viewer in your responsive layouts.

By default, the inline style attributes are:

min-height: 450px
min-width: 300px
width: 100%
height: 100%

Camera settings

To adjusting field of view, zoom and rotation, you need to edit camera setting from the Scene settings.



Web AR Feature

Our Viewer are AR enabled on both with an app free solution. This feature is enabled for both Android and iOS devices.



Prepare product for AR

Each of our 3D viewers is AR enabled when published. For this feature to work as intended it is important that:

Your product is correctly scaled
The product is positioned to the 0,0 on import.

You can check your product real scale with enable the 3D data dimensions from the editor viewer settings.



Tutorial on Embedding products

Embed to HTML website

Open Embed & Export tab and Publish your product.

Copy Embed code or click Configure embed options to customize your embed code



(Optional) Choose parametes you wish to include in your viewer.

Copy and paste the code to any html website!



If you do not have a website, you can test embedding the 3D viewer to https://jsfiddle.net

Embed to E-commerce Platform

Embed viewer to Wordpress

To embed viewer to Wordpress, follow the simple steps below.

Publish your product and copy the embed code.



Add Element Raw HTML to any page.

Paste embed code to the element.



Publish changes and you are done!

Embed viewer to Shopify

Check out Embed viewer to Shopify for the full in depth guide.
Was this article helpful?
Cancel
Thank you!