🚀 [NEW PLUGIN] Panorama viewer - 360 Virtual Tour

MindForApps · 2025-02-11T10:20:33.733Z

[NEW PLUGIN] Panorama viewer - 360 Virtual Tour

Hello fellow Bubblers!
We have recently published a new plugin and would like to share this news with you:

Panorama viewer - 360 Virtual Tour - no-code plugin allows you to bring virtual tours and panoramic photos into your Bubble app. You can easily create interactive virtual tours, maps, and presentations. The plugin also supports information and navigation markers (HotSpots), which can provide information about specific areas within a scene or provide navigation to other rooms or areas.

Panoramic images can be provided in either equirectangular or cube map formats. Equirectangular is the simplest to use as only a single image is needed. However, to ensure support among all WebGL-capable devices, the maximum image size should be preferably limited to 4096px wide; 8192px is also acceptable for most devices. Cube maps require six images but support somewhat higher resolution panoramas, as the vast majority of devices support cube faces up to 4096px across. Although larger images are supported, download sizes should be taken into consideration. This format is a cube map-based format, except each cube face is a tiled image pyramid instead of a single image.

Since it is not obvious from the examples, it is prudent to note that the hotSpotDebug parameter exists to aid in the placing of hot spots. It can be enabled while setting up the hot spots, but it should always be disabled in production.

pannellum.js was used in the process of creating the plugin.

Features:

Equirectangular, cubic panoramas
Autoload and autorotate the image for seamless experience.
Configure autorotation speed to control the image rotation.
WebGL and CSS 3D based renderers
Interactive controls with zoom and fullscreen options.
Hot spots / tours
Compass headings
API
Just 21kB gzipped
Browser Compatibility
Plugin is built with recent web standards, it requires a modern browser to function.

Full support (with appropriate graphics drivers):

Firefox 23+
Chrome 24+
Safari 8+
Internet Explorer 11+
Edge

pano-min

.

pano-min

Installation:

Add a plugin to your application.
Place a “viewer” element on the page. Give it the required dimensions. If necessary, change the default parameters.
In workflows, using the desired event (for example, “Page is loaded”, “An element is clicked” or another) connect the “addScene” action for each scene (image) in the virtual tour.
Include the required fields: Scene ID I and Panorama URL. Next, configure scenes as needed and, if necessary, install and configure hotPoints.
You can find more detailed information and examples on our demo page and on the page with the manual.

Demo:
For details and demos please visit the plugin page at

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Demo app editor:

Bubble

Bubble Editor - Virtual Tour

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Manual:

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Plagin page:

Bubble

Templates for Bubble

Buy and sell Bubble templates to speed up app development. Bubble is a visual programing language that lets you build apps without code.

Plugin details:

Mindforapps

Mindforapps | No Code Apps

We design & develop custom applications on Bubble.io to help your Business thrive.

Need help adjusting your new application?
Contact Jay at contact@mindforapps.com

Support
If you have questions, reach out to us at support@mindforapps.com

We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

wellingtonsilvah · 2025-03-04T01:18:14.343Z

Hello, congratulations on your plugin, it’s amazing. I would like to know, for example, if I can create different clickable areas, simply by “continuing with the tour”, for example, I click on the ground and it opens a popup or something that brings me information or options for that element or changes it.

I would like to combine both of your plugins, I would like to use something similar to the plugin within the tour

Mindforapps

Image Mapster - a plugin for creating and viewing image maps.

The image map plugin allows you to define specific areas of an image as clickable or interactive areas. These areas, known as hotspots, can trigger actions or link to related content when users click on them. This innovation greatly increases user...

MindForApps · 2025-03-04T14:55:41.065Z

Hello!
Thank you for the kind words about our work. It really motivates us to continue creating new and improving old plugins.

As for your question, unfortunately there is no way to create areas.

You can only create information hotspots. Depending on how you configure them, the following actions will be available:

hovering over an information hotspot will display a tooltip with predefined information.
clicking on an information hotspot will open (in a new window) a predefined link.

And, unfortunately, it is not possible to directly merge these two plugins. They work with completely different data.

Sorry, but unfortunately it depends on the design of these plugins.