Sayduck Wiki

Page tree
Skip to end of metadata
Go to start of metadata



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.

<iframe style="min-height:450px;min-width:300px;width:100%;height:100%;" src="https://sayduck.com/3d/Hzbq" frameborder="0"></iframe>


Additional options

There are a few options available when embedding the 3D Viewer in your website. All the options are visible via the Embed 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 src attribute.

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 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%

Background

Parameter

background-color

Accepted values

studio,white,transparent
Default value
studio
Example
src="https://sayduck.com/3d/Hzbq?background-color=white"


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.

 


Default variant

Parameter

starting-variant

Accepted values

[variant-id],[variant-name]
Default value
[first-variant-id]
Example
src="https://sayduck.com/3d/Hzbq?starting-variant=05fabd2e-7d6a-4df8-b8b3-b394ba6539ad"

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

Parameter

hide-full-screen-button

Accepted values

0,1
Default value
0
Example
src="https://sayduck.com/3d/Hzbq?hide-full-screen-button=1"


You can hide the full-screen button from the viewer to make the interface less cluttered. 

Hide fulll-screen button


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.

Full screen 3D Viewer


Light switch button

Parameter

hide-light-switch

Accepted values

0,1
Default value
0
Example
src="https://sayduck.com/3d/Hzbq?hide-light-switch=1"


On lamp products, the 3D Viewer supports ON and OFF mode, which is toggled by the light-switch button. 


Lamp is turned ON


You can hide the light-switch button from the viewer to make the interface less cluttered.

Hide light switch

Dimensions button

Parameter

hide-dimensions

Accepted values

0,1
Default value
0
Example
src="https://sayduck.com/3d/Hzbq?hide-dimensions=1"


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.

Product dimensions


You can hide the dimensions button from the 3D Viewer if you wish. A checkbox toggle can be found in the Embed options of 3D Viewers on sayduck.com.

Hide dimensions

Variant picker

Parameter

hide-variants

Accepted values

0,1
Default value
0
Example
src="https://sayduck.com/3d/Hzbq?hide-variants=1"

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.

Hide variant-picker

Photo studio button

Parameter

hide-photo-studio

Accepted values

0,1
Default value
0
Example
src="https://sayduck.com/3d/Hzbq?hide-photo-studio=1"

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 Embed 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.

Example

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  var origin = event.origin || event.originalEvent.origin; // For Chrome, the origin property is in the event.originalEvent object.
  if (origin !== "https://sayduck.com")
    return;

  // do something with event.data || event.originalEvent.data
}


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.

Loaded

event.data = {
  "event" : "loaded",
  "code" : 102,
  "message": "Viewer has finished loading and will start loading content"
}

This is sent when the javascript file holding Sayduck's 3D Viewer's code has been downloaded and parsed. This means it will now process to download the product's data.

Ready

event.data = {
  "event" : "ready",
  "code" : 200,
  "message": "3D is ready to be displayed"
}

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.
 

Error 406

event.data = {
  "event" : "error",
  "code" : 406,
  "message": "WebGL is not supported by client"
}
A message is also posted if the viewer fails to start on the user's computer. Older devices with underperforming hardware, outdated graphics card or browsers might not have the ability to render products in 3D. In that case, they will be shown an error, and the 3D Viewer will first post you message to let you act on it if you wish.
 

Error 404

event.data = {
  "event" : "error",
  "code" : 404,
  "message": "This product is not available in 3D"
}
In very rare occasion, a product might be temporarily unavailable. In this case, the 3D Viewer will realize that it cannot download the 3D data from Sayduck's server, and will post the error 404.
The Viewer will then display an error screen by default. You might want to listen for errors in order to hide the viewer (or not display it in the first place) and prevent the user from seeing the error screen.
 


Error 400

event.data = {
  "event" : "error",
  "code" : 400,
  "message": "An unknown error has occured"
}
Finally, an error message is also posted if any other error occured that prevented the viewer from loading properly. This is a fail-safe message that should never be posted. A generic error message will be shown to the end user.

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.

[In progress]