FLOATING PAGE VIEWER PRO

Floating Page Viewer Pro

Published May 2026

    •    Updated today

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-pro/1778882786299x163115094521659740
Editor URL: https://bubble.io/page?id=stein-plugins&tab=Design&name=floating-page-viewer-pro&type=page

Pro includes two elements. Page Viewer manages a single panel that opens, closes, minimizes, expands, docks, and reopens - the standard "show me this detail page without losing context" use case. Page Viewer Multi is a full window manager that spawns a new floating window every time you call Open, with cascade positioning, click-to-focus, and standard desktop-style z-index stacking for true multi-document workflows like CRMs, internal tools, and dashboards.

Both elements support opening panels as centered floating windows, right or left side drawers, bottom sheets, or fullscreen - choose per-Open call from your workflow. Both are built primarily for embedding your own Bubble app pages (detail views, edit forms, related records) without losing context. Each window behaves like a real desktop window with header bar, minimize, expand, close, and optional "open in new tab" buttons, plus full drag and resize. Drop an element on a page or in a reusable header once and call it from any workflow.


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
· 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. The plugin includes an optional "Open in new tab" button you can enable so users have a one-click escape hatch for any URL the browser refuses to embed.

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.


Element 1 - Page Viewer (Single Window)

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 overlay shown until the page finishes loading

Position Modes
Pass a position with each Open call - center (default floating window), right (right side drawer), left (left side drawer), bottom (bottom sheet), or fullscreen · Docked positions get edge-only resize handles on their inward-facing edge · Drag a docked panel's header to undock it back to a centered floating window · Double-click the header to snap between docked, centered, and fullscreen states

Window Controls
Minimize button collapses the panel to just the header so it stays accessible without taking up space · Expand button maximizes the panel to fullscreen and back · Close button dismisses the panel · Optional "Open in new tab" button lets users pop the loaded URL into a browser tab · Optional ESC key closes the panel when the parent page has focus · 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 · Set position per open call · Pass an optional separate external URL for the "Open in new tab" button (useful when the iframe loads an embed URL but the new-tab button should open the canonical page) · Reopen on the same panel without recreating the element

Nested Iframe Safety
If the plugin runs inside an iframe (e.g. preview-in-preview or embedded reusable), Open delegates up to the top-level Viewer via postMessage so panels never get trapped inside an existing panel's iframe

Media Playback Cleanup
On close the iframe source is cleared to immediately stop any audio or video playback - no orphaned media after the user dismisses the panel

Styling
Header background color · Header text color · Panel corner radius · Initial width and height · Backdrop toggle · ESC-to-close toggle · Open-in-new-tab button toggle

UX Details
Panel centers automatically on first open · Remembers user position once moved · Cannot be dragged fully off-screen · Docked positions remember user-resized widths and heights · 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 currently in fullscreen mode · current_url - the URL loaded in the panel · current_position - the active position mode (center, right, left, bottom, or fullscreen)

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


Element 2 - Page Viewer Multi (Window Manager)

Features

Multiple Floating Windows
Every Open call spawns a brand new window · Centered windows cascade-offset from the previous one so they do not fully overlap · Docked windows cascade along their dock edge so prior drawers peek out beyond newer ones · Each window is independent with its own header buttons, drag handlers, expand state, and resize logic

Position Modes Per Window
Each Open call accepts a position - center, right drawer, left drawer, bottom sheet, or fullscreen · Mix positions freely - open one window as a right drawer and another as a centered float · Drag a docked window's header to undock it · Double-click any header to snap between docked, centered, and fullscreen states

Click to Focus
Clicking, dragging, or resizing any window brings it to the front · Clicking the iframe area of a back window also brings it forward via an invisible click-catcher overlay · Focused window URL exposed as a state for workflow logic · Standard desktop-style z-index management across all open windows

Window Controls
Each window has its own minimize, expand, and close buttons · Optional "Open in new tab" button per window · Optional ESC key closes the topmost (focused) window when the parent page has focus · Close All button automatically appears in every window header once 2+ windows are open (toggleable off) · Close All element action wipes every open window in one call · Optional shared backdrop dims the page when any window is open

