Styling & Theming - Remark Documentation

Remark ships two custom elements: <remark-chat-widget> for the floating chat and <remark-qa-activator> for the embedded chat (also known as the inline activator). Both share the same theme system and can be customized at two levels: through widget settings in the Remark dashboard, and through custom CSS targeting Shadow DOM parts and CSS custom properties. Widget settings handle the most common adjustments. Custom CSS picks up where widget settings leave off, giving you control over individual elements.

Widget Settings

Configure colors, typography, spacing, layout, and behavior from the dashboard.

CSS Custom Properties

Override sizing tokens and reference generated color tokens.

Shadow DOM Parts

Target specific elements using the ::part() pseudo-element.

Full Example

A complete example combining tokens and part selectors.

The Remark dashboard provides visual controls for theming, layout, and behavior across three pages — no CSS required.

Appearance

The Appearance page (Settings > Appearance) is the primary way to theme both widgets. These settings apply to the floating chat and the embedded chat together.

Setting	Controls
Brand color	Primary color used to generate the full theme palette
Color scheme	Light, dark, or auto (matches the user’s system preference)
Text color	Content and text color
Background color	Surface background color
Button color	Color of the chat input send button and floating activator button background
Border color	Border and divider color
Online indicator	Online/available status indicator color
Error color	Error and critical state color
Font family	Custom font stack (popular Google Fonts are loaded automatically)
Font size	Base font size in pixels (minimum 10 px) — all typography scales from this
Padding	Internal spacing (`sm`, `md`, `lg`, or a custom pixel value)
Border roundness	Corner radius (`sm`, `md`, `lg`, or a custom pixel value)
Spacing scale	Unitless multiplier that scales all internal spacing

Each palette color is optional. When a value isn’t provided, the theme system generates an appropriate color from the brand color automatically, with both light and dark mode variants. The Appearance page also includes a Custom CSS field for advanced overrides (see sections 2 and 3 below). Custom rules must target remark-chat-widget or remark-qa-activator in their selectors. The Custom CSS field supports @media, @supports, and other at-rules, so you can write responsive ::part() overrides directly in the dashboard.

Chat Settings

The Chat page (Settings > Features > Chat) controls the floating chat widget’s layout and behavior.

Setting	Controls
Enable chat	Show or hide the floating chat widget
Turn off chat when no experts are online	Automatically hide the widget when no experts are available
Allow transfer to human	Whether AI can hand off to a human expert (always or only when online)
Activator style	Button (floating action button) or text bar
Position	Left, center (text bar only), or right
Enable activator animation	Show the icon animation on the button activator

Inline Activator Settings

The Inline Activator page (Settings > Features > Inline Activator) controls the embedded chat.

Setting	Controls
Enable activator	Show or hide the embedded chat
Activator type	Expert (shows featured expert header) or text-only
Interaction mode	Inline (conversations stay within the embedded chat) or handoff (opens the floating chat widget)
CSS selector	Which page element the embedded chat is inserted relative to
Activator position	Insert before or after the selected element

We recommend using widget settings over custom CSS when possible. Settings available in the dashboard have been tested to work cohesively and adapt to light and dark mode automatically.

CSS Custom Properties

The chat widget’s theme system generates CSS custom properties that you can reference in custom CSS rules. These properties are grouped into sizing tokens (which can be overridden directly) and color tokens (which are generated from widget settings).

Sizing and Typography

These properties are set on the widget’s root element — <remark-chat-widget> or <remark-qa-activator>. Override them by targeting that element directly in your CSS, the same way you’d style any other HTML element. They correspond to dashboard settings but can also be overridden in custom CSS when finer control is needed.

Variable	Default	Controls	Dashboard Setting
`--hem`	`16px`	Base font size unit — all typography scales as a ratio of this value	Font size
`--remark-spacing-multiplier`	`1`	Unitless multiplier for all spacing tokens	Spacing scale
`--remark-radii-base`	`0.5rem`	Base border radius	Border roundness
`--remark-fonts-sans`	System font stack	Font family for all text	Font family

