Introduction
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;
| Option | Value | Description |
|---|---|---|
| background-color | 000000 | A hexadecimal number representing a color code used in HTML used for setting the background color. |
| light-intensity-multiplier | 0.0 | Set 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:
| Option | Default value | Description |
|---|---|---|
| background-color | # F3F3F3 | Set the background color of the viewer. |
| light-intensity-multiplier | 0.0 | Set the light intensity |
| environment-intensity | 0.95 | Set the environment intensity |