FLOATING PAGE VIEWER

Floating Page Viewer

Published May 2026

    •    Updated May 2026

Plugin details

Open any URL in a floating, draggable, resizable panel that sits on top of your current page. Instead of navigating users away to a detail page or popup, bring the content to them - perfect for quick lookups, side-by-side editing, or letting users reference one page while working on another.

Demo URL: https://stein-plugins.bubbleapps.io/version-test/floating-page-viewer/1778939101522x663593502250589200
Editor URL: https://bubble.io/page?id=stein-plugins&tab=Design&name=floating-page-viewer&type=page

Built primarily for embedding your own Bubble app pages (detail views, edit forms, related records) without losing context. The panel behaves like a real desktop window with header bar, minimize, expand, and close buttons, and full drag and resize. Drop it on a page or in a reusable header once and call it from any workflow.

Need drawer panels, bottom sheets, multiple windows, or full design control? Check out Floating Page Viewer Pro for advanced positioning, multi-window support, brand color customization, and "Close All" management.


Important - Read Before Installing

This plugin uses iframes to display pages, which means not every URL will work. Whether a URL loads is controlled by the target site's security headers, not by this plugin or by Bubble.

Works reliably:
· Your own Bubble app pages (after enabling the iframe setting - see instructions)
· Wikipedia, MDN, most documentation sites
· YouTube videos via the embed URL format (with autoplay support)
· Vimeo, CodePen, JSFiddle, and other sites that explicitly allow embedding
· Your own websites and internal tools that you control

Will NOT work (blocked by the site itself):
· Google, Gmail, Google Docs, Google Drive
· Facebook, Instagram, Twitter/X, LinkedIn, Reddit
· Most banks, SaaS apps, ChatGPT, Claude.ai
· Amazon and most major e-commerce sites
· YouTube's main site (use the embed URL instead)

When a site blocks embedding, the panel will load but show a broken page icon. There is no way around this from the client side - the browser refuses to render the content based on headers the target site sends. This is a fundamental web security feature, not a plugin limitation.

If your use case is embedding arbitrary external websites, this plugin will not meet your needs. It is built for embedding pages within your own Bubble app or trusted embed-friendly sources.


Features

Floating Panel
Opens any URL in a draggable, resizable floating window above the current page · Drag by the header bar to reposition · Resize from the bottom-right corner · Loading spinner shown while the page fetches

Window Controls
Minimize button collapses the panel to just the header so it stays accessible without taking up space · Expand button fills the viewport for fullscreen-style viewing, click again to restore previous size · Close button dismisses the panel and stops any video or audio playback · Optional dimmed backdrop for modal-style focus with configurable click-to-close

Workflow Integration
Open, close, minimize, restore, expand, contract, navigate, and reload via element actions · Set the panel title contextually with each open call · Reopen on the same panel without recreating the element

Styling
Initial width and height · Panel corner radius · Backdrop toggle and click-to-close behavior

Media Support
Video and audio embeds work properly with autoplay, fullscreen, and encrypted media support · Closing the panel stops playback automatically so background audio never leaks

UX Details
Panel centers automatically on first open · Remembers user position once moved · Cannot be dragged fully off-screen · Iframe is rebuilt on every navigation so broken loads recover cleanly on the next Open · Full touch support for mobile drag and resize

States Exposed
is_open - whether the panel is currently visible · is_minimized - whether the panel is collapsed to just the header · is_expanded - whether the panel is filling the viewport · current_url - the URL loaded in the panel

Events Triggered
opened - fires when the panel opens · closed - fires when the panel closes via the X button or backdrop · minimized - fires when the panel collapses · restored - fires when the panel expands from minimized · expanded - fires when the panel goes fullscreen · contracted - fires when the panel returns from fullscreen · iframe_loaded - fires every time the loaded page finishes loading


Want More?

Floating Page Viewer Pro adds:
· Page Viewer Multi element - spawn multiple cascading windows for CRM, dashboard, and multi-document workflows
· Drawer, Bottom Sheet, and Fullscreen positions - open panels docked to the side, slide-up from the bottom, or take over the screen. Perfect for chat widgets, edit forms, side references, and mobile-style action sheets
· Full styling control - customize header background and text color to match your app's brand
· Click-to-focus, "Close All" management UI, and per-window state across multiple open windows
· All future premium features