--hem stands for “host em” — it serves the same role as rem but is scoped to the widget’s shadow DOM root rather than the page’s <html> element. This means the widget’s typography scales independently of the host page’s font size. Font sizes are not exposed as individual variables; they are calculated as ratios of --hem (e.g., base text = --hem, small text = calc(var(--hem) * 14 / 16)). To scale all text proportionally, adjust the font size in the dashboard or override --hem in custom CSS.

--hem is already responsive to the host page’s root font size. If your site already adjusts font-size on <html> for different viewports, the widget may scale along with it automatically depending on your configuration.

Distance from the Screen Edge

The floating chat and its activator sit a fixed distance from the viewport edge, controlled by two custom properties. Both default to 24px and are independent of --remark-spacing-multiplier, which scales spacing inside the widget.

Variable	Default	Controls
`--remark-spacing-bottom-distance`	`24px`	Distance from the bottom edge
`--remark-spacing-side-distance`	`24px`	Distance from the left or right edge

Set them on the host element (or ::part(theme-root)) to move the activator and the open chat panel together. To move only one, scope the override to its part — ::part(activator-parent) for the activator, ::part(app-parent) for the open chat panel:

/* Raise the activator and open chat to clear a sticky footer bar */
remark-chat-widget::part(theme-root) {
  --remark-spacing-bottom-distance: 96px;
}

/* Move only the activator, leaving the open chat where it is */
remark-chat-widget::part(activator-parent) {
  --remark-spacing-bottom-distance: 96px;
}

This applies to the floating chat only; the embedded chat follows normal page flow. On mobile, the open chat panel fills the screen and ignores the bottom distance, but the activator still respects it.

Colors

Color tokens are generated from the brand color and palette overrides configured in the dashboard. They follow the naming pattern --remark-colors-{name} and have separate light and dark mode values. These tokens are set on the theme-root part — an internal element within the shadow DOM. You can reference the tokens in ::part() rules, but to change colors, use the dashboard palette settings rather than overriding variables directly.

Content

Variable	Purpose
`--remark-colors-content-default`	Primary text
`--remark-colors-content-secondary`	Secondary text
`--remark-colors-content-muted`	De-emphasized text
`--remark-colors-content-action`	Brand-tinted text meeting contrast requirements

Backgrounds

Variable	Purpose
`--remark-colors-background-default`	Primary background
`--remark-colors-background-hover`	Background on hover
`--remark-colors-background-secondary`	Secondary background (e.g., alternate message rows)

Borders

Variable	Purpose
`--remark-colors-border-default`	Default border
`--remark-colors-border-subtle`	Subtle or secondary border
`--remark-colors-border-active`	Active or focused border
`--remark-colors-border-emphasis`	Emphasized border

Brand

Variable	Purpose
`--remark-colors-brand-fill`	Brand color fill
`--remark-colors-brand-on-fill`	Text on brand fill
`--remark-colors-brand-subdued`	Subdued brand tint
`--remark-colors-brand-content`	Brand color for text
`--remark-colors-brand-border`	Brand color for borders

Action

These correspond to the Button color override in the dashboard.

Variable	Purpose
`--remark-colors-action-fill`	Interactive element fill (send button, floating activator)
`--remark-colors-action-on-fill`	Text on action fill
`--remark-colors-action-hover`	Interactive element fill on hover

Status

Variable	Purpose
`--remark-colors-online-fill`	Online indicator
`--remark-colors-online-on-fill`	Text on online indicator
`--remark-colors-critical-fill`	Error or critical fill
`--remark-colors-critical-on-fill`	Text on critical fill
`--remark-colors-critical-content`	Critical color for text
`--remark-colors-critical-border`	Critical color for borders

Elevated Surfaces

Variable	Purpose
`--remark-colors-elevated-fill`	Elevated surface (cards, dropdowns)
`--remark-colors-elevated-hover`	Elevated surface on hover
`--remark-colors-elevated-on-fill`	Text on elevated surfaces

Overlays and Inverse

