The 360 Image Viewer plugin allows you to display fully immersive, interactive 360° spherical panoramas inside your Bubble application. It is powered by the robust Pannellum library, providing a smooth and intuitive experience across both desktop and mobile.
Your users can:
Drag to explore the full 360° environment
Zoom in/out
Enter fullscreen
On mobile, physically move their device to look around using the accelerometer
This is perfect for real estate, hotels, product visualization, tourism, automotive, events, and any experience where panoramic viewing enhances engagement.
Key Features
Autoload support — load the panorama automatically on page load.
Autorotate — rotate the image automatically for hands-free viewing.
Flexible rotation control — set rotation speed (clockwise or counterclockwise).
Supports static or dynamic image sources.
External URL support (load images from any accessible URL).
Zoom & fullscreen controls — enable or disable as needed.
Mobile accelerometer navigation — users can look around by moving their device.
Bubble-friendly integration — just drop the element and bind an image.
👛 Please support our efforts to keep this plugin free - your donations help us invest the time and resources needed to continue maintaining and improving it for everyone’s benefit: https://zeroqo.de/support.
Prerequisites
Before using the 360 Image Viewer plugin, please ensure the following:
Bubble Account & Editor Access – You must have an active Bubble account with editor access to the app where the plugin will be installed.
Equirectangular Images – The images you plan to display must be in equirectangular format (2:1 aspect ratio).
Dynamic Content Setup – If you plan to use database-stored or external URL images, make sure these data sources are configured in your app.
Mobile Testing – For accelerometer-based navigation, test on actual mobile devices. Ensure device motion permissions are enabled.
Performance Considerations – Optimize image sizes for smooth rotation and faster loading.
How to Set Up
Step 1. Install the Plugin
Open your Bubble Editor.
From the left panel, go to the Plugins tab.
Click the Add Plugins button.
In the search bar, type 360 Image Viewer
Locate the 360 Image Viewer plugin by Zeroqode andclick Install (or Buy if it’s a paid plan).
After installation, it will appear under Installed plugins.
Step 2. Add the Viewer Element
Navigate to the Design tab.
Find the 360 Image Viewer element in the list of plugin elements.
Drag it onto your page (just like any visual element).
Once added, the plugin is ready to receive your image and settings.
Step 3. Configure the Properties
Select the 360 Image Viewer element and adjust its fields:
1. Image
Use Dynamic Image to load:
A Bubble file upload
A database-stored 360° image
An external URL
Important:
The image must be equirectangular (standard 360° panorama format).
2. Autoload
Enable if you want the image to appear immediately on page load.
3. Autorotate speed
Set rotation speed:
Positive value → rotates clockwise
Negative value → rotates counterclockwise
0 → stops rotation
4. Show Controls
Toggle viewer UI elements like:
Zoom buttons
Fullscreen toggle
Mouse drag controls
This lets you tailor the UX depending on the use case.
Step 4. Preview & Test
Open your app in Preview Mode and test:
Test the following:
Image loads correctly
→ If not, verify it is truly equirectangular (2:1 ratio)
Equirectangular refers to a projection method used to represent a 360-degree sphere on a 2D rectangle, similar to how a world map flattens the globe.
Autorotate behavior
→ Try different speed values (e.g., 2, -1, 0)
Controls
→ Zoom in/out
→ Enter fullscreen
Mobile device support
→ Open the page on a mobile phone
→ Move the device to test accelerometer navigation
Plugin Element - 360 Image Viewer
Fields
Title
Description
Type
Image
The 360° equirectangular panorama image to display (static or dynamic).
Image
Autoload
Loads the viewer immediately when the page renders.
Checkbox (yes/no)
Autorotate speed
Controls how fast the image rotates (positive/negative).
