How to build virtual tours in Bubble

In the Data tab, create these Data Types: (1) Tour — fields: title (text), description (text), creator (User), thumbnail (image), is_published (yes/no). (2) Scene — fields: tour (Tour), title (text), image_url (text — URL to the 360 panoramic image), order_index (number), pitch (number — default viewing angle vertical), yaw (number — default viewing angle horizontal). (3) Hotspot — fields: scene (Scene), target_scene (Scene), label (text), pitch (number — vertical position), yaw (number — horizontal position). These three types let you define tours with multiple linked scenes.

Pannellum is a free, open-source panorama viewer. On your tour viewing page, add an HTML element sized to fill the content area (e.g., 100% width, 500px height). In the HTML content, add the Pannellum CSS and JS from their CDN, a div container for the viewer, and a JavaScript initialization script that loads the panoramic image URL from your Scene data. Use dynamic data to insert the current Scene's image_url into the JavaScript. The viewer provides mouse drag to look around, scroll to zoom, and fullscreen toggle automatically.

1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.css"/>
2<script src="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.js"></script>
3<div id="panorama" style="width:100%;height:500px;"></div>
4<script>
5pannellum.viewer('panorama', {
6  type: 'equirectangular',
7  panorama: 'DYNAMIC_IMAGE_URL_HERE',
8  autoLoad: true,
9  defaultPitch: 0,
10  defaultYaw: 0,
11  compass: true,
12  hotSpots: []
13});
14</script>

Hotspots are clickable points within the panorama that navigate to another scene. In the Pannellum configuration, add hotspots to the hotSpots array. Each hotspot needs a pitch (vertical angle), yaw (horizontal angle), type ('scene'), text (label), and a click handler. Since Bubble HTML elements cannot directly call Bubble workflows, use a workaround: when a hotspot is clicked, update a hidden Input element's value on the page with the target scene's ID. Then use a 'Do when condition is true' event that watches for changes to that input and navigates to the target scene by updating the page data or custom state.

Create an admin page for tour creators. Add a form to create new Tours with title, description, and thumbnail upload. Below, show a Repeating Group of Scenes belonging to the current Tour, sorted by order_index. Each Scene cell has an edit button to update the image URL, title, and viewing angles. Add an 'Add Scene' button that creates a new Scene linked to the Tour. For hotspot management, display each Scene with its hotspots listed, and provide a form to add new Hotspots with target scene selection (dropdown of other Scenes in the Tour) and pitch/yaw coordinates.

Build a tour catalog page with a Repeating Group of published Tours (is_published = yes). Display each Tour's thumbnail, title, description, and a Start Tour button. The Start Tour button navigates to the tour viewer page, passing the Tour as page data. On the viewer page, load the first Scene (sorted by order_index, first item) and display it in the Pannellum viewer. Add Previous and Next buttons to cycle through scenes sequentially, and a scene list sidebar showing all scenes in the tour with the current one highlighted.