You can embed Sayduck’s 3D Viewer in your site in a matter of seconds.
Publish your product
Copy the embed code from the embed & export tab
And paste it to any HTML website.
If you do not have a website, you can test embedding the 3D viewer to https://jsfiddle.net
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 (Business Pro)
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!
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.
Updated on: 18 / 05 / 2021