Hello Bar
A hello bar is a thin, full-width notification bar placed at the very top of a web page used to announce offers, drive clicks, or capture an email with minimal disruption.
Key takeaways
- The classic hello bar sits in document flow and pushes page content down.
- One line and one action is the whole format, leaving no room to persuade.
- Relevance to the page beneath it separates clicks from ignored screen furniture.
- A bar in flow scrolls out of view, so long pages need another pattern.
- Late-loading bars shift the page after paint and cause mistaken clicks.
In depth
A hello bar occupies one strip at the very top of the page, above the site header, and in its classic form it sits inside the document flow: the content below is pushed down by the bar's height rather than covered by it. It carries a single line of copy and a single action, usually a button or one input field. Because it renders first and overlaps nothing, it collects attention on arrival at almost no cost to whatever the visitor came to read.
Two variables dominate performance: how well the message matches the page it appears on, and how long the same message has been running. A bar tied to the article underneath earns clicks, while a site-wide announcement repeated for months turns into furniture that regular visitors stop registering. Height is the third variable, since every pixel pushes the headline further down, and on a phone a message that wraps to two lines can consume a quarter of the first screen.
Most teams run one bar per content group rather than one per site, matching the offer to what the reader is already engaged with. Because the click carries intent formed on a specific page, it should land somewhere equally specific rather than on the homepage. In a lead-qualification setup the bar becomes a one-click entry into a scorecard: the reader is invited to find out where they stand, and the quiz performs the qualification that a single line of copy never could.
The format has no room to persuade. One line cannot carry an argument, so a hello bar converts people the page has already warmed and underperforms badly on cold traffic arriving from ads. It also scrolls away, because a bar in document flow does not follow the viewport, which makes it the wrong choice for long pages where the decision happens near the end. And a bar that loads late shifts the entire page down after paint, causing mistaken clicks.
Example in practice
How to measure it
Click-through rate is the primary number: clicks divided by sessions where the bar actually rendered, which is not the same as page views when it loads conditionally. Read it per page group rather than site-wide. A single average hides the common pattern where the bar performs on articles and does nothing on product or pricing pages, and the fix differs completely in each case.
Then follow the click downstream. Compare the conversion rate of bar-sourced sessions against the site average on the same destination; a high click rate with a weak downstream rate usually means the copy overpromised. Watch the dismissal rate where a close control exists, and track how click-through decays over the weeks one message runs, which is the clearest signal that it needs rotating.
Common mistakes
The most common error is running one site-wide message indefinitely. It made sense during launch week, nobody owns retiring it, and a year later it is invisible to every returning visitor while still costing the top of every screen. Give each bar an end date, tie the copy to the page group it appears on, and take it down when the campaign behind it ends instead of leaving it as permanent decoration.
The second is pointing the click at the homepage. Someone clicks a specific promise made in a specific context, lands on a general page that repeats none of it, and the visit ends there. Send the click to a page that continues the sentence the bar started. A related habit is placing two actions in one bar, which destroys the single-choice clarity that makes the format work at all.
Frequently asked questions
Where should a hello bar appear on the page?
Most hello bars sit fixed at the very top of the viewport so they stay visible as users scroll. Some teams instead anchor it inline at the top of the content if a persistent bar feels too aggressive.
Is a hello bar the same as a sticky bar?
They overlap: a hello bar describes the top-of-page banner format, while "sticky" describes the behavior of staying fixed during scroll. A hello bar is often sticky, but it can also be static.
How do I keep a hello bar from annoying visitors?
Show one clear message, let users dismiss it, and remember that choice with a cookie so it does not reappear every visit. Rotate the copy by campaign so it stays relevant instead of becoming background noise.
Should a hello bar go at the top or the bottom of the page?
Top, by definition. A bar pinned to the bottom of the viewport is a sticky or floating bar, which is a different pattern with different mechanics. The top position is what lets a hello bar sit in the document flow without covering content, and it is also what makes it visible on arrival rather than after a scroll.
Is a hello bar less annoying than a popup?
Generally yes, because it never blocks what the visitor came for and requires no dismissal to keep reading. That politeness has a cost: click rates are far lower than an interruptive overlay, since ignoring it is effortless. The trade is fewer clicks against no interruption, which suits content pages where the reading itself is doing the persuasion.
Should a hello bar be dismissible?
Yes, and the dismissal should be remembered for that visitor. A close control costs little, since anyone who dismisses the bar was not going to click it, and the returning visitor who sees the same message five times without recourse learns to ignore your announcements generally. Store the dismissal locally and reset it when the message actually changes.
How often should I change the hello bar message?
Change it when the campaign behind it changes, and check click-through weekly for decay. There is no fixed schedule, but a message that has run long enough for your regular audience to have seen it several times has stopped working on them, even if new visitors still click. Rotating by page group is usually more effective than rotating by date.
Can a hello bar collect email addresses directly?
It can hold one input and a button, which is about the limit of the space. That works for a newsletter or a waitlist where an email is the entire ask. For anything requiring qualification, use the bar to start a flow rather than to finish one, since a single field returns a contact with no company, role or context attached.
Does a hello bar hurt Core Web Vitals?
It can, through layout shift. A bar injected by a script after the page has painted pushes everything below it down, which registers as instability and can cause a visitor to tap the wrong element. Reserve the bar's height in the initial render, or render it server-side, so its arrival changes no position that was already on screen.