Embedding Virtual Tours Into a Website

By Stephen Garside on 6/7/2016

Embedding a virtual tour into your own website is easy to do, but it potentially requires some very basic programming skills to achieve a truly integrated look and feel.  You should be aware that you can only embed one of your tours in a website if you have the Enterprise price plan.

Due to technical reasons beyond the control of 360Jungle we cannot guarantee that embedding a tour in a 3rd party website will always work correctly.  In our own tests we have found that embedded tours generally work as expected when in 'desktop' mode, however the 'virtual reality' option is not always supported, even on devices that support orientation.  This is due to certain browsers not communicating their orientation to iframes - something which 360Jungle have no control over. 

Basic Virtual Tours Embedding

For a simple implementation of a tour you can just use the following line of code (substituting the tour number for your own):

<iframe src="https://www.360jungle.com/virtual-tour/25" style="display: block; background: #fff; border: none;width:800px;height:600px;" frameborder="0" allowfullscreen=""></iframe>

This line of code can easily be added to any webpage and it will create a window (called an iframe) in your website that displays the virtual tour.  You can adjust the width and height (in pixels) to suit the style of your web page.

Advanced Virtual Tours Embedding

For a more integrated 'full page' experience we recommend your web page uses a basic html template similar to the one depicted below.

  <!DOCTYPE html>
  <html lang="en" style="width:100%;height:100.1%;margin:0;padding:0;">
  <head>
  <meta charset="utf-8" />
  <title>My Tour Title</title>
  <meta name="description" content="My tour description for search engines">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
   
  </head>
  <body style="width:100%;height:100.1%;margin:0;padding:0;">
   
   
   
  <iframe src="https://www.360jungle.com/virtual-tour/25" style="display: block; background: #fff; border: none;width:100%;height:100vh;" frameborder="0" allowfullscreen></iframe>
   
   
  <script>
  window.addEventListener("load", function ()
  {
  // For IOS Devices
  setTimeout(function ()
  {
  // Hide the address bar!
  window.scrollTo(0, 1);
  }, 0);
  });
  </script>
  </body>
  </html>
   

This approach allows the tour to run in full screen mode - required for a good VR experience if the device and browser supports it. The script included in the code snippet above is to force older IOS devices to hide their address and footer bars. The heights of 100.1% are not typos! they force newer IOS devices to hide their address and footer bars.

For an example of an embedded tour take a look at this page.

360Jungle Virtual Assistant

busy busy...