Skip to main content

WebPlayer with <iframe/> tag

Usage​

<iframe src="..."> </iframe>

Attribute src​

In order to construct the src URL for the iframe integration you need

  • The iframe-integration-url of the iframe integration

    https://cdn.car-cutter.com/libs/web-player/v3/integrations/iframe/index.html

  • Required & optional Properties as urlencoded URLSearchParams We recommend to encode all Properties even though we know it technically might not always be necessary!

Blueprint​

<iframe
  src="{iframe-integration-url}?composition-url={...}&{optional-properties}"
></iframe>

Example​

* Required Properties

Non Encoded​

Propertiesvalue
composition-url*https://cdn.car-cutter.com/libs/web-player/v3/demos/composition.json
hide-categories-navtrue
categories-filter360|interior

Encoded​

Propertiesvalue
composition-url*https%3A%2F%2Fcdn.car-cutter.com%2Flibs%2Fweb-player%2Fv3%2Fdemos%2Fcomposition.json
hide-categories-navtrue
categories-filter360%7Cinterior

Result​

src="https://cdn.car-cutter.com/libs/web-player/v3/integrations/iframe/index.html?composition-url=https%3A%2F%2Fcdn.car-cutter.com%2Flibs%2Fweb-player%2Fv3%2Fdemos%2Fcomposition.json&hide-categories-nav=true&categories-filter=360%7Cinterior"

HTML​

<iframe
  src="https://cdn.car-cutter.com/libs/web-player/v3/integrations/iframe/index.html?composition-url=https%3A%2F%2Fcdn.car-cutter.com%2Flibs%2Fweb-player%2Fv3%2Fdemos%2Fcomposition.json&hide-categories-nav=true&categories-filter=360%7Cinterior"
></iframe>

Next steps​

For more customization, take a look at available props in the Properties section