Hotspots on a 360 spin

Adding Hostpsots to your 360 spins, is easy with Sirv.

In these demos, we have added multiple hotspots to two 360 spins.

Demo 1: Multiple Hotspots on every frame of a spin
Demo 2: Multiple Hotspots on the last frame of a spin

Demo 1: Multiple Hotspots on every frame of a spin

In this spin, we used a rotating tripod & to snap images, uploaded them into a folder on and added hotspots to each frame, and set the hotspots data types to show a variety of content.

Here’s the final results:

On each frame of this spin are yellow hotspots, which do different things on-click, including:

  • One hotspot displays text.
  • One hotspot displays an image.
  • One hotspot displays another spin within a spin and link
  • One hotspot displays clickable text, triggering a JavaScript function
  • One hotspot displays a website in an iFrame
  • One hotspot displays a combination of text, links, images, srcript functions and more

Here’s the steps we took to add the hotspots.

Here’s a input field showing a value set on the main page. When we click some of the hotspots in this 360 Spin, that trigger JavaScript, you can see how this value will change.

There’s so much you can do with Hotspots on 360 Spins, the possibilities are exciting!

Demo 2: Multiple Hotspots on the last frame of a spin

This demo shows how Sirv can add hotspots to images in our 360 degree product viewer.

On the final frame of this spin are 3 yellow hotspots:

The 3 hotspots do different things on-click:

  • One hotspot displays some text.
  • One hotspot displays an image.
  • One hotspot links to a URL.

The message uses HTML, so can contain anything you wish – “Add to cart” buttons, Facebook “Like” buttons, YouTube videos etc.

The message box is styled with CSS, allowing you to change the design as you desire.

A couple of other Sirv Spin features are utilized in this demo:

  • The spin has been configured to stop on the final frame. Normally, spins loop continuously.
  • Images are served in WebP format to Chrome and Opera browsers, for faster loading.

How to add hotspots

To start using hotspots, follow the tutorial how to add hotspots on a 360 spin. It explains how to download a .spin file and manually configure it.

.spin files are JSON files. You don’t need to be a programmer to customize them, though you will need a developer with CSS skills if you wish to change the default look of the hotspots.

It can take 1-4 hours to configure a spin with lots of hotspots. This process will be simplified with a graphical configuration wizard, to quickly configure hotspots in your Sirv account.

Please contact the team with any questions about hotspots.