3Sixty Studio
Docs Building a tour
Hotspots & actions
Hotspots are the clickable markers inside a panorama. Each hotspot has a title, a position, an icon, a size and a list of actions that run when a visitor clicks or taps it.
Place a hotspot
- Open the Hotspots section and pick the panorama you want to work on.
- Look around the panorama until the spot you want is in view, then click or tap where the hotspot should go.
- Give the hotspot a title. If you leave it empty, it is called "Untitled".
The title is for you: it identifies the hotspot in the editor and in delete warnings. Visitors see the icon.
To move a hotspot later, use Reposition and click the new spot. You can also rename or delete a hotspot at any time.
Icon and size
- Icon: any image from Image Assets. New hotspots use
default.png. Transparent PNGs look best. - Size: use Resize to scale the icon. 1.0 is the standard size; the allowed range is 0.25× to 4×.
In the tour, icons always face the viewer and a hotspot grows slightly when the Mouse Look reticle points at it.
Actions
An action is what happens when a visitor clicks a hotspot. Use Add Action and choose a type from Select Action. A hotspot can have several actions; they run in order with one click. The number of actions is shown as a badge on each hotspot in the editor.
Action types
| Action | Target | What the visitor sees |
|---|---|---|
| Open Panorama | A panorama from the project | The tour switches to that panorama. |
| Show Image | An image from Image Assets | The image in a full-screen lightbox. |
| Play a Video | An MP4 from Video Files | A video player that starts automatically, with controls. On iPhone it plays inline instead of forcing full screen. |
| Play an Audio | A clip from Audio Files | An audio player that starts automatically. |
| Open a PDF file | A PDF from PDF Documents | The PDF in a window, with an Open in new tab ↗ link (phones often show only the first page of an embedded PDF). |
| Open 3D Scene | A 3D scene from the project | The visitor enters the 3D scene and can walk around. |
| Open URL | A web address | The page opens in a new browser tab. |
| Execute JavaScript code | Your own code | Whatever your code does. See below. |
| Show Iframe | A web address, or a page from Custom HTML | The page inside a window, with its address and an Open in new tab ↗ link. |
Every pop-up (image, video, audio, PDF, iframe) has a close button. Visitors can also press Esc or click the dark area around the content.
Open URL and JavaScript: one per hotspot
A hotspot can have many actions of the other types, but only one Open URL and one Execute JavaScript code. Setting a new one replaces the old one; clearing the field removes it. When the hotspot is clicked, the regular actions run first, then the URL opens, then the JavaScript runs.
When you type a web address for Open URL or Show Iframe without https://, it is added for you.
Show Iframe tips
Many large websites refuse to be shown inside another page (they send an X-Frame-Options or Content-Security-Policy header). The window then stays blank. The Open in new tab ↗ link always works, but for such sites Open URL is the better choice. Video platforms usually offer an "embed" address that is meant to be shown in an iframe.
Execute JavaScript code
The code is inserted into the tour exactly as you write it and runs when the hotspot is clicked. It can call the tour's own functions, for example:
// Jump to another panorama
switchPanorama('kitchen.jpg');
// Open the tour map
showTourmap();
// Show an image in the lightbox
__3sixtyShowOverlay('image', 'images/menu.png');How positions are stored
A hotspot position is a 3D point on an invisible sphere around the viewer, saved as "x,y,z" in WTMProject.wtm. This format is compatible with projects made in the older 3Sixty desktop app, so old projects open with their hotspots in the right place. See the hotspot reference.