Your chat widget's corners can follow your brand. One setting — Corner roundness — sets the corner style for the whole widget at once, from fully squared to fully rounded: the chat window, message bubbles, suggestion chips, the input field, product cards, buttons, menus, avatars, and the chat launcher all move together, so the widget reads as one deliberate design rather than a mix of shapes.
If your store's visual language is architectural and squared, choose Sharp. If it's soft and friendly, keep Full. Two levels in between let you land anywhere along that scale.
Where to find it
- In your Rep AI Console, go to Settings > Chat Widget.
- Select the Design tab, then the Basics tab.
- Look for Corner roundness, just below Colors.
Corner roundness is available to every merchant and works with both widget styles — Classic and Rep 2.0.
The four levels
Pick one of four levels. They form a single ordered scale, from most squared to most rounded.
| Level | How the widget looks |
|---|---|
| Sharp | Fully squared. Every corner is a right angle — chips become rectangles, the chat window has crisp edges, and normally circular elements such as avatars, status dots, and the chat launcher square off too. |
| Subtle | Barely rounded. Corners are softened just enough to avoid a hard edge, while the overall impression stays geometric. |
| Rounded | Moderately rounded. A clearly rounded look that stops short of pill-shaped chips and circular avatars. |
| Full | Maximally rounded — pill-shaped chips and input, a softly rounded window, circular avatars and launcher. This is the default. |
Full is what a widget uses when corner roundness has never been set, so leaving the setting alone keeps your widget exactly as it is.
What the setting changes
The level you choose applies to every shopper-facing surface Rep AI renders:
- The chat window itself — the window shell, the header, and the side menu
- Message bubbles, both the shopper's and the AI's, and the typing indicator
- Suggestion chips everywhere they appear — quick replies, prompts, carousel chips, mobile chips, the compact chat state, the "connect with an agent" chip, and the chips on your product pages
- The message input field and its attachment controls
- Product cards and the product carousel
- Buttons, menu shortcuts, and conversation list items
- Modals, tooltips, and loading placeholders
- Avatars, status dots, and icon-only buttons
- The chat launcher — the button shoppers click to open the chat
- The "Ask our AI" search widget and the inline widgets on your product detail pages
Desktop and mobile both follow the level you pick, and so do the full-screen and theater chat views.
Preview it before you save
The previews on the right side of the Design page update as soon as you select a level — the chat window, the launcher, the menu, and the product card previews all redraw at the new corner style, so you can compare levels without leaving the page.
When you're happy with it, click Save and Preview in the top-right corner. Your choice applies to new chat sessions right away; shoppers don't need to clear their cache.
Tips
- Match your buttons. The quickest way to choose is to look at your store's own buttons and cards. Squared buttons on your product pages usually call for Sharp or Subtle; rounded ones sit well with Rounded or Full.
- Check the launcher. The launcher is the most visible piece of the widget on your storefront, and it changes the most between levels — a circle at Full, a square at Sharp. Preview it before you commit.
- Look at it on mobile. The widget fills much more of the screen on a phone, so the corner style is more prominent there. Open your store on a phone after saving.
- One decision, not many. Corner roundness deliberately styles the whole widget together. It isn't a per-element control, which is what keeps the result coherent.
Good to know
- The full-screen image viewer that opens when a shopper taps a product photo keeps its own corner styling.
- Corner roundness is purely visual. Every button, chip, and field stays the same control, with the same labels and the same behavior.
Troubleshooting
I saved a level but my widget looks unchanged.
Confirm the save went through — Save and Preview applies every tab on the Design page at once — then open the chat in a new session. If you saved Full, that is the standard look, so there's nothing to see; try Sharp to confirm the setting is reaching your storefront.
Some corners look rounder than others at the same level.
That's intended. A level sets a coherent corner language rather than one identical radius: larger surfaces like the chat window carry a slightly more generous corner than small chips, and the tucked-in corner of a message bubble stays tighter than its other three. The result reads as one design, not eight identical rectangles.
Our brand needs an exact corner value.
Corner roundness offers four calibrated levels rather than a free numeric value. If your brand requires an exact figure, Enterprise merchants can fine-tune the widget with custom CSS.
I want to change the launcher's shape only.
Corner roundness governs the whole widget, launcher included. There is no separate launcher-only corner control; the Button tab covers the launcher's color, style, size, and label.