Looking back at hello bar

Looking back at a tiny project from December 2018, hello-bar was my attempt to bottle a very specific moment on the web: everyone was pasting JavaScript snippets to get a sticky “hello bar” for announcements, discounts, and GDPR-style notices, but most tools lived behind SaaS dashboards and monthly plans. I just wanted something you could install from npm, configure in code, and forget about. 🧩👇 In that ecosystem, you had three big categories: marketing hello bars like the commercial Hello Bar, consent banners pushed by GDPR, and generic “paste this JS” SaaS widgets. hello-bar tried to sit in the middle. It gave you the same powers, but as an open-source library that fit naturally into a frontend codebase. The interesting ideas were mostly about behavior, not styling. Targeting meant “policy as config”: only in the EU, only on /about, only with ref=producthunt, and only once per user. Everything ran client side, so it fetched IP data from ipinfo.io, read URL params, checked pathnames, and stored state locally. No dashboard, just a constructor with options. Layout was trickier. A fixed bar sounds easy until it collides with absolutely positioned headers or hero sections. The move option let you pass selectors, DOM elements, NodeLists, or arrays, then hello-bar would push those elements down and later unMove them. It was a very 2018 DOM-hacking approach. Clever, but a bit magical when multiple scripts try to “own” the layout. On top of that, I exposed a rich event surface: before-created, show-bar, close-bar, cta-mouse-click, start-ip-info, error-ip-info, and more. This was great for analytics and debugging, but it also highlighted a tradeoff I still think about. A wide event API is flexible, yet it can leak implementation details and make the library harder to evolve than a couple of higher-level hooks. If I were solving the same problem today, I’d probably push more logic away from the browser. Targeting rules would live on the server or in feature flags, consent would plug into a privacy framework, and UI would be a small React/Vue/Svelte component inside a design system. Instead of imperatively moving DOM nodes, we’d let layout primitives handle the space for an announcement region. The main lesson for me was that “it’s just a small widget” is almost never small. Once you add geo rules, persistence, accessibility, A/B testing, and analytics, you’ve quietly built a product surface. The trick is deciding early what belongs in the widget, what belongs in configuration, and what should be someone else’s responsibility entirely. hello-bar on GitHub: https://github.com/AnandChowdhary/hello-bar