Variable	Purpose
`--remark-colors-overlay-fill`	Semi-transparent overlay
`--remark-colors-overlay-emphasis-fill`	Strong overlay
`--remark-colors-inverse-background`	Inverted background
`--remark-colors-inverse-content`	Inverted text

Shadow DOM Parts

Both remark-chat-widget and remark-qa-activator expose internal elements through the part attribute. You can target those elements from outside the shadow tree with the ::part() pseudo-element. Many parts carry scene suffixes so you can style the same structural element differently depending on context. The widget has three scenes: landing (before the conversation starts), chat (active conversation), and paused (conversation active on another device). For example, widget-header matches the header in any scene, while widget-header-landing targets only the landing screen header. Some elements also expose a skeleton token during loading states for styling placeholders.

Floating Activators

These parts control the entry point to the floating chat — the button or text bar that visitors click to open the conversation. They are not present on the embedded chat (inline activator).

Part	Element
`activator-parent`	Activator root container
`activator-button`	Floating action button activator
`activator-button-icon`	Icon inside button activator
`activator-message`	Floating message bubble
`activator-message-avatar`	Message bubble avatar
`activator-message-text`	Message bubble text
`activator-message-dismiss`	Message dismiss button
`floating-activator-prompts`	Floating prompt group shown above the button activator
`activator-text-bar-button`	Text bar button
`activator-text-bar-badge`	Unread badge
`activator-text-bar-icon`	Search icon
`activator-text-bar-placeholder`	Typewriter or placeholder text
`activator-text-bar-send-icon`	Send icon button
`back-to-bottom-button`	Scroll-to-bottom button
`back-to-bottom-button-unread-badge`	Unread badge on scroll button

Shared Parts

The remaining parts are shared by both the floating chat and the embedded chat (inline activator). The outermost structural elements that wrap the widget’s header, content area, and footer. Scene suffixes let you style each section differently on the landing screen, during an active conversation, or while paused.

Part	Element
`theme-root`	Element that carries the generated color tokens (see Colors)
`parent-container`	Outermost shadow DOM container
`app-parent`	Widget root (floating or embedded)
`widget-header`	Header slot
`widget-header-landing`	Header on the landing scene
`widget-header-chat`	Header during an active conversation
`widget-content`	Main content slot
`widget-content-landing`	Content on the landing scene
`widget-content-chat`	Content during an active conversation
`widget-content-paused`	Content on the paused scene
`widget-footer`	Footer slot
`widget-footer-landing`	Footer on the landing scene
`widget-footer-chat`	Footer during an active conversation

Chat Header

The header bar at the top of the chat, showing brand and expert info. Visible once the widget is open (floating) or always visible (embedded). The header-content container carries a scene suffix so you can style the header differently on the landing screen vs. during a conversation.

Part	Element
`header-content`	Header content container
`header-content-landing`	Header content on the landing scene
`header-content-chat`	Header content during an active conversation
`chat-header-avatar`	Expert avatar
`chat-header-brand-name`	Brand name heading
`chat-header-expert-trigger`	Clickable area that opens the expert profile
`chat-header-expert-name`	Expert name heading
`chat-header-tagline`	Expert tagline

Header Menus

Dropdown menus accessible from the header — including options to mute, request a human, and adjust widget layout. The layout menu is only present in the floating chat. Menu button parts carry scene suffixes (e.g., header-menu-close-button-chat) so you can style them differently on the landing screen vs. during a conversation.

Part	Element
`header-menu`	Menu buttons container (scene-suffixed)
`header-menu-button`	Shared on every header action button
`header-menu-more-button`	More options icon button (scene-suffixed)
`header-menu-close-button`	Minimize or close button (scene-suffixed)
`header-menu-open-chat-button`	Open chat button, embedded mode (scene-suffixed)
`header-menu-layout-button`	Layout menu trigger (scene-suffixed)
`more-options-menu`	More options menu content
`more-options-menu-mute`	Mute or unmute item
`more-options-menu-speak-to-human`	Speak to human item
`layout-menu`	Layout menu content
`layout-menu-size`	Size radio group
`layout-menu-size-default`	Default size radio
`layout-menu-size-expanded`	Expanded size radio
`layout-menu-align`	Alignment radio group
`layout-menu-align-left`	Left align radio
`layout-menu-align-center`	Center align radio
`layout-menu-align-right`	Right align radio
`layout-menu-activator`	Activator style group
`layout-menu-activator-text-bar`	Text bar activator radio
`layout-menu-activator-button`	Button activator radio

