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 at 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.

Hotspot editor

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

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 explained 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 button. 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.

You can also change the icon color with the Set tint button.

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 Width, Height and Opacity of the hotspot.

Width & height

The width & height sliders go from 0 to 300%. If you need the hotspot to be larger than that, you can click on the percentage value on the right side and enter the value manually. It can go up to 600%:

By default the hotspots are scaled proportionally, that is height and width change together. But you can switch to non-uniform scaling and adjust the width and height separately. You can do that by clicking on the chain icon located between Width and Height labels.

The option to enter the value manually is available not just for the size slider, but in any other slider in the Kuula editor.

Opacity

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. Rotation

In this section, you can rotate the icon around to adjust the direction it's pointing to.

If you click on the Advanced button, you can adjust the icon rotation on all 3 axes: X, Y and Z. This can be useful if you want to position an element in a way that it blends into the environment in the photo, like for example align it to a wall or put it in perspective. Advanced rotation is especially useful in combination with the Wall position option described below.

4. Position

To position a hotspot in your post, you have to simply drag & drop 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 for yourself, so we recommend you to play around with those settings. Otherwise, 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.
• Wall is similar to the option above, this option will position the hotspot on a virtual "wall" around the camera. This option can be useful for precise positioning of elements that blend with the environment in the picture, especially when used with advanced rotation.
• 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.

5. 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.

6. 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.

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, which automatically reorients the photos to match the direction of the post you're coming from. You can choose to override this feature for individual hotspots by checking the No walkthrough checkbox.

The other one are backlinks, which allow 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.

This option supports several different link formats. You can use the regular web link that points to a web page, but you can also use email and telephone links, here's a few examples:

d. Play sound

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

6. Animation

In this section you can add animation effects to the hotspot. There are several animation modes to choose from and you can set the scale of the animated movement.

7. Master

In this section, you can choose whether the hotspot will appear on all posts in a tour or only on the current post. More information about master hotspots can be found in this tutorial.

That section is only visible if the edited post is part of a tour.

8. Settings

The last section, "Settings" contains several additional options for your hotspots.

Branding

Using the Contains branding checkbox, you can mark hotspot that contain elements such as logos or realtor and agent information.

This function is optional. You do not need to use it even if the element contains branding, but it can come handy if you want to export the tour to MLS.

Tours on MLS cannot contain any branding, realtor or agent information. You can mark addons that contain such information by selecting the check box. This way they will not appear in links that are exported as MLS links.

Scripting id

The Scripting id input is where you can assign an unique id to the hotspot. The Scripting id can then be used in Google Analytics tracking and in the JS Player API.

Deleting hotspots

At the very end, you can find the Delete button that can be used to remove the hotspot. You can also delete a selected hotspot using the backspace keyboard shortcut.

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.

Saving your work

When you feel satisfied with all the hotspot 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!