How to embed?

Iframe

Embedding through iframing is a versatile technique to add the platform to your site. When embedding our viewer as an iframe, it's up to you to decide how large it will be. Our viewer is fully responsive and will fill the iframe.

You can find each iframe embed code from the delivery view of your project. Please visit app.wec360.com to login and grab your specific embed code.

Below is an example of how it looks:

<iframe
src="https://view.wec360.com/demo/photorealism-bundle-exterior"
width="100%"
height="100%"
frameborder="0"
allowfullscreen
loading="lazy"
allow="fullscreen; camera; gyroscope; accelerometer; magnetometer"
></iframe>
AttributeValue
srcthe url to the view
width100% so that the iframe is stretched to fill it's parent. If needed, can be specified in pixels.
height100% so that the iframe is stretched to fill it's parent. If needed, can be specified in pixels.
frameborder0, so that we don't get a border around the iframe
allowfullscreena legacy attribute so that you can click the fullscreen button
loading:lazyso that the viewer isn't loaded unit it's close to the viewport
allow: fullscreenthe new attribute for allowing fullscreen
allow: cameraso we can do Augmented Reality
allow: gyroscopeso we can move the panorama around when you move your device
allow: accelerometerfor improved performance in AR tracking

If you wish to embed a single view, just add the view name at the end of the link. Each link is constructed like this:

view.wec360.com/{organisationId}/{projectId}/{viewId}

You also have the possibility to hide the menu. To use that feature, add ?menu=false at the end of your link. This is useful if you have a special section on your site where you only want to display a specific type of view, like a 3d-scene, virtual tour or similar.

Iframe in wordpress

Wordpress supports oEmbed which is the way to go here. If you try to embed any of our products, using our iframe code, it will tell you that it's not supported. However, if you add this to your functions.php-file, it will point wordpress to our oEmbed api and also whitelist it.

wp_oembed_add_provider('https://view.wec360.com/*', 'https://view.wec360.com/api/oembed');