Embedding the product viewer


The Floorplanner product viewer displays the products within the Floorplanner ecosystem on the web in a 3D viewer. This viewer can be used to embed in your website or to showcase a product via a link. The viewer has Augmented Reality support and is fully configurable.

Once the product is enabled for the product viewer you can embed it via a IFrame or via HTML/Javascript.
Both options are referenced below.

If you need any help or have any questions related to embedding, please contact us via our website or support email: [email protected]

IFrame embedding

The easiest way to embed the product viewer is via a IFrame. It's just a HTML tag which loads the viewer from our domain (view360.io). A HTML tag would look like:

<iframe allow="fullscreen" src="https://view360.io/f82ag3"></iframe>

IFrame embedding has several options you can pass in the URL;

background-color000000A hexadecimal number representing a color code
used in HTML used for setting the background color.
light-intensity-multiplier0.0Set the light intensity

You can pass these parameters in the URL like so:

<iframe allow="fullscreen" src="https://view360.io/f82ag3?background-color=000000&light-intensity-multiplier=1.0"></iframe>

HTML embedding

Embedding the product viewer is an easy process. Once you have a view360 link with hash code you can embed it in the following manner:

<script src="https://s3.eu-west-1.amazonaws.com/fp.productviewer/v4/main.bundle.js.gz" type="module"></script>

<floorplanner-model-viewer view360="4cgj0r"/>

After you've embedded the the product you're also able to configure it. We provide the following additional options:

OptionDefault valueDescription
background-color# F3F3F3Set the background color of the viewer.
light-intensity-multiplier0.0Set the light intensity
environment-intensity0.95Set the environment intensity