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
iframe code available in any 3D Viewer, and paste it on your own site.
There are a few options available when embedding the 3D Viewer in your website. All the options are visible via the
options button, in the
Share menu inside the viewer itself (only on sayduck.com). They are then passed in your
iframe as GET parameters in the
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 iframe's 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%
By default, the 3D Viewer will display products in a "Studio" environment. However, if this does not fit your website's styling, there is the possibility to have a more neutral white background. Otherwise, if you want to have full control on the background (for example overlaying the rendered 3D on a picture or your own website's branding), you can use the transparent option which will make the 3D Viewer's background completely transparent. In this situation, you can overlay the 3D Viewer's iframe on any other HTML element with the background or content of your choice.
You can select which variant should the 3D Viewer load first. This enables you to match the default variant with the version of the product on your own webpage. You can do so either by passing the variant's id (that you can get through the
Share menu on a 3D Viewer) or its name (that you can also find in the
Share menu or in each variant's tooltip in the 3D Viewer's variant picker). However, please note that while variant ids are guaranteed not to change, name's might occasionally do so, and in case your requested variant's name does not exist, the viewer will default to the first variant.
Full screen button
You can hide the full-screen button from the viewer to make the interface less cluttered.
By default, the full-screen button brings the user to a page on sayduck.com with only the product's name, brand and the available variant - on top of the product in 3D - without any distinctive branding.
Light switch button
On lamp products, the 3D Viewer supports ON and OFF mode, which is toggled by the light-switch button.
You can hide the light-switch button from the viewer to make the interface less cluttered.
The 3D Viewer supports product dimensions. When the dimensions button is clicked, the product dimensions will be displayed in the 3D Viewer, as can be seen below. Dimension values can be managed on Sayduck's delivery system, if you are the owner of the product or brand.
You can hide the dimensions button from the 3D Viewer if you wish. A checkbox toggle can be found in the
options of 3D Viewers on sayduck.com.
You can hide the variant-picker, to prevent the user from displaying another version of the product than the default one. Note that this parameter in combination of a selection of the default variant through the GET parameter
starting-variant effectively enables you to show a single version of the product on your website. This might be very useful in case you have one product page per variant, and only want to show the relevant version in 3D on each page.
Also note that in case you hide the variant picker, the variants other than the default one will not be loaded at all, which makes the 3D Viewer lighter for the user.
Photo studio button
The 3D Viewer provides a Photo Studio feature, which enables the user to take and download pictures of the product or any of its details from any angle. A few typical view angles are also available as shortcuts.
If you do not want your user to be able to download product shots from the Photo Studio, you can hide it from the 3D Viewer if you wish. A checkbox toggle can be found in the
options of 3D Viewers on sayduck.com.
Interact with the 3D Viewer
To communicate with the parent page on which it is embedded, Sayduck's 3D Viewer uses the postMessage API to send and receive messages. In the following sections, we detail the available messages, and their data format. As detailed in the postMessage API documentation, you can setup event listeners to catch the messages and react appropriately.
Messages sent by the viewer
The viewer currently posts messages on four occasions. We detail here the content of
event.data, as defined by the postMessage API.
This is sent when all the 3D data has been downloaded successfully and everything is now ready to be shown. You might want to decide to hide the 3D Viewer at first, and display when this message is posted to prevent users from seeing any kind of loading screen.
Messages listened to by the viewer (Pro version)
The 3D Viewer listens to message you post to it to update the variant it displays. This enables you to change the variant displayed in 3D using elements on your own page (dropdown, swatch images...). Combined with hiding the variant picker, this would enable you to get a completely integrated look and feel of the viewer on your own pages.