How To Integrate Your Interactive 360° / VR Experience On Your Website

Dec 25, 2018 9:50:00 AM / by Viond

Blog-Banner-WebPlayer1

Even though headsets like the Oculus Go get a lot of attention when it comes to VR utilization these days but, Web VR also is a great way to distribute Virtual Reality experiences.


By integrating a Web VR Player into a website, it can reach the greatest audience possible. All the user needs to watch the VR experience is a computer or smartphone with internet connection.

Watch the interactive WDR Cologne Cathedral experience in our new Web VR Player

Visit the Cologne Cathedral in 360°, travel trough time to see its early stages and explore a variety of must-sees to guarantee an informative and educational experience. Test it yourself down below! Drag the image around to move from left to right and click the buttons and icons to activate the interaction.
 

More examples on viond.io.

 

Therefore, Web VR is great as marketing and sales tool to enhance a webpage or to tease products as virtual experience within a native VR app. With the Viond Web VR Player, user even can see the experience in the VR viewing mode and insert their smartphone in a cardboard.

 

In the following, we'll show you how you easily integrate your interactive VR tour into your website.


Need a reminder on how to create incredible 360°/VR experience? Read our Ultimate Guide To Create Your First Interactive VR Experience or have a look at our latest Webinar and, if you haven’t done yet, try our Free Trial license of Viond to get started.


 

Use Web VR in combination with Native VR

A lot of our clients use the Viond Web VR Player to showcase their interactive 360°/VR experience on their webpage, where they reach a broad audience which can be attracted to the content. However, they use it to direct users to their native VR apps, where the user experience is on a totally different level.

 

In order to direct users to their native apps, Viond provides them with several options: They can use a simple deeplink, which opens their app directly on a mobile device, a QR code, which can be scanned with any mobile device, or the user types in a 6-digit code in the Viond App that allows to open their very experience in the Viond mobile or Oculus Go App (or any other device, where a direct link is not possible).

 

Builder + QR Code

The QR code can also be shared anywhere else – even printed.

 

Integrate the Web VR player as a customized iframe on your webpage

The Viond Web VR player can easily be integrated in any webpage by embedding just a few lines of code. Once you published your experience in the Viond Builder, the iframe will automatically be created. Basically you only have to copy and paste the whole code and all your website visitors will be able to play around with your interactive 360°/VR experience. 
Although you can choose any size for your iframe, we would recommend to not use full screen. The content possibly shows some pixilation, if the player is too big. Also, a nice gimmick is to offer users added value like additional information on content and usage.

 

Embed Code Image

The code will be generated automatically. Just copy and paste the HTML-Code.

 

Extra Tip: Easily create navigation symbols or text boxes for hotspots by using Powerpoint 

In order to build an interactive VR experience, you might need additional 2D graphics for navigation, buttons or text boxes. The easiest way to design graphics is with Powerpoint. You just have to create a graphical element or a text box and export this as a graphic (JPG or PNG).


How to: Right click on the graphical object and choose “save as picture”.


As the PNG format has a transparent background, we recommend to use this instead of JPG - but it's up to you. After creating such graphics, you can use them as interactive elements (hotspots) within the Viond Builder. Of course, you can also use Photoshop or any other more advanced graphic tool to create your 2D images and text boxes as well.

 

Powerpoint-SaveAsPicture

 

That's it! Reach out to us, if you have any comments and questions or if you want to discuss your next VR project. We are happy to help!

 

 Start Free Trial 

 

Topics: Viond Products

Viond

Written by Viond