Expert Intro

An introductory card shown before the conversation starts. Appears on the landing scene in both compact (embedded) and hero (floating) variants, depending on the activator type setting.

Part	Element
`expert-intro`	Intro container (compact and hero variants)
`expert-intro-avatar`	Expert avatar
`expert-intro-name`	Expert name heading
`expert-intro-tagline`	Expert tagline

Paused Scene

Shown when the visitor has an active conversation on another device or tab. Displays the matched expert’s avatar, a status message, suggested prompts, and a button to resume the conversation here.

Part	Element
`intro`	Intro container (scene-suffixed)
`intro-avatar`	Expert avatar (scene-suffixed)
`intro-message`	Pause status message (scene-suffixed)
`actions`	Actions container (scene-suffixed)
`move-conversation-button`	Resume conversation button (scene-suffixed)

A summary card for the matched expert, displayed after a conversation starts. Includes a photo gallery and a button to open the full profile drawer.

Part	Element
`expert-profile-card`	Card root
`expert-profile-card-title`	Expert name
`expert-profile-card-caption`	Bio or caption
`expert-profile-card-button`	View Profile button
`expert-profile-card-gallery`	Gallery container
`expert-profile-card-gallery-item`	Individual gallery item wrapper
`expert-profile-card-gallery-image`	Gallery image

Expert Profile Drawer

A slide-over panel with the expert’s full profile, including bio and credentials. Opens when the visitor clicks “View Profile” on the expert profile card.

Part	Element
`expert-profile-drawer`	Drawer content
`expert-profile-drawer-back-button`	Back or close button
`expert-profile-drawer-name`	Expert name heading
`expert-profile-drawer-bio`	Bio markdown container

Welcome Card

A greeting area shown when the chat first opens, before the visitor sends a message. Displays one or more welcome messages from the brand or expert.

Part	Element
`welcome-card`	Welcome area container
`welcome-card-message`	Welcome message row
`welcome-card-message-avatar`	Welcome message avatar
`welcome-card-message-text`	Welcome message text

Messages

The conversation thread. Expert messages are grouped with an avatar; user messages appear on the opposite side. Each message bubble wraps markdown content.

Part	Element
`message-group`	Shared on expert and user message groups
`expert-message-group`	Expert message group (with avatar)
`user-message-group`	User message group container
`agent-message`	Avatar-and-content frame shared by expert messages, prompts, and the welcome card
`agent-message-content`	Content column inside the agent message frame
`agent-message-text`	Standalone agent text (prompts, confirmations, notices)
`message-bubble`	Shared on every message bubble — user, NPS summary, PII request
`user-message-bubble`	Individual user message bubble
`message-content`	Message text or markdown wrapper
`message-link`	Link inside markdown
`message-media`	Image, video, or other media attached to a message
`gallery`	Image gallery on a message with multiple images
`gallery-grid`	Gallery image grid
`gallery-item`	Individual gallery image wrapper
`gallery-item-trigger`	Button that opens a gallery image in the lightbox
`gallery-item-overflow`	”+N” overflow button on the last visible gallery image
`linked-product`	Product badge above a user message linked to a product
`linked-product-image`	Linked product thumbnail
`linked-product-name`	Linked product name
`system-message`	System message root
`system-message-content`	System message text

Message Prose

Markdown rendered in a message carries part="prose" on its container, and every element inside it is stamped with prose-<tag> — prose-p, prose-a, prose-h2, prose-li, and so on — so any rendered element can be styled individually. Links carry message-link alongside prose-a. Block spacing inside prose is driven by custom properties set on the container, overridable through ::part(prose). Prefer these over margin overrides on the per-element parts — a variable keeps the first/last-child edge resets intact and covers grouped elements in one declaration:

