Drag Scenes to Create Hotspots in Virtual Tour

Implementing Drag-and-Drop Hotspots

In traditional virtual tour builders, creating a navigation point (hotspot) often requires multiple clicks and manual configuration. Crezlo simplifies this by allowing you to drag a scene directly onto your main view, automatically generating a hotspot that links the two areas.

Phase 1: Preparation & Environment Setup

Before creating links, ensure your foundation is solid.

• 360° Asset Upload: Upload all high-resolution panoramic images (Living Room, Kitchen, Bedroom, etc.).

• Scene Labeling: Rename thumbnails in the bottom tray (e.g., "Main Hall" instead of "IMG_001") for clear navigation.

• Primary Scene Selection: Set your "New Home" or "Starting Point" as the default view.

Phase 2: The Core Workflow (Creation)

This is where the magic happens—moving from static images to a connected tour.

• Target Selection: Locate the destination scene in the bottom carousel.

• Execution: Click, drag, and release the thumbnail onto the 360° workspace.

• Spatial Alignment: Positioning the marker precisely where a user would naturally "walk" through the space.

Phase 3: Customization & Branding

Fine-tuning the hotspot to match the aesthetic of the tour.

• Visual Logic: * Select Animated Icons for high-traffic paths (e.g., a pulsing circle for the main hallway).

  • Set the Icon Color (Hex code support) to ensure visibility against the wall or floor color.

• Information Overlay: * Define Tooltip Titles (e.g., "Enter Bathroom").

  • Add Tooltip Descriptions for extra detail (e.g., "Features heated marble flooring").

• Trigger Behavior: Decide if the tooltip appears on Hover (fast browsing) or Click (mobile-friendly).

Phase 4: Quality Assurance (Testing)

Ensuring the user journey is logical and functional.

• Path Validation: Click through the hotspots to ensure they lead to the correct rooms.

• Two-Way Connectivity: Ensure that if you drag a "Bathroom" scene into the "Living Room," you also place a "Living Room" hotspot inside the "Bathroom" so the user can go back.

• Responsivity Check: Preview how the hotspot labels look on both desktop and mobile views.

Phase 5: Deployment

• Save & Sync: Verify the "Scene updated successfully" notification appears.

• Publishing: Generate the shareable link or embed code for your website.

🚀 Summary of the "Drag" Advantage