Nested Iframe Safety
If the plugin runs inside an iframe, Open delegates up to the top-level Viewer via postMessage so new windows always open at the page level, not nested inside another window's iframe

Media Playback Cleanup
On close (single or Close All) each iframe source is cleared to immediately stop any audio or video playback

Styling
Header background color and text color apply uniformly across all windows · Panel corner radius · Default width and height for new windows (each can be resized after opening) · Backdrop toggle · ESC-to-close toggle · Open-in-new-tab button toggle · Close All button visibility toggle

UX Details
Centered cascade wraps after 8 windows to prevent off-screen drift · Docked cascade wraps after 6 windows · Each window remembers its own minimized state, expanded state, and per-position resized dimensions · Touch support for mobile drag and resize

States Exposed
open_window_count - how many windows are currently open · last_opened_url - URL of the most recently opened window · focused_window_url - URL of the topmost window, updates when the user clicks a different window

Events Triggered
window_opened - fires every time a new window is opened · window_closed - fires when any single window is closed via its X button or ESC · all_closed - fires when the last window closes or Close All is called · iframe_loaded - fires every time any window finishes loading

$19

One time • Or $4/mo

 stars   •   0 ratings

0 installs  

This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Stein & Company

Joined 2020   •   8 Plugins

View contributor profile

Instructions

Step 1 - Enable Iframes in Your App
Before placing either element, go to Settings - General - Allow to render the app in a frame/iframe and set it to Allow same origin only. Without this, panels 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 - Choose Your Element
Pick Page Viewer if you only ever need one panel open at a time. This is the right choice for most flows - simpler workflow logic, cleaner states, and a single panel that opens, closes, expands, docks, and reopens. Examples: quick detail view from a list, edit form in a side drawer, help docs as a bottom sheet without losing the user's place.
Pick Page Viewer Multi if your app needs tab-like or multi-document workflows where users compare records, reference multiple pages at once, or work across several detail views simultaneously. Examples: CRM with multiple customer cards open, comparison tools, dashboards drilling into multiple records, mixed layouts with a right-drawer detail and centered floating notes.
You can use both elements on the same page if you have different use cases.

Step 3 - Place the Element
Drop the chosen 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 4 - Style the Panel
Configure Header Background, Header Text Color, Panel Corner Radius, Initial Width, and Initial Height in the element properties. Use CSS color values like #f5f5f7 or rgb(245, 245, 247) for colors. For Multi, these styles apply uniformly to every window. Initial width and height are also used as the default size for docked drawers and sheets (right and left drawers use Initial Width, bottom sheets use Initial Height).

Step 5 - Configure Optional Toggles
· Show Backdrop - dims the page behind the panel for modal-style focus
· Close on Backdrop Click - lets users dismiss by clicking the dimmed area. For Page Viewer Multi this closes all windows at once - leave it off if you want users to close windows individually
· ESC Closes - lets users dismiss via the Escape key. Only works when the parent page has focus, not when focus is inside the iframe
· Show Open in New Tab Button - adds a header icon so users can pop the loaded URL out to a real browser tab. Especially useful as a fallback escape hatch for URLs that refuse to embed
· (Multi only) Show Close All Button - automatically renders a Close All button in every window header once 2+ windows are open. Off renders no in-header button so you can build your own

Step 6 - Build the Open Workflow
On any button click or workflow trigger, choose Element Actions - Open.
· URL - same-origin Bubble page URL. The cleanest pattern is Website home URL & "/your_page/" & Current Cell's Thing's unique id which automatically resolves to /version-test/ in preview and your live domain in production
· Title - optional contextual label like "Customer: " & Current Cell's Customer's Name · Omit to leave the header blank or keep its previous value
· Position - optional, one of center, right, left, bottom, fullscreen · Defaults to center · Lets the same panel act as a side drawer for one flow and a centered popup for another without changing element settings
· External URL - optional override for the "Open in new tab" button. Useful when the iframe URL is an embed format (e.g. youtube.com/embed/xyz) but the new-tab button should open the canonical page (e.g. youtube.com/watch?v=xyz). If omitted, the button uses the iframe URL

