Mango360 — interactive 360° virtual toursMango360
Back to the blog
Getting Started

Publish your first 360° tour in 30 minutes

From one equirectangular panorama to a published, shareable tour with hotspots, a lead form, an embed code and analytics.

8 October 20263 min readby Elena Sorokina
Publish your first 360° tour in 30 minutes

A 360° virtual tour does not need a studio, a film crew or a year of planning. One equirectangular panorama and about half an hour are enough to publish a tour that opens on a phone, embeds into a website and reports who looked at it. This guide walks the exact path inside Mango360: uploading and validating a panorama, connecting two scenes with hotspots, adding a lead form, publishing an immutable version and pasting the embed code into a page. The timings assume a broadband connection and a recent laptop.

Prepare a panorama that passes validation

  • 2:1 equirectangular output, 8192 × 4096 pixels or better — a 4:3 or 16:9 file gets cropped by the viewer, and the missing third of the horizon is exactly where the floor and the ceiling sit
  • jpg or png; use tiff only when your stitching pipeline produces one
  • File size below 40 MB — anything larger is better compressed to webp locally first
  • A level horizon, with the tripod mounted horizontally rather than on a tilted head

Upload and let the platform build the derivatives

Drop the file into the project and validation runs immediately, reporting the two failures behind almost every rejected upload: a wrong aspect ratio and a colour profile the browser cannot decode. When validation passes, Mango360 generates a preview plus low, medium and high quality derivatives in webp and avif, so the same tour stays usable on a slow mobile connection and crisp on a desktop.

  1. Create a project, then drop the panorama into its scene list
  2. Wait for validation, then compare the preview against the file you uploaded
  3. Rename the scene after its real location so the floor plan stays readable
  4. Add a second scene and repeat the same upload for it

Connect the scenes with hotspots

Hotspots are what turn a slideshow into a tour. A scene link moves the visitor to another scene, an info hotspot opens a panel with text and an image, a media hotspot plays video or audio, a CTA button sends the visitor out, and a lead form captures a name, a phone number or an e-mail before the visitor moves on.

  • Put a scene link on the doorway you actually walked through, not on an arbitrary wall
  • Limit info hotspots to two or three per scene; every panel competes for attention
  • Anchor a CTA button to an object in the frame so it reads as part of the room
  • Add the lead form to the final scene, and set a webhook URL if your CRM should receive the data

Publish, embed and share

A published version is immutable: the build your visitors see cannot change underneath you. When something has to change, publish a new version and roll back from the version history if the new one performs worse.

  1. Publish a version, then set visibility to public, unlisted or password-protected
  2. Copy the one-line iframe embed and add the parameters for a different start scene or a minimal interface
  3. Generate a QR code for reception desks, printed brochures or a stand inside the building
  4. Open Analytics after the first hour of traffic to see opens, scene views and drop-off points

Start on your strongest frame. A tour that opens on an empty corridor looks broken, so make the first scene the reception desk with people in it and point the scene parameter at it.

Half an hour is realistic for a two-scene tour with hotspots and one form. The next hour usually goes into the third and fourth scene, and that is the right order of priorities: get the structure right once, then repeat the same scene layout for every floor of the building.

Build your first tour in 30 minutes

The same workflow inside the editor — hotspots, floor plans, lead forms and analytics.

Open the studio