Arbyn ships as one widget design, tuned to look good out of the box on any storefront. The Design tab in the widget customizer is where you make it look like yours: the accent color, the launcher shoppers tap, the colors inside message bubbles, and the font. Every change previews live, on your actual widget, before you save anything.
What it does
The Design tab controls the visual look of your chat widget end to end: the brand accent color that themes buttons and highlights, the launcher (the pill or bubble on your storefront), the color of the message bubbles inside a conversation, the Quiz page's primary button, and the font the whole widget uses. Colors and fonts you choose here go live on your storefront on the next page load. If you want to go further than colors (spacing, borders, hiding a specific part of a card), that lives in Custom CSS on the Advanced tab.
Where to find it
Settings, Chat widget, then Customize widget, then the Design tab.
Setup (step by step)
Go to Settings, Chat widget.
Click Customize widget. This opens the full screen widget customizer.
You're on the Design tab by default. Work through the sections below, from top to bottom.
Watch the live preview beside the controls. It's your real widget, not a mock up, and it updates as you type.
Click Save when you're happy with the look.
How it works
Brand accent color
Enter a hex code for your Brand accent color (for example #7C5CFC, Arbyn's default violet). This one color themes buttons, highlights, and several defaults elsewhere in the widget, so it's the fastest way to make the widget feel on brand. A swatch beside the field shows exactly what you've picked.
The launcher
This is the pill or bubble your shoppers tap to open the chat, and it has its own set of controls, separate from the accent:
Launcher avatar. Upload the image shown inside the launcher bubble. This is the same photo shown in your agent's replies and in Settings, Agent identity, so there's one avatar across the whole product, not a separate upload for each surface.
Launcher label. The text inside the launcher pill (for example "Chat with us"). Leave it blank for an icon-only launcher.
Product and collection page labels. Separate overrides for when a shopper is browsing a specific product or collection (for example "Ask about this product"). Leave these blank and Arbyn shows its smarter, context-aware label instead; set your own label above and these two let you keep that smarter behavior on product and collection pages specifically.
Launcher background and text color. Two more hex fields, independent of the accent, if you want the launcher itself to stand out from the rest of the widget.
Scroll to edge. On by default: as a shopper scrolls, the launcher collapses and docks to whichever corner you've set (bottom right or bottom left). Turn it off to keep the launcher centered no matter how far they scroll.
Position and spacing. Choose the launcher's corner, then set how far it sits from the side and bottom of the screen in pixels. Useful if your theme already has something else (a cookie banner, a back to top button) sitting in that corner.
Message bubble colors
Beyond the single accent color, you can set the background and text color of the shopper's message bubble and the agent's message bubble independently. Most stores never need this since the defaults are derived from your accent, but it's there if you want, say, a lighter shopper bubble against a darker agent bubble.
Quiz button color
If you run a product quiz, its primary button (Start, See my result, Save, and so on) can take its own color, separate from the accent. Leave it blank and the Quiz button uses your accent color by default.
Font
Choose how the widget's text renders:
Match store (the default): the widget inherits your storefront's own font automatically. Nothing to configure, and it stays in sync if you ever change your theme's font.
System UI or Georgia: two built in options that load instantly, with no extra network request.
Upload a custom font: bring your own WOFF2, WOFF, TTF, or OTF file (up to 2 MB). Once uploaded, it's saved to your font library, so if you've already uploaded a font before, it shows up in the dropdown, ready to reuse, instead of asking you to upload the same file twice.
Live preview
The preview beside the controls is your actual chat widget, not an illustration. Use the Desktop / Mobile toggle above it to check both, and the screen selector to jump the preview to different states (the welcome screen, an in-progress conversation, the menu, Perks, or Quiz) so you can see exactly how each of your changes looks where it matters.
Good to know
Use a valid hex code. A 3, 6, or 8-digit hex value with a leading
#(for example#7C5CFC,#0AF, or#7C5CFCFF). An invalid code shows an error and Save stays off until it's fixed.Leave any color field blank for the default. Clearing a field and saving returns that element to Arbyn's built-in default, derived from your accent color.
Unsaved changes are protected. If you try to close the customizer with edits you haven't saved, Arbyn asks first, so you won't lose your work by accident.
This is one widget. There's no separate "theme" to pick. Every store runs the same underlying design; these settings are how you make it yours.
Custom CSS goes further. If you need to change spacing, borders, or restyle one specific card, that's the Advanced tab's Custom CSS field, which works on top of whatever you set here.
FAQ
Do I need to set the message bubble colors separately from the accent? No. If you leave them blank, both bubbles derive their look from your accent color automatically. Set them only if you want a specific combination the accent-derived default doesn't give you.
Will my custom font slow down my storefront? Match store, System UI, and Georgia all load with zero extra network requests. A custom uploaded font does add one font file request the first time a shopper opens the widget, which is why uploads are capped at 2 MB.
Does this affect Instagram DMs or Facebook Messenger too? No. These Design settings are specific to the storefront chat widget. Instagram and Facebook Messenger stay in plain text, the same as email, since that's what those channels actually support.
I changed the accent color but the launcher still looks different. Why? The launcher has its own background and text color fields, separate from the accent, specifically so it can stand out if you want it to. Set those fields directly to match your accent, or leave them blank to use the accent-derived default.