Arbyn's chat widget already themes itself from your Brand accent color and the per-element bubble colors on the Design tab, and most stores never need anything more. But every part of the widget, from the launcher on your storefront down to the smallest button inside a message card, is built with a stable, named CSS class you can target yourself. The Custom CSS field on the Advanced tab lets you write plain CSS against those classes: no theme code to edit, no app reinstall, and changes go live on your storefront on the next page load.
This article is the full reference: every class Arbyn ships, grouped by where it lives, with a working code example for each group so you can copy, paste, and adjust.
What it does
Custom CSS is a plain text field where you write ordinary CSS rules targeting Arbyn's own class names. It doesn't touch your theme's code and it doesn't require a developer, though anyone comfortable writing CSS can use it directly. Rules you write here are checked for a small set of dangerous patterns (explained below) and, once saved, apply automatically to your live storefront.
Where to find it
Go to Settings, Chat widget.
Click Customize widget to open the full screen widget customizer.
Click the Advanced tab.
Type your CSS into the Custom CSS field. The live preview beside the controls updates as you type, so you see the effect immediately.
Click Save.
How it works
One Custom CSS field styles two separate surfaces, and Arbyn routes your rules to the right one automatically, so you never need two stylesheets:
The launcher: the pill or bubble your shoppers tap, which sits directly on your storefront page, outside the chat panel.
Everything inside the chat panel: the welcome screen, messages, composer, Perks and Quiz pages, and the Chat Bag, which all live inside the panel's own frame.
Because every rule targets a specific class, you only affect the exact element you name. The rest of the widget's built in design stays untouched. An overly broad selector (styling the whole panel with something like *) can break the panel's own layout, so keep rules scoped to the classes below.
A few examples to start
Make message bubbles less rounded, store-wide:
.arbyn-user-bubble,
.arbyn-agent-bubble {
border-radius: 8px;
}
Give the message composer a heavier border:
.arbyn-composer {
border-radius: 4px;
border: 1px solid #d0d0d0;
}
Give your product cards a heavier border in your brand color:
.arbyn-product-card {
border: 2px solid var(--accent);
}
Quick reference: the most asked-for classes
Class | What it targets |
| The agent's avatar circle (welcome hero, every agent reply, the typing indicator) |
| A shopper's own chat bubble |
| Arbyn's reply bubble |
| The agent's name shown above its reply |
| A reply from you or your team, once you take a conversation over in person |
| The message input row |
| The launcher pill on your storefront page |
| The Chat Bag panel |
| A product recommendation card in chat |
The launcher (your storefront page)
The launcher sets most of its own look with inline styles for performance, so a rule targeting it may need !important to win:
.arbyn-entry-pill {
background: #111111 !important;
}
.arbyn-pill-label {
font-weight: 600;
}
.arbyn-entry-avatar {
border: 2px solid #ffffff;
}
Class | What it targets |
| The whole launcher button (avatar and label), fixed to the corner of your storefront |
| The text inside the launcher ("Shop with Arbyn", "Ask about this product", and so on; it changes per page) |
| The small circular avatar or spark icon inside the launcher |
The panel shell
Arbyn uses this class to size and position the whole chat window. Keep changes to visual touches (shadow, corner radius) rather than layout (width, height, position), or you risk breaking the panel for shoppers.
.arbyn-panel-shell {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
Class | What it targets |
| The chat panel's outer window (desktop: centered card, mobile: full screen) |
Header and navigation
.arbyn-imm-header {
background: #16102c;
}
.arbyn-perks-pill,
.arbyn-quiz-pill {
border-radius: 999px;
}
.arbyn-imm-header__icon-btn {
color: #ffffff;
}
Class | What it targets |
| The sticky top bar on the main chat, Perks, and Quiz screens |
| The Perks pill in the header |
| The Quiz pill in the header (styled independently from Perks) |
| The round icon buttons in the header: close and menu on the main chat screen, and the back arrow on Perks/Quiz |
Welcome screen
.arbyn-welcome-title {
font-size: 22px;
}
.arbyn-welcome-subtitle {
color: #6b6b6b;
}
.arbyn-welcome-section--discover .arbyn-welcome-section__title {
text-transform: uppercase;
}
.arbyn-discover-tile,
.arbyn-quick-action-tile {
border-radius: 14px;
}
.arbyn-context-card--compact {
padding: 8px 12px;
}
Class | What it targets |
| The large avatar shown above the welcome greeting |
| The welcome heading ("Hey there," or your custom text) |
| The welcome body text below the heading |
| Either section wrapper (Discover or Quick actions); add |
| The small "Discover" / "Quick actions" row label |
| One Discover tile (product category or collection card) |
| One Quick actions tile (Track my order, Return an item, and so on) |
| The "Ask about this product/collection" card seeded when a shopper opens chat from a product or collection page; add |
| One of the tappable suggestion buttons on that card |
Messages
.arbyn-user-bubble {
background: var(--accent);
}
.arbyn-agent-bubble {
background: #f4f2fb;
}
.arbyn-imm-prose .arbyn-prose__link {
text-decoration: underline;
}
.arbyn-typing-dots {
opacity: 0.6;
}
.arbyn-show-more {
font-weight: 600;
}
Class | What it targets |
| A shopper's message bubble |
| Arbyn's reply bubble |
| The agent's name shown above its reply |
| A reply from you or your team, once you take a conversation over in person. Styled like the agent's bubble by default, but a separate hook so a human reply can look distinct |
| Your display name shown above your reply |
| Your photo (or your initials, if you haven't uploaded one) beside your reply |
| The text layout wrapper around Arbyn's written reply (spacing and line height for paragraphs, lists, links) |
| Fine-grained paragraph, list, and link styling inside a reply |
| A system notice row (for example an escalation banner or retry prompt) |
| The "a team member will follow up" banner |
| The "tap to retry" affordance after a send fails |
| A plain system note row |
| The "is typing" indicator row and its animated dots |
| The "Show more" button that appears when a reply lists more than 3 products |
| The row wrapper around every card or form Arbyn sends, and a secondary marker useful as a broad "any card" selector |
Composer
.arbyn-composer {
background: #ffffff;
border: 1px solid #e2e2e2;
}
.arbyn-composer__send {
background: var(--accent);
}
.arbyn-composer__cart-badge {
background: #ff5c5c;
}
Class | What it targets |
| The message input row (background, border, corner radius) |
| The text input itself (only its scrollbar is styled by default) |
| The photo attach button |
| The send button |
| The round Chat Bag button next to the composer |
| The item count badge on the Chat Bag button |
Ratings (CSAT)
.arbyn-imm-csat {
border-radius: 16px;
}
.arbyn-imm-csat__star.is-filled {
color: #ffb020;
}
Class | What it targets |
| The "How did we do?" rating card, shown after Arbyn resolves a chat or when a shopper ends it |
| The row of 5 star buttons |
| One star button; carries |
Perks page
.arbyn-perk-discount-card {
border: 1px dashed var(--accent);
}
.arbyn-perk-discount-card__code {
font-family: monospace;
}
.arbyn-perk-bundle-card__cta {
background: var(--accent);
}
Class | What it targets |
| The "Active discounts" / "Bundles" section labels |
| The "No perks just yet" empty state |
| One discount card (code and Apply on checkout button) |
| The card's savings headline ("20% off," "Free shipping," and so on) |
| The copyable discount code chip |
| The "Apply on checkout" button |
| One bundle card (products, discounted price, and Get bundle button) |
| The list of product rows inside the bundle card |
| The total price and bundle price rows |
| The "Get bundle" button |
Quiz page
.arbyn-quiz-primary-btn {
border-radius: 999px;
}
.arbyn-quiz-answer.is-selected {
border-color: var(--accent);
}
.arbyn-quiz-reward-card {
background: #f4f2fb;
}
Class | What it targets |
| The Start screen (quiz name, description, Start button) |
| The screen shown to a shopper who already completed the quiz |
| One question block |
| One answer option; carries |
| Every full width primary button on the Quiz page (Start, See my result, Save, Try again, Back to chat) |
| The result screen (matched product, or score and tier message) |
| The "something went wrong" or "quiz isn't available" screen |
| The reward card (discount code and Apply at checkout) |
| The optional email, name, and phone capture step |
| The final "You're all set" confirmation screen |
| The "No quiz right now" fallback |
Chat Bag
.arbyn-bag-sheet {
border-radius: 18px 18px 0 0;
}
.arbyn-bag-sheet__checkout {
background: var(--accent);
}
.arbyn-bag-sheet__qty-btn {
border-radius: 999px;
}
Class | What it targets |
| The dimmed backdrop behind the open bag |
| The bag panel itself |
| The bag's header row |
| The empty bag message |
| One line item in the bag |
| The quantity stepper and remove button |
| The subtotal line |
| The "code will apply at checkout" note |
| The fine print line above the buttons |
| The Checkout and Keep shopping buttons |
The ⋯ menu
.arbyn-menu-dropdown {
border-radius: 12px;
}
.arbyn-menu-row:hover {
background: #f4f2fb;
}
.arbyn-menu-toggle {
accent-color: var(--accent);
}
Class | What it targets |
| The whole dropdown panel |
| One row (Terms, Privacy, Dark mode, Start new chat, End chat) |
| The Dark mode on/off switch |
| The confirm step shown before "Start a new chat" or "End chat" goes through |
| The confirmation question text |
| The row holding the two confirm dialog buttons |
| The Cancel button |
| The confirming button (its label matches the row you tapped) |
Message and action cards
Arbyn sends dozens of specialized cards during a conversation (order status, discounts, gift cards, returns, and more). Every one follows the same naming pattern: a root class for the whole card, then a __part class for each piece inside it. For example:
.arbyn-product-card {
border-radius: 14px;
}
.arbyn-product-card__title {
font-weight: 600;
}
.arbyn-product-card__price {
color: var(--accent);
}
.arbyn-product-card__buy-now {
background: var(--accent);
border-radius: 999px;
}
The full set of cards and their root classes:
Card | Root class | Notable parts |
Product card |
|
|
Comparison card |
|
|
Upsell row |
|
|
Order status |
|
|
Order found (confirm order) |
|
|
Order summary (recent orders) |
|
|
Address update form |
|
|
Discount offer card |
|
|
Bundle offer card |
|
|
Gift card card |
|
|
Checkout card |
|
|
Order/gift card lookup form |
|
|
Email capture card |
|
|
FAQ answer card |
|
|
Shipping details card |
|
|
Link CTA card (for example a "Manage my subscription" button) |
|
|
Free shipping progress card |
|
|
Link preview card |
|
|
Photo upload card |
|
|
Escalate to human cards |
|
|
Return request review form |
|
|
Return/cancel submitted receipt |
|
|
Return status card |
|
|
Return blocked card |
|
|
Action notice banner |
|
|
Cart/checkout buttons in chat |
|
|
Quick reply, trigger, return, and cancel pills |
|
|
Quick reply chips |
|
|
Shared buttons across cards |
|
|
Some elements carry a small state class alongside their normal class while they're in a particular state. For example, a selected order item gets .arbyn-order-found__item.is-checked, and a copied discount code gets .arbyn-discount-card__code.is-copied. Target the state directly if you want a rule that only applies once something is picked or copied:
.arbyn-order-found__item.is-checked {
background: #f4f2fb;
}
.arbyn-discount-card__code.is-copied {
color: #2ea873;
}
Troubleshooting
I saved my CSS and nothing changed on my storefront. First, confirm your rule is actually reaching the element. On your storefront, right-click the thing you're trying to style and choose Inspect (or open your browser's developer tools). Compare the class names on that exact element, character for character, against the selector you wrote. Custom CSS only checks for the small set of dangerous patterns listed below, never whether a class actually exists, so a typo, an extra space, or a class that isn't on this page's reference will save without any error and simply match nothing. This isn't something Arbyn warns you about today, so comparing what you typed against what's really on the page is the fastest way to catch it.
The class matches and it still isn't showing. Reload the storefront page you're testing on. A rule you just saved needs a fresh page load to take effect, an already open tab won't pick it up. If it still isn't showing after a reload, check whether another rule later in your Custom CSS targets the same property on the same class, the last matching rule wins, same as any CSS.
It worked before and stopped, and you didn't touch your CSS. This usually means the selector wasn't one of the documented classes in this article. Arbyn's internal markup can change between releases, so a rule that happened to match something undocumented can stop matching after an update. Switch to one of the classes listed here; these are the ones Arbyn keeps stable release to release.
What's not allowed
For your shoppers' safety, a small set of CSS patterns are always blocked, whether or not you intend anything harmful with them:
javascript:valuesexpression(...)(legacy Internet Explorer)@import(pulling in an external stylesheet)-moz-bindingandbehavior:(legacy XBL/HTC bindings)
If your Custom CSS contains any of these, Save is rejected and you'll see an error. Nothing partial gets saved. Everything else, colors, fonts, spacing, borders, shadows, and animations on your own selectors, is fair game.
Good to know
An overly broad selector can break the panel's own layout. Style specific classes, like the ones above, not the whole panel with something like
*.Custom CSS applies on top of your Design tab colors, not instead of them. Most stores only need the color pickers; Custom CSS is for the extra polish those pickers don't cover.
Every class here is stable. Arbyn does not rename or remove a shipped class without warning, so a rule you write today keeps working.
Changes go live on the next storefront page load after you save. There's nothing to publish separately.
var(--accent)reads your Design tab's brand accent color, so a rule likeborder: 2px solid var(--accent);automatically follows whatever accent color you set, without hardcoding a hex value.
FAQ
Do I need to know CSS to use this field? Yes, this field expects real CSS syntax. If you're comfortable with basic CSS (selectors, properties, values), you can use every example above directly. If not, the color pickers on the Design tab cover the most common customizations without any code.
What happens if I write invalid CSS, or CSS that includes a blocked pattern? Save is rejected outright with an error, and nothing is saved, partially or otherwise. Your previous Custom CSS (if any) stays in place until you fix and resave.
Can I target a class that isn't listed here? Only the classes in this article are guaranteed to exist and stay stable. Arbyn's internal markup can change between releases; a selector that happens to match something today that isn't documented here could stop matching after an update.
Will my Custom CSS apply to Instagram DMs or Facebook Messenger too? No. Custom CSS only affects the storefront chat widget (the launcher and the panel). Instagram and Facebook Messenger stay in plain text, since that's what those channels support.