How to build virtual tours in Bubble

You build virtual tours in Bubble by embedding a real 360‑viewer (usually a JavaScript library or an external service) inside an HTML element or an iFrame, then storing each “scene” in your Bubble database and switching the viewer’s content with workflows. Bubble itself cannot render 360° or panoramic interactions, so you integrate a viewer like Marzipano, Google Street View embeds, or any web-hosted 360 tour tool that provides an embed link.

Core Idea

You host or embed a 360‑viewer, pass it image URLs stored in Bubble, and use Bubble workflows to switch scenes, hotspots, or navigation buttons. Bubble handles the data structure and UI around the viewer, while the viewer handles the 3D rotation.

What you need in Bubble

• Data type “Scene” with fields: name (text), panorama_image (image), description (text), next_scene (Scene).
• RepeatingGroup or buttons to let users select scenes.
• HTML element to render the viewer.

Embedding a 360 viewer

A safe, simple beginner-friendly approach is Marzipano (free and open-source). You host the JS/CSS on your own file host (e.g., GitHub Pages, Netlify) and reference it inside an HTML element in Bubble.

<div id="pano"></div>

<script src="https://example.com/marzipano.js"></script>

<script>
// Bubble exposes dynamic data using "script" tags with placeholders
var imageUrl = "<dynamic_image_url>"; // Insert Bubble dynamic image URL

var viewer = new Marzipano.Viewer(document.getElementById('pano'));

var source = Marzipano.ImageUrlSource.fromString(imageUrl);
var geometry = new Marzipano.EquirectGeometry([{ width: 4000 }]);

var view = new Marzipano.RectilinearView();
var scene = viewer.createScene({ source: source, geometry: geometry, view: view });

scene.switchTo();
</script>

How the dynamic part works

You place this HTML element inside a Group whose data source is “Current Scene”. Then replace <dynamic_image_url> with Bubble’s dynamic expression: “Parent group's Scene’s panorama\_image”. Bubble injects the actual URL when the page renders.

Switching scenes

• Create a workflow: When user clicks “Next”, set the parent group’s data to “Current Scene’s next\_scene”.
• The imageUrl inside the script updates, and the viewer loads a new 360 image.

Optional: Hotspots

You can store hotspot coordinates (x/y) and target scene. When rendering, loop through them using JavaScript inside the HTML element and add clickable hotspots that trigger Bubble workflows via the “Bubble.fn” API or simply swap the group’s data.