Back to support

Hotspot Tutorial

A hotspot is an interactive element that you can add to your post or tour. Hotspots are composed of an icon and an optional label. When the user clicks on a hotspot, they can trigger a variety of actions.

You can add hotspots when uploading a new post or when editing an existing one. To access the Kuula Virtual Tour editor, click on Edit icon (pen) in the toolbar located in the top-right of the screen.

Hotspots can be added, edited and saved by all users. However, if you want to share a post with visible/active hotspots in it, you will need a Kuula PRO subscription. Learn more

The hotspot button is located in the panel that shows up on the right side when you enter the editor. You can also use the keyboard shortcut H to add a new hotspot.

Kuula post editor - hotspot button

Hotspot editor

When you add a new hotspot or select an existing one by clicking on it, a cyan frame will appear around it and the right side panel will show the hotspot editor.

Kuula post editor - editing hotspots

Editing tools

When working with your tours, you can use a variety of editing functions available in the top tools menu (marked with a circle on the screenshot above).

The tools include selecting multiple hotspots, editing using Cut/Copy/Paste and duplicating them. All those features are explaned in detail in the Working with addons tutorial.

Editor sections

The editor is divided in several sections, discussed below:

1. Icon

In this section, you can change the hotspot image by clicking on Change image link. This will bring a dialog, where you can select an image from a collection of built-in assets or upload your own. Uploading customs hotspot icons is covered in the Custom Hotspot Icons tutorial.

Kuula post editor - hotspot icon dialog

2. Appearance

You can adjust the position of the hotspot by dragging it on the photo, while in the Appearance section you can change the Size, Rotation and Opacity of the hotspot.

If you set the Opacity to 0%, the hotspot will be invisible, but when it's hovered, the cursor will turn into a pointer icon and it will be clickable. This way you can make transparent hotspots.

3. Position

To position ad addon in your post, you have to simply drag & draop around the photo. This section in the editor gives you a few additional positioning options.

These are some powerful functions that you may end up using a lot. All of them are easier to understand once you test them and see what they do yourself, so we recommend you to play with those settings. Oherwise, here's our best shot at explaining what they do:

  • 2D forces flat rendering, which prevents the hotspot from getting distorted when it's close to the edge of the screen. The hotspot will always face the camera.
  • Floor will position the hotspot on a "virtual floor" instead of around on the sphere. This is a great feature to use when building tours of real estate, since hotspots laid out on a floor feel more intuitive.
  • Scale on zoom will lock scaling of the image when you zoom in and out in the photo. This will prevent it from getting too big or too small as you zoom the panorama.

4. Label

Hotspots can have a text label. It's optional, but you can add one by typing text into the field. The buttons in this panel will allow you to select the font, size, color and background color as well as how the label is aligned to the icon. To remove a label, simply remove the text from the input field.

Only hover & force 2D

The Only hover checkbox, if enabled, will show the label when the user hovers the icon with the mouse cursor. On mobile there is no cursor, so the label will appear when the icon is close to the center of the screen.

Force 2D will render the label in flat 2D even if the hotspot is not set to 2D. This improves legibility, especially on Floor positioned hotspots.

5. Click action

The dropdown in this section can be used to select what happens when the user clicks on the hotspot. Hotspots can have 4 types of action:

a. Go to another post

This action will take the user to another 360 photo. When you select it, a dialog will show up allowing you to select the photo to link to.

Kuula post editor - hotspot go to post dialog

Make a choice from the current tour or from any of your photos. You can also use the third tab to link to ANY post on Kuula. In the third tab, if you paste a link to a photo in another tour, ex. https://kuula.co/post/7lb6z/collection/7fzpr the hotspot will allow you to jump to this tour.

There are two very important features associated with this hotspot action. One is the walkthrough mode, that automatically reorients the photos to match the direction of the post you're coming from. The other is the backlinking, that allows you to automatically generate back links in posts that you choose in the dialog above.

Take some time to read about both, since they allow you to make better tours and much faster!

b. Open card

Clicking on the hotspot will open a card with some content in it (video, images, text). You can edit the content of the card after selecting this option. See the Interactive cards tutorial for more details.

c. Open link

With this option, clicking on the hotspot will simply open a web page in a new browser tab. After you select the Open Link option, type or copy/paste the URL into the input field that appears below it.

d. Play sound

Clicking on the hotspot will play an attached sound. You can select the sound from your media library.

6. Settings

Here you can assign a name, also called a Scripting id, to your hotspot. Hotspot Scripting id are used in Google Analytics tracking and in the JS Player API.

In the settings, you can also delete the hotspot.

Editing hotspots on mobile devices

All the editing options are also available on mobile. Simply open your mobile browser, such as Safari on iOS or Chrome on Android, go to the post you want to edit and hit the Edit (pen) button at the bottom of the screen. You will be taken to the editor interface for this post.

Kuula post editor - mobile UI

Saving your work

When you feel satisfied with all the hotspots edits, hit the green SAVE button in the top-right or S on your keyboard to have all the changes. Once it’s done, changes are immediately visible in all existing links or embeds featuring this post.

Happy editing!

Close