Iframe embedding (legacy)

Iframe embedding is only available for ShapeDiver users with a paid subscription.

This section describes how to embed an iframe of the legacy model view. The new iframe embedding Apps will soon replace it as the standard way to embed ShapeDiver models. You can already embed Apps from the App iframe section.

ShapeDiver users who have the right permissions are able to embed any of their ShapeDiver models using an iframe on any external website they choose. The embedded model comes with the 3D viewer, the parameter and output panel, as well as the AR button to view the 3D scene in augmented reality. Furthermore, it is possible to customize several iframe and styling options before embedding.

Prerequisite: Set up embedding domains

In order to embed any model, at least one domain needs to be listed in the domain whitelist for the account. ShapeDiver users with the required permissions can list domains for embedding in the “Settings” page of their dashboard. Read more about embedding domains.

Allow iframe embedding

The second step is to allow embedding for each specific model. This option can be found in the “Edit” page of the model, in the “Iframe” section. Make sure the “Allow iframe embedding” option is checked and Save the changes if needed.

Customize the iframe code

If embedding domains are setup and embedding is enabled, the “View” page of the model includes an “Iframe” section under the viewer. It contains a series of options to customize the appearance and behaviour of the iframe.

Iframe colors

Play with the following four colors to customize the aspect of the embedded iframe:

Primary color
Secondary color
Surface color
Background color

Iframe size

Width: width of the embedded iframe (by default 100%)
Height: height of the embedded iframe (by default 480px)

Show control panel

This option determines if the iframe should load with the control panel containing parameters and outputs open on the right, or if it should be hidden. The visibility of the control panel can always be controlled by the user after that, using the control toggle button in the viewer.

Show full screen button

This option determines whether the full screen button, located at the top right of the 3D viewer canvas, should be shown in the iframe. If it is hidden, users will not have a way to switch to full screen mode.

Show zoom button

This option determines whether the zoom button, located at the top right of the 3D viewer canvas, should be shown in the iframe.

Logo

This option allows to specify the url of an image to be used as a custom logo while the viewer loads the model. Make sure the url to the image is public. Note that the image will not be resized in any way, therefore its size should be appropriate to the size of the viewer canvas where your model is embedded.

You can also control the visibility of several sections of the iframe page by updating the iframe settings in the model edit page.

Copy the iframe code

Once you are happy with the chosen options, use the copy button on the right of the “Iframe” section to copy the iframe code.