Post by Kadir Can T.
Dev-Lead @Deserve Studio
We built a smart banner system for Roamless that reads blog post titles and automatically shows the right country's eSIM — without touching the CMS on Framer. Here's how it works. The problem: Roamless has 500+ blog posts. Each one targets a different destination. The banner at the top of each post should promote the eSIM for that country. But manually setting this for 500+ pages — and keeping it updated — wasn't realistic. The constraint: They use Framer. No custom backend. No API calls. Everything had to live inside the Framer project itself. The solution: A Framer Code Override called SmartBanner. It reads the page title at runtime, scans it against a lookup table of 289 locations in 12 languages, maps the match to a Framer component ID, and switches the banner variant automatically. "Cleveland Airport WiFi" → detects Cleveland → maps to USA → shows the US eSIM banner. "Manchester Airport WiFi" → detects Manchester → maps to UK → shows the UK eSIM banner. When there's no location in the title? The system doesn't fall back to nothing. It randomly serves one of three general marketing variants, a product mockup, a promotion, or a referral banner, so every post always has a relevant, intentional banner. Zero CMS edits. Zero manual work per post. The result: Every blog post now serves a contextually relevant banner automatically. Destination posts get the matching country eSIM. General posts stay in rotation with brand-level messaging. New posts get the right treatment from day one. Built by Deserve Studio for Roamless. #Framer #NoCode #WebDevelopment #eSIM #Roamless
Video Content