Documents open in place, never navigating away

Invoices, agreements and change orders open in a modal over the dashboard, with their own page chrome suppressed by an embed mode.

What it is

A shared document modal plus an embed mode on each document page. Backdrop click and Escape both close, body scroll locks while open, and the panel widens for a full document. The embedded page hides its own back navigation, which would otherwise navigate the iframe, but keeps the print action.

Also called: invoice opens in a popup · do not take me off my dashboard · embedded documents

See it, piece by piece
01

Reading a bill never costs the customer their place

Every billing document used to navigate the customer off their dashboard, and a buyer who tapped an invoice to check one figure had to find their own way back. Invoices, agreements and change orders open over the dashboard instead. Backdrop click and Escape close them, and the page returns to exactly the scroll position it was at.

Live Project Dashboard
Cedar Hollow
Cedar Hollow Builders
Live Project Dashboard
Zimmerman Equipment Barn
Marla Zimmerman Approved Live
Underway now
Framing
Next milestone
Trusses Up
1184 Quarry Ridge Rd, Seneca, KS 66538
Build progress
60% · 21/35 milestones
Permitting
Dirt Work
Concrete
Materials
Framing
Siding & Roofing
Final Payment
The page a customer would otherwise be navigated away from to read one number. The real screen, drawn from the product’s own design system. Sample data — no customer information appears here.
02

A framed document loses its own navigation, not its print button

The invoice and the agreement each know when they are being shown inside the dashboard, and drop the back button and outer page furniture that would otherwise strand a customer inside a frame. Print stays, because the person reading their own agreement is exactly the person who wants a copy of it.

03

Paying opens a tab and the balance catches up when they come back

Hosted checkout refuses to load inside a frame, so the Pay button hands the customer a fresh tab and leaves the dashboard where it is. Returning to the dashboard tab re-reads the invoice, so the status and the remaining balance update in place rather than showing a bill they have just settled.

How it works
  1. 1The modal frames /invoice/{token}?embed=1 or /client/[id]/contract?embed=1
  2. 2Embed mode removes the back button and outer chrome from the framed page
  3. 3Escape is deferred to any nested overlay that is open
  4. 4Body overflow is restored to its previous value on close
Why we built it

Every billing document used to navigate the customer off their dashboard, and buyers who tapped an invoice to check one figure had to find their own way back. Invoices, agreements and change orders open in place over the dashboard. Print stays available inside them, because a customer reading their own agreement is exactly the person who wants a copy of it.

The problem
  • Customers navigated away from the dashboard to read a document
  • Nested navigation traps inside framed pages
Sound familiar?
What you get
Reading or paying never costs the customer their place
One document implementation serves the standalone page and the modal

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →