Embed Apps in external websites

This feature is available for Designer Plus users and above.

With the direct embedding feature, users can embed ShapeDiver Apps as iframes in any website. In the future, the platform will include a way to customize and copy the iframe code directly. At the moment, this can be done by following the below steps:

1. Whitelist the website’s domain

First, you need to whitelist your website’s domain, which is necessary for any type of model embedding (i.e for standard iframe embedding as well as direct embedding).

2. Allow iframe embedding

In order, to embed Apps, one also needs to allow iframe embedding for the model. This can be done in the Developers settings of the model edit page.

3. Build the iframe embed code

You can simply copy and paste the model’s slug in place of the MODEL_SLUG placeholder in the code below:

CODE

<iframe width="100%" height="480" src="https://appbuilder.shapediver.com/v1/main/latest/?slug=MODEL_SLUG" referrerpolicy="origin" allowfullscreen style="overflow: hidden; border-width: 0;">
    <p>Your browser does not support iframes.</p>
</iframe>

The slug is the last part of the URL of your model on the platform:

Note that you can also update the width and height of the iframe in the embed code, as well as various other iframe options. Read more about iframes here.