Variable	Controls
`--prose-paragraph-spacing`	Paragraph block margins
`--prose-list-spacing`	List block margins
`--prose-list-gap`	Gap between list items
`--prose-blockquote-spacing`	Blockquote block margins
`--prose-code-block-spacing`	Code block margins
`--prose-heading-spacing-start` / `--prose-heading-spacing-end`	Space before and after headings
`--prose-divider-spacing-start` / `--prose-divider-spacing-end`	Space before and after horizontal rules
`--prose-image-spacing`	Image block margins

/* Wider paragraph spacing in every message */
remark-chat-widget::part(prose) {
  --prose-paragraph-spacing: 1.8rem;
}

/* Brand-colored links */
remark-chat-widget::part(prose-a) {
  color: var(--remark-colors-brand-content);
}

Typing and Input

The text input area at the bottom of the chat, plus indicators shown while the expert or AI is composing a response.

Part	Element
`typing-indicator`	Typing indicator container
`expert-connecting-indicator`	Expert connecting state
`carousel-avatar`	Individual avatar in the connecting-state carousel
`chat-input`	Input form
`chat-input-root`	Input root container
`chat-input-field`	Text input textarea
`chat-input-send-button`	Send button
`chat-input-file-input-container`	File attachment area

Prompts

Suggested questions shown on the landing screen, during a paused conversation, or as conversation starters. Visitors click a prompt to send it as their first message. Individual prompt buttons carry scene suffixes (e.g., prompt-button-landing) so you can style prompts differently by context.

Part	Element
`prompt-button`	Individual prompt button (scene-suffixed)
`prompt-button-icon-container`	Icon wrapper
`prompt-button-icon`	Prompt icon
`prompt-button-text`	Prompt label text
`prompt-button-hover-symbol`	Hover accent symbol
`scene-prompts`	Prompts container (scene-suffixed)
`conversation-starters-prompts`	Conversation starter prompts container

Product Recommendations

Product cards shown inline when an expert or AI recommends items. Each card links to the product page and displays a thumbnail carousel, name, and price. The add-to-cart button adds the product directly, or opens a variant picker sheet when the product has options; a post-add toast offers checkout.

Part	Element
`product-recommendations`	Carousel container wrapping the recommendation cards
`product-recommendations-nav-button`	Carousel navigation arrow
`product-recommendation`	Product card root
`product-recommendation-thumbnail`	Image carousel container
`product-recommendation-image`	Product thumbnail image
`product-recommendation-add-to-cart`	Add-to-cart button on the card
`product-recommendation-details`	Name and price container
`product-recommendation-name`	Product name link
`product-recommendation-price`	Product price
`product-recommendation-cart-toast`	Toast shown after adding a recommended product to cart
`product-recommendation-cart-toast-checkout`	Checkout button inside the cart toast
`product-variant-sheet-link`	”View Product” link in the variant picker sheet

Presented Showcases

Scene-style imagery the agent generates from products in the catalog and presents inline in the conversation. A summary header introduces the showcase; hotspots on the rendered image let visitors hover for product details and add items directly to cart.

Part	Element
`showcase`	Showcase frame root
`showcase-image`	The rendered showcase image
`showcase-summary`	Summary header above the image
`showcase-summary-title`	Showcase title text
`showcase-summary-items`	Featured product list inside the summary
`showcase-edge-gradients`	Edge-fade overlay on the showcase image
`showcase-styled-badge`	”AI styled” badge shown when the showcase uses a brand style anchor
`showcase-unavailable`	Frame state shown when a showcase is no longer available
`showcase-hotspot`	Hotspot button placed over a featured product
`showcase-hotspot-dot`	Idle dot indicator on a hotspot
`showcase-hotspot-cart`	Cart icon shown on hotspots with an actionable variant
`showcase-hotspot-add-to-cart`	Hotspot in its add-to-cart state
`showcase-hotspot-busy`	Busy indicator while adding to cart
`showcase-hotspot-hover-card`	Hover card root
`showcase-hotspot-hover-card-thumbnail`	Hover card image container
`showcase-hotspot-hover-card-image`	Hover card product image
`showcase-hotspot-hover-card-details`	Hover card name and price container
`showcase-hotspot-hover-card-name`	Hover card product name
`showcase-hotspot-hover-card-price`	Hover card product price

