Hotspots¶

Add interactive elements to your 360° experiences with hotspots.

What Are Hotspots?¶

Hotspots are clickable points in your VR experience that trigger actions. Place them anywhere in your 360° scene to create interactive tours.

Hotspot Types¶

Info Hotspots¶

Display information when clicked:

• Title: Heading text
• Description: Detailed information
• Image: Optional visual content

Best for: Artwork descriptions, product details, historical information

Audio Hotspots¶

Play audio when activated:

• Audio File: MP3, WAV, or OGG
• Volume Control: Adjust playback volume
• Loop Option: Repeat continuously or play once

Best for: Narration, ambient sounds, music

Combined (Info + Audio)¶

Show information AND play audio simultaneously. Perfect for guided tours with narration.

Navigation Hotspots¶

Transport visitors to another stage in your experience. These appear as portals with visual effects.

Best for: Connecting rooms, creating walkthrough tours

Lead Capture Hotspots¶

Collect visitor information with customizable forms. Available on Basic, Pro, and Enterprise plans.

Best for: Contact collection, newsletter signups, appointment booking

Creating Hotspots¶

In the Editor¶

1. Open your sequence in the dashboard
2. Select a stage
3. Click the Hotspots tab
4. Click Add Hotspot in Preview
5. Click anywhere in the 360° view to place it
6. Configure the hotspot settings
7. Save your changes

Positioning Tips¶

• Eye level: Place info hotspots at y: 1.5 to y: 1.8 for comfortable viewing
• Floor level: Navigation portals work well at y: 0
• Distance: Keep hotspots 3-6 meters from the viewer center

Customization Options¶

Visual Settings¶

Portal Styles (Navigation Only)¶

Configuration Example¶

Here's a complete stage configuration with different hotspot types:

{
  "id": "gallery",
  "name": "Art Gallery",
  "skybox": {
    "type": "image",
    "url": "https://example.com/gallery.jpg"
  },
  "hotspots": [
    {
      "id": "welcome",
      "type": "info",
      "position": { "x": 0, "y": 1.6, "z": -4 },
      "infoTitle": "Welcome",
      "infoDescription": "Welcome to our virtual gallery!",
      "color": "#4CAF50",
      "size": 20
    },
    {
      "id": "audio-guide",
      "type": "audio",
      "position": { "x": 2, "y": 1.5, "z": -3 },
      "audioUrl": "https://example.com/narration.mp3",
      "audioVolume": 0.8,
      "audioLoop": false,
      "label": "Audio Guide"
    },
    {
      "id": "to-lobby",
      "type": "navigation",
      "position": { "x": 0, "y": 0, "z": 4 },
      "targetStageId": "lobby",
      "label": "Return to Lobby",
      "color": "#2196F3"
    }
  ]
}

Hotspots in VR¶

Hotspots automatically adapt to VR mode:

• Render as 3D spheres in space
• Highlight when pointed at with controllers
• Activate with the trigger button
• Info panels display on a floating 3D panel

Audio Behavior¶

Browser Autoplay Policy:

Browsers block audio autoplay until user interaction. Audio will work after:

• Clicking anywhere on the page
• Entering VR mode
• Clicking a hotspot

We handle this automatically - no configuration needed.

Best Practices¶

1. Don't overcrowd - 3-5 hotspots per stage is ideal
2. Use clear labels - Help visitors understand what each hotspot does
3. Consistent colors - Use a color scheme (e.g., blue for navigation, yellow for info)
4. Test in VR - Hotspot placement feels different in immersive mode
5. Keep audio short - 30-60 seconds for narration clips

Troubleshooting¶

Hotspot not visible?¶

• Check position values (may be behind the camera)
• Ensure opacity is > 0
• Verify the stage is saved

Audio not playing?¶

• Wait for user interaction (click anywhere first)
• Check audio URL is accessible (CORS headers required)
• Verify file format (MP3 recommended)

Navigation not working?¶

• Confirm targetStageId matches an existing stage ID
• Check the target stage exists and is saved

What's Next?¶

• Navigation System - Learn about maps and floor plans
• UI Customization - Brand your experience
• Self-Hosting - Export and host your tours