# Designing the front door > Source: > Published: 2026-06-08 16:09:14+00:00 # Designing the front door ### The chat widget was built for support teams. AI Agents need a different interface. For about 15 years, most websites have had the same little circle in the bottom-right corner. Sometimes blue, sometimes pulsing, mostly polite enough to stay out of the way. Click it and a panel slides up with a friendly greeting and an estimated wait time. On the other side, was your support team. We know a lot about this widget because we invented it, and the industry followed – down to the design. But on most websites today, what’s on the other side of the circle isn’t a person, it’s an Agent, always on and ready to respond. Despite the backend evolving significantly, the look remains the same. This is fine for support where customer behavior is established, but as Agents move into other parts of the customer lifecycle, they’ll need a different interface to encourage engagement. Different roles deserve different front doors, and this became especially clear when we designed Fin for Sales. **AI-first, not AI-added** Almost every design assumption baked into the chat widget is about the human support team behind it. The launcher icon is small and discreet to discourage overuse, as the reps have limited capacity. The Messenger’s UI manages expectations around response times, as teams are frequently overloaded or only available during set hours. But when building for an Agent, especially one outside of support, none of these assumptions hold. This means we have to approach designing differently. Instead of just taking what was and building on top of it, we look at things with fresh eyes and ask how the form factor must change when the experience is first and foremost agentic. The difference is going AI-first, not just AI-added. **Designing for agentic experiences beyond support** When we set out to design Fin for Sales, here’s what we considered: **Entry points set expectations**. For many, a chat widget signals “click here when something’s broken,” thanks to more than a decade of that being its only use case. When a visitor is on a pricing page evaluating options, they may not think a widget is the best place to ask questions. The same goes for ecommerce. **Show, don’t tell.** Text was always a placeholder. When you ask about pricing, the natural answer isn’t a paragraph describing a comparison – it’s a chart. When you ask where something lives, the answer is to walk you there. Cards, tables, voice, video, inline navigation – the modality should match the question. A pure-text thread will quickly become tiring. **Visibility comes with responsibility.** A widget hidden in the corner has the luxury of being ignored. A composer that sits openly on a page does not. While we want to encourage interaction with the Agent, we don’t want it to be intrusive. Color, motion, copy, weight, and placement are all important. It needs to suit whatever’s around it – on every site, in every brand. **What we built** Holding to those properties led us somewhere different than another iteration on the widget. We called it the Spotlight Messenger – a floating bar at the bottom of the page, centered, and dismissable in one click. It’s the entry point used by Fin Customer Agent on [fin.ai](http://fin.ai) and customers like Attio and Fellow. The bar shows Smart Suggestions: AI-generated questions written from the customer’s own site and knowledge base. It shows three questions at a time, rotating across sessions. A visitor can click one to start a conversation without typing. That’s a big change from a support widget’s usual ritual of: spot the icon, click, wait for the panel, scan the greeting, find the input, and type the first sentence. We would have never designed this look in the past. Putting a live composer on every page of a customer’s website, making it visible by default, and surfacing questions a visitor can fire off instantly would drown a human team in five minutes. It only makes sense when the thing on the other side is instant, infinite, and never has a bad day. Spotlight is downstream of Fin, not the other way around. The same principle that reshaped the entry point reshaped the answers. The right answer to a question often isn’t a sentence, so Fin decides how to respond based on what’s being asked, not just what to say. Ask how two plans compare and Fin lays them out as a table, with features, limits, and prices aligned so the differences are obvious at a glance. That extends to anything where structure beats prose – tiers, specs, availability. Spotlight’s visual identity went through several iterations. We explored about a dozen aesthetic directions – glassmorphism, terminal-style monospace, custom typography systems, branded gradient washes – and rejected all of them. Distinctive AI styles tend to age fast; they look like the year they were designed. We wanted Spotlight to live on a customer’s page, not on top of it. The treatment we landed on is deliberately quiet – a soft, translucent backdrop tint behind the composer that picks up the accent colour of the page it’s sitting on. The goal is to ensure it harmonizes with its surroundings, present but never competing. Fin’s own personality shows up most significantly in motion, small cues signal it’s thinking or streaming. We also tested how it should interact with the surrounding webpage as users navigate. Customers asked us to close the messenger when a visitor scrolled the page, but it felt fiddly in testing – a small accidental scroll dismissed the whole conversation. Instead, we opted to close the chat window when the user clicks outside of it. **The impact** On [fin.ai](https://fin.ai/) we ran an eight-week experiment on the new entry point against the old widget, and it produced a sharp lift in new conversations and engagement, enough to roll out to 100% of the site. Individual customers have seen larger swings – one early beta reported a 9x jump in engagement on Spotlight versus the widget Messenger they used to have. **Where this goes** We think websites are about to go through the most interesting visual change since the move to mobile. For a long time, a website was a brochure: read it, then go elsewhere to talk to a person. Then it became a brochure with a chat button: read it, and if you really need to, summon a person. The next thing is closer to a conversation that happens to have a brochure underneath. The change is already impacting the language we use. Internally, we’ve started saying surfaces, entry points, and modalities. **Surfaces** are where the Agent lives: a floating bar on a marketing page, a side panel inside a product, an embedded block on a product detail page. **Entry points** are how it gets triggered: proactive, contextual, persistent, ambient. **Modalities** are how it answers: text, table, voice, video, navigation. The interesting design work for the next few years happens in the combinations – which surface, which trigger, which modality, for which job. Spotlight is one answer for one of those combinations, the front door for a sales Agent on a relevant page. We’ll keep iterating on it. But overall, we believe the chat widget as a universal default is finished. The bulk of our efforts in the coming years will focus on defining the landscape that succeeds it. *Brian Boyle is a Principal Engineer and Daria Voronstova is a Principal Designer at Fin. They co-led the design and development of Spotlight Messenger, the entry point used by Fin Customer Agent on intercom.com, fin.ai, and customers like Attio and Fellow.*