Content Previews

Rich previews for URLs shared in the conversation. Open Graph previews display an image, title, and optional price. YouTube links render an embedded video player.

Part	Element
`content-preview`	Shared root for OG and YouTube previews
`content-preview-media-container`	Media wrapper
`og-preview`	OG preview root
`og-preview-image`	OG image
`og-preview-title`	OG title
`og-preview-price`	OG price
`youtube-preview`	YouTube preview root
`youtube-preview-video`	YouTube iframe
`youtube-preview-title`	YouTube title

Inline Cards

Interactive cards the agent renders inline in the conversation, such as discount codes and return-portal links. Every card shares the generic card part and a common anatomy, so you can style all cards at once, a specific kind by its own part, or a specific element by its anatomy part.

Part	Element
`card`	Shared on every inline event card
`discount-card`	Discount-code card
`return-card`	Return-portal link card
`card-header`	Card header row
`card-media`	Card media area
`card-heading-group`	Heading and subheading wrapper
`card-heading`	Card heading
`card-subheading`	Card subheading
`card-badge`	Badge (e.g., the discount code)
`card-actions`	Action button row
`card-legal`	Fine-print text

Assistant Indicator

A small tag shown alongside messages to indicate whether the response came from an AI assistant or a human expert.

Part	Element
`assistant-indicator`	AI or Human tag root
`assistant-indicator-label`	Tag label text

The bar at the bottom of the chat, containing terms of service text and Remark branding.

Part	Element
`chat-footer`	Footer container
`inline-terms`	Terms of service text
`powered-by`	Powered by container
`powered-by-remark-text`	Powered by text
`powered-by-remark-logo`	Remark logo

Avoid hiding the chat footer, terms text, or terms of service controls with custom CSS. These elements may contain legal disclosures or consent prompts that visitors need to see before using chat.

Data Collection

Forms and prompts for collecting visitor information (email, name, phone) and feedback. These appear at specific points during the conversation flow. The NPS survey itself opens in a bottom sheet built from the widget’s standard dialog elements; its rating request and summary appear in the message stream.

Part	Element
`terms-of-service`	Terms of service consent container
`terms-of-service-consent-button`	TOS consent button
`terms-of-service-text`	TOS text content
`pii-request-form`	PII collection form
`pii-request-message-bubble`	PII request message
`pii-request-submit-error`	Error shown when PII submission fails
`nps-summary-message-bubble`	NPS summary message

Skeleton and Loading

Placeholder elements shown while the widget loads. Skeleton elements use a -skeleton suffix (e.g., chat-header-avatar-skeleton) and also carry the skeleton token, so you can target a specific placeholder or style all loading states at once.

Part	Element
`skeleton`	Applied alongside `-skeleton` parts during loading states
`chat-header-skeleton`	Header skeleton container
`chat-header-avatar-skeleton`	Avatar placeholder
`chat-header-expert-name-skeleton`	Expert name placeholder
`chat-header-tagline-skeleton`	Tagline placeholder
`loading-dots`	Animated loading dots

Targeting Parts in Your CSS

Use ::part() on the host custom element. Replace the element name with whichever widget you are styling — remark-chat-widget for the floating chat or remark-qa-activator for the embedded chat (inline activator):

/* Floating chat: add a bottom border to the header during a conversation */
remark-chat-widget::part(header-content-chat) {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--remark-colors-border-subtle);
}

/* Embedded chat: hide the profile card gallery */
remark-qa-activator::part(expert-profile-card-gallery) {
  display: none;
}

/* Floating chat: hide prompt bubbles above the button activator */
remark-chat-widget::part(floating-activator-prompts) {
  display: none;
}

A common use case for the embedded chat is adding spacing above or below the widget to separate it from surrounding page content:

/* Add vertical spacing around the embedded chat */
remark-qa-activator {
  margin-block: 2rem;
}

