VR Viewer

Create dynamic, interactive ad units with our VR Viewer Component, utilizing 360 video and panoramic images!

 

HubSpot Video

 

Resources:

Explore our Ad Gallery for examples of this component

 

In this article, you will learn:

How to add the VR Viewer component

How to Configure the VR Viewer component properties

 

Also see more info here:

https://www.sitepoint.com/embedding-virtual-reality-across-the-web-with-vr-views/

https://developers.google.com/vr/concepts/vrview-web

 

How to to add the VR Viewer component

  1. Once you’ve created your ad, click on the Components icon on the left side of the builder, and select VR Viewer (at the bottom).

    KB-VR-Viewer-Menu

  2. A placeholder will appear on the ad canvas and can be moved/resized anywhere on the canvas:

    KB-VR-Viewer-Canvas

How to configure the VR Viewer component properties

  1. With the placeholder selected on your canvas, you’ll see the VR Viewer Properties appear to the right of the builder:

    KB-VR-Viewer-Panel
  2. Choose Image Type – Choose 3D or 2D from the dropdown.
  3. If “2D” is selected, the following fields will show for selection:

    KB-VR-Viewer-Panel2
  4. Asset File – click in this field to upload your panoramic image or video file (Image/Video will show in the VR Viewer Placeholder and will automatically Autopan when previewed).
  5. Once the asset is loaded, it will show in the placeholder (you can resize, etc.):

    KB-VR-Viewer-Canvas-2D
If "3D" is selected, the following fields will show for selection:

KB-VR-Viewer-Panel

  • Disable Autopan – (deselected by default) selecting this will keep the initial image loaded, and the user can manually click and drag the panoramic image/video to view.
  • Disable VR Mode Button – (deselected by default) – if de-selected, and you have uploaded a video file, a viewfinder icon will show (next to the full screen icon) on mobile ads, which will disable the VR mode:
  • Full Screen icon – Click the eyeball tool KB-Animations-Eyeball in the left side tools panel to Preview your ad unit. Once in preview, clicking on the bracketed box icon to the right of your mute button will show the video in full screen mode.
  • Pause/Play icon – Once in preview mode, if a video file is used, the pause/play icon will allow users to pause or play the video:
KB-VR-Viewer-Fullscreen

 

Add any other assets to the ad, Preview, and Save.