Guide5 min read

Bubble Landing Page Video

Prove the product above the fold, even when the real thing lives behind a login.

Build the above the fold proof for a Bubble app's own landing page, when the real product usually sits behind a login.

See how it worksYour first 60 seconds of video are free, with a watermark.
Verify your email to download it.

The job of an above the fold video is to answer one question fast: does this product actually do the thing the headline just claimed. A visitor who has not even scrolled yet is not committed to anything. They are deciding whether to keep reading, and a video that proves the claim in a few seconds does more work than another paragraph of copy underneath it. Every second the video takes to get to that proof is a second in which the visitor could decide the page is not worth their attention.

Bubble apps complicate this slightly, in a useful way. Because a Bubble build is frequently a real product with a database and user accounts from day one, the interesting workflow the landing page wants to prove is often the same workflow that lives behind a login. That means the landing page video has to bridge a gap other tools do not always have: showing the logged in product convincingly, on a page whose whole job is to convert a visitor who is not logged in yet. Getting that bridge right is most of the work in this format, since the rest of the recording is comparatively straightforward once a believable logged in state exists to record from.

What should the video open on?

Open on the result, not the setup. If the product's promise is "create an invoice in under a minute," open close to the moment an invoice appears, rather than starting on a login screen or an empty dashboard. A visitor deciding whether to keep reading does not need to watch an account get created. They need to see the outcome the headline promised, fast.

Landing page moment	What the video should open on	What to save for later
First two seconds	The result the headline promises	A login screen or empty state
Middle	The action that produces that result	Every other feature in the app
Close	A clean, legible end state	A long list of secondary capabilities

A Bubble Product Hunt launch video has a similar first impression problem, but for a gallery audience rather than a page visitor. This landing page video is the shortest, most compressed version of that same proof, built to hold up in the few seconds before a visitor decides whether to keep scrolling.

Prepare a demo account ahead of time with data already populated, so the recording can start from a state that already looks like a real product in use. Skipping the account creation flow in the recording is fine, and often better, since a landing page visitor rarely cares how the login works. They care whether the thing behind it does what was promised.

Prepare a demo account with data that already supports the promised result.
Start the recording as close to the promised outcome as the flow allows.
Avoid opening on an account creation screen unless signup itself is the page's promise.
Confirm the logged in state loads cleanly with no interruption before recording.

A supplied login credential is encrypted, used for a single render, then deleted. When a storyboard is planned first, the credentials are kept encrypted for that session and deleted at most two hours after their last use. That handling matters here because this format is one of the more common cases where a login is genuinely required just to reach the moment worth recording, since the alternative is a landing page video that never actually gets past the account screen to the thing the page is trying to sell.

What does the hint need to say?

Name the starting state as close to the promised result as possible, the action, and the outcome. "From the dashboard with three existing invoices, create a new one and show it added to the list" is specific enough for a clean render, while "show the invoicing feature" leaves too much room for the render to wander into a screen that does not match the headline. Test the exact hint against the exact prepared account before submitting it, since the account and the hint need to agree with each other for the render to come back matching what the page promises.

Keep to this order every time a new landing page video is needed:

Match the video to the exact outcome the page's headline promises.
Prepare a logged in state with data already in it, since the real product usually sits behind a login.
Keep the opening frame on the result the visitor cares about, not the login screen.

GogoScreen returns a narrated, edited MP4 from that hint, with zooms on the action, cursor smoothing, dead air cuts, and captions for a visitor who has not turned the sound on. Roughly one render in five needs a retry, and time is used only on success, so leave room for a second attempt before the page needs to go live.

Where should the video sit on the page and what else does it need?

Place the video where it directly supports the claim above it, usually right below the headline rather than lower on the page where fewer visitors will scroll to see it. If the page makes more than one distinct promise, a single video usually cannot prove all of them, and a second, more focused asset is often the better fix than stretching one recording to cover everything.

Once the landing page is converting visitors, the same app usually needs other assets that assume a different audience already exists. Sharing a Bubble project with a client covers the handoff version of this same product, a Bubble portfolio demo covers a case where the viewer has already chosen to look closer, and the Bubble app review walkthrough covers the internal sign off step that usually happens before any of this ships publicly.

For a shorter, similarly styled recording aimed at a builder tool, the Firebase Studio demo video guide covers a comparable above the fold problem. The broader landing page product video guide and the prototype demo video from URL guide go deeper on preparing the source material itself. If a first attempt does not come back usable, the demo video render failure guide covers what to change before resubmitting, and the SaaS demo video checklist is a useful final pass before publishing. A product demo GIF alternative is worth reading if the page previously relied on a static image instead. For a comparison of recording tools, read GogoScreen versus Demosmith. Start at the GogoScreen homepage, check pricing, browse the guides library, or see the rest of the comparisons.

Clarifications

Before you start

Should the landing page video show the login screen?

Usually not as the opening frame. Start on the result the visitor cares about, then let the video imply the account step exists rather than opening on it, since a login screen is rarely the reason someone came to the page.

How short should the above the fold video be?

Short enough to prove one result before the visitor scrolls away. A landing page video competes with everything else on the page for attention, so a single clear flow reads better than a long tour.

Does every visitor need to see the same flow in the video?

No, but the video should show the flow that matches the page's main promise. If the headline promises one specific outcome, the video should be the fastest possible proof of exactly that outcome.

Paste a URL, describe one flow, and get a demo video of your web app.

Your first 60 seconds of video are free, with a watermark. Verify your email to download the video.

View pricing Read the guides