Iframe embedding
Iframe embedding is only available for ShapeDiver users with a paid subscription.
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 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
Use the copy button on the right of the “Iframe” section to copy the iframe code once you are happy with the chosen options.