How to embed?
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:
html<iframesrc="https://view.wec360.com/demo/demo/overview"width="100%"height="600"frameborder="0"allowfullscreenallow="fullscreen; camera; gyroscope; accelerometer; magnetometer"></iframe>
| Attribute | Value |
|---|---|
| src | the url to the view |
| width | 100% so that the iframe is stretched to fill it's parent |
| height | 100% so that the iframe is stretched to fill it's parent |
| frameborder | 0 so that we don't get a border around the iframe |
| allowfullscreen | a legacy attribute so that you can click the fullscreen button |
| loading:lazy | the viewer isn't loaded unit it's close to the viewport |
| allow: fullscreen | the new attribute for allowing fullscreen |
| allow: camera | so we can do Augmented Reality |
| allow: gyroscope | so we can move the panorama around when you move your device |
| allow: accelerometer | for 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/{organizationId}/{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');