How to embed a virtual tour in a website

blog-image

29 Jan 2018

Our virtual tours are compatible with a wide range of devices, browsers and operative systems. Embedding a virtual tour in a website is vital to make sure that it will work properly across all platforms.

Our custom embedding method ensures that the tour is loaded and displayed using optimal parameters for a given environment.

Please refer this web page to your website administrator to help with this process.

The embedding code

Open the file index.html in a text editor of your choice to take a look at the source code. Scroll down and copy all the lines contained between the tags <body>

<script src="URL-WHERE-THE-VIRTUAL-TOUR-IS-HOSTED/files/tour.js"></script>
<div id="pano" style="width:100%; height:100%;">
    <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;text-align:center;"><td>Attention:<br><br>Your browser's Javascript is not activated.<br><br>Please activate it to see the virtual tour.<br><br></td></tr></table></noscript>
    <script>
    embedpano({swf:"URL-WHERE-THE-VIRTUAL-TOUR-IS-HOSTED/files/tour.swf",xml:"URL-WHERE-THE-VIRTUAL-TOUR-IS-HOSTED/files/tour.xml", target:"pano", html5:"prefer",mobilescale:1.0, mwheel:false, initvars:{startscene:"scene1"} , passQueryParameters:true});
    </script>
</div>

Paste all the lines above inside the web page where you’d like to embed the virtual tour.

Changing the frame size

It is possible to change the virtual tour frame size by editing the width and height attributes.

You can specify a percentage of the current web page size.

<div id="pano" style="width:50%;height:50%">

Alternatively you can enter fixed dimensions like for example 600 by 400 pixels.

<div id="pano" style="width:600px; height:400px;">

Can iFrames be used?

Although it is possible to embed our virtual tours by using <iframe> or <object>, we don’t recommended this method, as some of the virtual tour features like Fullscreen or Gyroscope might not work. Also, not all browsers support iFrames may prevent loading and displaying of the virtual tour.

If you would still like to use an iFrame to embed a virtual tour, please make sure to enable the attributes allowfullscreen, mozallowfullscreen and webkitallowfullscreen.

 <iframe  src="URL-WHERE-THE-VIRTUAL-TOUR-IS-HOSTED/index.html" frameborder="0" height="100%" width="100%" allowfullscreen mozallowfullscreen webkitallowfullscreen>Your browser doesn't support iframes. Please upgrade your browser</iframe>




Looking for a 360 virtual tour for your business?

Please don't hesitate contact us and we'll get back to you as soon as possible.





Comments !