Step 7 - React to State Changes
Use the exposed states in conditions and workflows.
Page Viewer: hide other UI when is_open is yes · refresh a repeating group when closed fires · show a "Maximize" link when is_minimized is yes · render breadcrumbs based on current_position (e.g. show "(side drawer)" when current_position is right) · dim other side-panel UI when is_expanded is yes.
Page Viewer Multi: show a "Close All" button only when open_window_count is greater than 0 (if you have it disabled in-header and want to render your own) · react to focused_window_url changing to update related UI · use last_opened_url for breadcrumbs or recent-history features.

Step 8 - Drive Actions From Workflows
Page Viewer supports Open, Close, Minimize, Restore, Expand, Contract, Navigate (changes the loaded URL without closing or resetting position), and Reload.
Page Viewer Multi supports Open (spawns a new window) and Close All (wipes them all). Individual windows are managed by the user via their own header buttons - this is intentional, since with multiple windows there is no clean way to target a specific one from a workflow.

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.

Position per call, not per element - Position is passed to the Open action, not set as an element property. The same Page Viewer instance can act as a right drawer for an edit flow, a bottom sheet for help docs, and a centered popup for confirmations - one element, three behaviors, picked at workflow time.

Drawer widths and sheet heights - Initial Width is used as the default for right and left drawers; Initial Height is used as the default for bottom sheets. Users can drag the inner edge of any docked panel to resize it, and the new size is remembered per docked position for the lifetime of the panel.

Drag-to-undock and double-click snap - Both are user gestures, not workflow actions. Grabbing a docked panel's header and dragging more than a few pixels converts it to a centered floating window under the cursor. Double-clicking the header cycles between docked, centered, fullscreen, and back to the previous dock. Mention these in your app's help docs if your users won't discover them on their own.

ESC limitation - ESC only fires for the parent page, not inside the iframe. If a user is interacting with the embedded page, ESC will be swallowed by that page. This is a browser sandbox rule, not a plugin limitation. The Close button and backdrop click always work.

Open in new tab as an escape hatch - Enable this toggle if you embed any URLs that might be refused (e.g. a SaaS product page, an external doc). Users get a one-click way to view the page in a real browser tab when the iframe shows a broken icon. Use the External URL parameter to override what the button opens - critical when your iframe loads an embed format (YouTube embed URL, Vimeo embed URL) but you want the button to open the canonical viewable page.

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. The plugin also auto-delegates Open calls up through nested iframes, so a panel opened from inside an embedded sub-page still appears at the top level - no manual postMessage wiring needed.

Mobile considerations - Drag and resize work via touch, but resizing a panel on a small phone screen is rough UX. The bottom position is the most mobile-friendly - it behaves like a native mobile sheet. Page Viewer Multi is generally not recommended on mobile - the cascade pattern assumes desktop-scale screen real estate.

Page Viewer Multi performance - 5 to 10 windows perform well. 20+ windows may slow down the page since each one loads a full iframe. Use Close All to clean up, or add your own logic that calls Close All when open_window_count crosses a threshold.

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.

Single vs Multi - pick one per use case - If you need to programmatically close, navigate, reload, or change position of a specific panel from a workflow, use Page Viewer (single). Multi intentionally has no per-window targeting since there is no clean ID-passing pattern in Bubble workflows. Multi is for user-driven workflows where the user manages their own windows.

Combining both elements - You can place both elements on the same page if you have different use cases. For example: Page Viewer for a primary "edit current record" flow as a right drawer, Page Viewer Multi for a secondary "compare records" feature as centered floats. They operate independently and do not interfere with each other.

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

How Bubble works

Examples

Pricing

Learn

Resources

Community

Company

Legal

Terms

Privacy

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

Floating Page Viewer Pro

Plugin details

$19

One time • Or $4/mo

Other actions

Platform

Contributor details

Instructions

Types

Categories

Resources

Rating and reviews

No reviews yet