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

https://www.loom.com/share/11b2a378d4cd4998baadceb7c8714cad

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: setup embedding domains

In order to embed any model, at least one domain needs to be listed in the “Global domains” 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 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 “Embedding” section. Make sure the “Allow embedding” option is checked and Save the changes if needed. Once the option is enabled, the list of embedding domains defined in the first step above should be displayed for information on the right.

Read more about how to enable embedding.

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 options 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 options determines whether the zoom button, located at the top right of the 3D viewer canvas, should be shown in the iframe.

Copy the iframe code

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