Free

For everyone

 stars   •   0 ratings

1 installs  

This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Stein & Company

Joined 2020   •   9 Plugins

View contributor profile

Instructions

Step 1 - Enable Iframes in Your App
Before placing the element, go to Settings - General - Allow to render the app in a frame/iframe and set it to Allow same origin only. Without this, the panel will appear but the page content will show as a blank error icon. Same-origin lets your app embed its own pages without exposing the app to embedding by external sites. To verify the setting took effect, open browser DevTools, look at the Network tab, click the iframe request, and check that X-Frame-Options is either SAMEORIGIN or absent.

Step 2 - Place the Element
Drop the Page Viewer element anywhere on the page. It renders as a tiny invisible placeholder - the actual panel lives above the page as a fixed overlay. For app-wide availability, place it once inside a reusable header element so every page can call its actions without re-placing it.

Step 3 - Configure the Panel
Set Initial Width and Initial Height for the panel's default size · Set Panel Corner Radius for rounded corners (default 8px) · Toggle Show Backdrop to dim the page behind the panel for modal-style focus · Toggle Close on Backdrop Click to let users dismiss by clicking the dimmed area.

Step 4 - Build the Open Workflow
On any button click or workflow trigger, choose Element Actions - Open · Set URL to a same-origin Bubble page URL. The cleanest pattern is Website home URL & "/your_page/" & Current Cell's Thing's unique id - this automatically resolves to /version-test/ in preview and your live domain in production · Set Title to a contextual label like "Customer: " & Current Cell's Customer's Name · Title is optional - omit it and the header stays blank or keeps its previous value.

Step 5 - React to State Changes
Use the exposed states in conditions and workflows · Hide other UI when is_open is yes · Refresh a repeating group when closed fires · Show a "Maximize" link when is_minimized is yes · Adjust surrounding layout when is_expanded is yes.

Step 6 - Drive Actions From Workflows
Available actions: Open, Close, Minimize, Restore, Expand, Contract, Navigate (changes the loaded URL without closing), and Reload. Each action can be triggered from any button, workflow event, or condition in your app.

Tips & Best Practices

Same-origin only - See the Important section above for the full list of what works and what does not. If you skipped that section, read it now before building your workflows.

Test vs Live URLs - Use Website home URL as the base of your URL expression rather than hardcoding the domain. This way /version-test/ is included automatically when previewing and stripped automatically in production.

Reusable header placement - For apps where many pages need to open the panel, put the element in your reusable header once. Every page that includes the header can call its actions without placing a new instance.

Video and audio embeds - The panel supports autoplay, fullscreen, and encrypted media. For YouTube use the embed URL format like youtube.com/embed/VIDEO_ID?autoplay=1. Closing the panel automatically stops playback so background audio cannot leak.

Mobile considerations - Drag and resize work via touch, but resizing a panel on a small phone screen is rough UX. Consider showing different UI on mobile breakpoints, or use Show Backdrop with a wider initial width so the panel feels more native.

Title is per-open, not a property - Pass the title as a parameter to the Open action, not as an element property. This lets the same panel show "Customer Details" one time and "Order #1234" the next without reconfiguring the element.

Recovery from blocked URLs - If a URL fails to load (broken page icon), simply call Open or Navigate with a different URL. The iframe is rebuilt fresh on each load so the broken state never persists.

Need more than one window open at once? - This Free version handles one panel at a time, which is the right fit for most flows. If your app needs to compare records side-by-side, run multi-document workflows, or open several pages simultaneously, upgrade to Floating Page Viewer Pro which adds a full multi-window manager with cascade positioning and click-to-focus.

Need to match your brand colors? - The Free version uses a clean neutral header (light grey background, dark text) that works in any app. To customize the header background and text color, upgrade to Floating Page Viewer Pro.

Types

This plugin can be found under the following types:

Element   •   Event   •   Action

Resources

Support contact

Documentation

Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.

Product

Bubble for

Discover

Learn

Resources

Community

Company

Legal

Terms

Privacy

©  2026, Bubble Group, Inc. All rights reserved.

Floating Page Viewer

Plugin details

Free

For everyone

Other actions

Platform

Contributor details

Instructions

Types

Categories

Resources

Rating and reviews

No reviews yet