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.

URL parameters

You can use the following URL parameters (aka query string parameters) to augment the behavior of App Builder.

Parameter name	Description
`slug`	The slug (aka URL identifier) of the model to load. You need to allow iframe embedding for this to work. This method supports the protection of your model by a short-lived token. You can use the Require strong authorization setting for your model. This protection can be enabled in the Embedding settings for all of your models or individually for each model in the Developer settings.
`ticket`	The ticket (aka API key) of the model to load. You need to allow direct embedding for this to work. When specifying a `ticket`, you also need to provide a `modelViewUrl`. This method does not support protection of your model by a short lived token. You need to disable the Require strong authorization setting for your model.
`modelViewUrl`	The modelViewUrl (aka API endpoint) of the model to load. You need to allow direct embedding for this to work. When specifying a `modelViewUrl`, you also need to provide a `ticket`.
`g`	Link to a JSON file that defines theme settings. The JSON file can also define the `slug`, or `ticket` and `modelViewUrl`.
`modelStateId`	Id of the model state to load initially.
`context`	This can be used to provide contextual information to the Grasshopper model. Typical context values are cart and order. The WordPress / WooCommerce plugin uses these values when opening an App Builder configurator from the cart or order pages. Further values can be used freely. If a parameter named `"context"` exists in the loaded model, the value of `context` will be mapped to it. Otherwise, the value is ignored.
`_{YOUR_PARAMETER_NAME}`	You can set initial values for any parameter in your model by prefixing the parameter’s `name` or `id` by an underscore `_` character. An Example: Appending `&_Width=10&_extended=false` to the query string will set the parameter named `Width` to `10` and the parameter named `extended` to `false`. The parameters you specify must exist for the given model; otherwise, loading the model will fail.
`trackingDomain`	Allows to define a domain for tracking web analytics to plausible.io. You can join an onboarding call if you'd like to learn more about this feature.
`utm_source` `utm_medium` `utm_campaign` `utm_term` `utm_content`	Classic parameters for tracking the effectiveness of marketing campaigns (https://en.wikipedia.org/wiki/UTM_parameters). You can use these parameters if you specify a `trackingDomain`.
`utm_user`	Non-standard parameter for tracking individual users. You can use this parameter if you specify a `trackingDomain`. Be aware of the implications this might have regarding data protection regulations.