How to embed a virtual tour on your website


In a previous post, we talked about Virtual Tours, their origin story, different types, benefits to your business, and examples of each.

Today we’re gonna walk you through the steps to embed your tour on your website for maximum impact, whether your tour is built by GEOTECH3D or any other provider, the steps presented should work fine for all virtual tours.

What is embedding in the first place?

In short, Nesting. Which could have various meanings, but in our point of discussion, it refers to placing a piece of content into a web page, in which it could be displayed as part of this page, but the source is not necessarily associated with the page itself, meaning the embedded content is independent and usually served from an external source or served from another website, but when embedded it appears as part of your website.

Example

Some famous examples of embedding used on the internet all the time you might be using every day

  • Youtube video

  • Online form

  • Sound cloud track

  • Google Map

  • Payment widget

  • Complete website within a website

Let's take a look at examples of embedding a virtual tour:

Iframe embedding of a video tour

Taking one of our YouTube Channel Video Tours to demonstrate the code, This exact code translates on your page is the following video embedded on this page, embedding in action


<iframe width="560" height="315" src="https://www.youtube.com/embed/XDhVKtLB0ho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Here you can read there is special information enclosed within an <iframe> HTML tag, notice the details specifying the size of the frame, its source “src” which is YouTube, in this case, a frame border and other media related info that is interpreted by all web browsers.


Web URL embedding of an interactive tour

The web embedding code is a regular link to a page that usually renders inside another web page and usually does not have additional parameters in the link, however usually a secure link “ https://” is used to avoid blocking by some browsers or web builders.

An example of a web address URL embed is a virtual tour for Al Qattara Museum in Abu Dhabi that when opened it takes up the full page from edge to edge.

Another full page virtual tour of an archaeological site in the heart of Sharjah that requires flash enabled in the browser.

limitations

Main limitations or downsides of embedding rich media like a virtual tour or a video on your website are

  • Mobile Vs Desktop adjustments

As you’ve seen in the Youtube example above, the frame dimensions are specified in the code, while you may have a pixel-perfect web page for desktop visitors, the same frame dimensions could be misrepresented on the mobile version of your website, causing the embedded frame to exceed the screen width and not respect the responsiveness of your website, this results in negative user experience.

The solution, however, is simple, you can overcome this limitation by dedicating a copy of the page with your tour embedded taking mobile screen dimensions, for example

www.yourdomain.com/awesome-tour

www.yourdomain.com/awesome-tour-mobile


Additional tip: search engines might see this as an attempt to manipulate ranking, so it is recommended to set one page of the two as “canonical”, letting search engines like google know that these two pages are related, but explicitly asking them to index and rank one of the pages to avoid SEO penalties.

  • Reliability on the Source

As you embed your virtual tour media on your website, you are dedicating this box to the source file, meaning that downtime in the server or deletion of the file will result in an empty frame with errors on your page that may lead to breaking the page.


To overcome this you may upload the virtual tour files on your server directory and gain additional controls on the availability, however, this may also require additional developer setup. Depending on how critical that is to your business, you may find this approach debatable.

  • Page load speed

We personally found this limitation noticeable when we develop large HD or interactive tours that require lots of bandwidth to get the server files to render on the screen, this is of importance on mobile devices with precious data plans or slow computers, also a slow page load is never cool, as web developers and marketers go above and beyond to reduce the page load and save those milliseconds. An example of a loading intensive virtual tour from our portfolio is a 3D game virtual tour built with Unity, generated from a 3D and Drone scan for a UAE park https://www.geotech3d.com/mamzar-park-3d-tour


To overcome this you may want to plan ahead for the 360 virtual tours and take its size into consideration beforehand, either by splitting the tour to multiple smaller tours or reducing the render quality for commercial use upon exporting from the development software and setting up your web visitor expectations that this page may take longer to load.

At GEOTECH3D, we ship a large number of virtual tours to clients consistently, with larger tours we offer an additional service to create a guided video tour of the resulting 3D project, which acts as a quick alternative for sharing the tour without demanding a lot of bandwidth from the viewer, that if they like, a common behavior is to then launch the tour after enjoying the video, which is also a win for marketers which have an additional piece of content to publish.

Conclusion

Most modern web development tools offer special page blocks to handle embedding 360 Virtual Tour frames on your website, offering quick setup as easy as copy-paste of the code or the link, and we’re witnessing a rise in the use of technology and more marketers and developers adopting the external embedding on their business website without using code, hosting a 360 tour on a WordPress, Wix, or a fully native website is easier than ever with built-in plugins and simple steps.

If you have a question related to virtual tours or any Geospatial technology, do not hesitate to contact us and ask us, we’ll be more than happy to help and guide you for a successful end-to-end consultation.


In an upcoming post, we will provide tips and tricks for marketing and distributing your virtual tours to reach your audience and maximize the value of your content, subscribe to our newsletter to get notified.

  • GEOTECH3D YouTube Channel
  • geotech3d on twitter
  • GEOTECH3D on Instagram
  • GEOTECH3D Facebook Page
  • GEOTECH3D on LinkedIn

By continuing past this page, you agree to our Terms of Service, Cookie Policy, Privacy Policy and Content Policies. All trademarks are properties of their respective owners. © 2010-2020 - GEOTECH3D LLC. All rights reserved.