You can use nested media queries to apply different styles at different viewport sizes:

remark-qa-activator {
  @media (min-width: 50rem) {
    --hem: 18px;
  }
}

In this example, the embedded chat uses the default base font size (16 px) on smaller screens and bumps it up on larger viewports.

Some parts are only present in specific UI states. For example, more-options-menu and layout-menu are only rendered while those dropdowns are open, and skeleton parts are only present while the widget is loading.

Full Example

This example shows custom CSS that adjusts sizing tokens and styles individual parts. Colors and font family would typically be set through the dashboard rather than in CSS.

/* Override sizing tokens on both widgets */
remark-chat-widget,
remark-qa-activator {
  --hem: 18px;
  --remark-spacing-multiplier: 1.25;
  --remark-radii-base: 0.75rem;
}

/* Style individual parts (floating chat) */
remark-chat-widget::part(header-content-chat) {
  padding: 1rem 1.25rem;
}

remark-chat-widget::part(chat-header-tagline) {
  color: var(--remark-colors-content-muted);
}

/* Style individual parts (embedded chat) */
remark-qa-activator::part(product-recommendation) {
  border: 1px solid var(--remark-colors-border-subtle);
}

Best Practices

Use widget settings first. The dashboard handles colors, typography, spacing, and border radius with built-in dark mode support. Reach for custom CSS only when you need to style a specific element differently.
Reference token variables in ::part() rules. When writing custom CSS, use the --remark-colors-* tokens rather than hardcoded color values so your overrides adapt to light and dark mode.
Style semantic parts, not layout wrappers. Prefer parts like header-content or product-recommendation over incidental containers.
Use scene suffixes for targeted styling. Parts like widget-header, header-menu-close-button, and prompt-button match all scenes. Append a scene name (e.g., widget-header-landing, header-menu-close-button-chat) to scope styles to a specific context.
Account for stateful parts. Menu, loading, and prompt parts may only render in specific states. Test your overrides in those states.
Check responsive layouts. Header menus, product cards, activators, and input affordances can shift across screen sizes.

Beyond CSS

For designs that go further than settings and custom CSS can reach — a fully custom activator built into your product grid, redesigned widget surfaces, or a bespoke theme — Remark supports brand-specific widget extensions built and maintained by our team. If you have a design in mind, contact your Remark representative to discuss what’s possible.

Widget Settings

CSS Custom Properties

Shadow DOM Parts

Full Example

​Widget Settings

​Appearance

​Chat Settings

​Inline Activator Settings

​CSS Custom Properties

​Sizing and Typography

​Distance from the Screen Edge

​Colors

​Content

​Backgrounds

​Borders

​Brand

​Action

​Status

​Elevated Surfaces

​Overlays and Inverse

​Shadow DOM Parts

​Floating Activators

​Shared Parts

​Widget Shell

​Chat Header

​Header Menus

​Expert Intro

​Paused Scene

​Expert Profile Card

​Expert Profile Drawer

​Welcome Card

​Messages

​Message Prose

​Typing and Input

​Prompts

​Product Recommendations

​Presented Showcases

​Content Previews

​Inline Cards

​Assistant Indicator

​Footer

​Data Collection

​Skeleton and Loading

​Targeting Parts in Your CSS

​Full Example

​Best Practices

​Beyond CSS

Widget Settings

Appearance

Chat Settings

Inline Activator Settings

CSS Custom Properties

Sizing and Typography

Distance from the Screen Edge

Colors

Content

Backgrounds

Borders

Brand

Action

Status

Elevated Surfaces

Overlays and Inverse

Shadow DOM Parts

Floating Activators

Shared Parts

Widget Shell

Chat Header

Header Menus

Expert Intro

Paused Scene

Expert Profile Card

Expert Profile Drawer

Welcome Card

Messages

Message Prose

Typing and Input

Prompts

Product Recommendations

Presented Showcases

Content Previews

Inline Cards

Assistant Indicator

Footer

Data Collection

Skeleton and Loading

Targeting Parts in Your CSS

Full Example

Best Practices

Beyond CSS