Styling & Theming - Remark Documentation

Remark’s widgets are custom elements, such as <remark-chat-widget> for the floating chat and <remark-qa-activator> for the embedded chat (also known as the inline activator). Every Remark element carries a data-remark attribute and shares the same theme system. You can customize them 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 Remark’s widgets. These settings apply to all of them together unless you limit them with Use theme in….

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 load only in the dashboard preview. Load the font on your site for the widget to use it
Font size	Base font size in pixels, from 12 to 24. All typography scales from this
Padding	Internal spacing (Compact, Default, Comfortable, or a custom pixel value)
Border roundness	Corner radius (Square, Rounded, Circular, or a custom pixel value)
Use theme in…	Whether these settings apply to the floating chat (Chat widget), the embedded chat and other on-page Remark elements (Activator), or both. Custom CSS always applies
Chat z-index	Stacking order of the floating chat. Increase it if the chat appears behind site elements

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). Every selector must include a Remark element: [data-remark] matches all of them at once, or name one, such as remark-chat-widget. 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
Default size	Standard, expanded, or full height when the chat opens
Enable activator animation	Show the icon animation on the button activator
Activator icon	Custom icon 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)
Inline activator only	Hide the floating chat so the embedded chat is the only Remark chat on the site
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 correspond to dashboard settings but can also be overridden in custom CSS when finer control is needed. --hem is set on the Remark element itself, so override it on [data-remark] or a specific element such as remark-qa-activator. The other three are set on the theme-root part inside the widget, so override them on [data-remark]::part(theme-root).

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	Padding
`--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 ::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. At the full height size, the open panel docks to the screen edge on larger screens and ignores both distances.

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-online-content`	Online color for text
`--remark-colors-online-border`	Online color for borders
`--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

Every Remark element exposes internal elements through the part attribute. You can target those elements from outside the shadow tree with the ::part() pseudo-element. The widget has three scenes: landing (before the conversation starts), chat (active conversation), and paused (embedded chat only, while the conversation continues in the floating chat on the same page). The element reports the current scene in its data-scene attribute, so you can style the same part differently per scene. For example, remark-chat-widget::part(widget-header) matches the header in any scene, while remark-chat-widget[data-scene='landing']::part(widget-header) 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

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. Combine them with data-scene to 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-content`	Main content slot
`widget-footer`	Footer slot

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).

Part	Element
`chat-header`	Header content container
`chat-header-brand`	Header variant showing the brand logo and name, before a conversation starts
`chat-header-expert`	Header variant showing the matched expert
`chat-header-avatar`	Expert avatar
`avatar-status-indicator`	Online dot on the 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.

Part	Element
`header-menu`	Menu buttons container
`header-menu-button`	Shared on every header action button
`header-menu-more-button`	More options icon button
`header-menu-close-button`	Minimize or close button
`header-menu-open-chat-button`	Open chat button, embedded mode
`header-menu-layout-button`	Layout menu trigger
`header-menu-cart-button`	Cart button, shown when the shopper’s cart has items
`cart-icon`	Cart glyph inside the cart button
`cart-count-badge`	Item-count badge on the cart glyph
`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-size-full-height`	Full height 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 in the embedded chat while the visitor’s conversation is open in the floating chat on the same page. Displays the matched expert’s avatar, a status message, suggested prompts, and a button that moves the conversation into the embedded chat.

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

Expert Profile Drawer

A slide-over panel with the expert’s full profile, including bio and credentials. Opens when the visitor clicks the expert in the chat header (chat-header-expert-trigger), for experts with a full profile.

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 Message

The expert’s opening message, shown at the start of a new conversation before the visitor sends anything.

Part	Element
`welcome-message`	Welcome message row
`welcome-message-avatar`	Welcome message avatar
`welcome-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 message
`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-body`	Message line inside a system message
`system-message-content`	System message text
`back-to-bottom-button`	Scroll-to-bottom button
`back-to-bottom-button-unread-badge`	Unread badge on scroll button

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-attach-button`	Attach files button beside the input
`chat-input-actions`	Row holding the attach and send buttons when the input stacks them below the text

Attachments

Files the visitor attaches to a message, when attachments are enabled for your workspace. Staged files show in a preview strip above the input. Sent files that aren’t images show as a list on the message, and sent images use the gallery parts in Messages.

Part	Element
`attachment-preview-strip`	Row of staged attachments above the input
`attachment-thumbnail`	Individual staged attachment
`attachment-thumbnail-image`	Image preview inside a staged attachment
`attachment-thumbnail-file`	File tile inside a staged attachment that isn’t an image
`attachment-thumbnail-file-icon`	File type icon
`attachment-thumbnail-file-label`	File name label
`attachment-thumbnail-remove-button`	Remove button on a staged attachment
`attachments-container`	Attachment list root on a sent message
`attachments-label`	Heading above the list
`attachments-list`	List of attached files
`attachment-wrapper`	Individual list item
`attachment-item`	Download link for a file
`attachment-tile`	Paperclip icon inside the link
`attachment-caption`	File name caption

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.

Part	Element
`prompt-button`	Individual prompt button
`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-prompt-container`	Wrapper around each prompt on the landing screen
`prompt-skeleton`	Shimmering placeholder shown while prompts load
`conversation-starters-prompts`	Conversation starter prompts container
`generated-follow-ups-prompts`	Suggested follow-up questions under the latest answer
`activator-follow-ups-prompts`	Activator questions offered again beside the follow-up questions

The prompt-button part also appears on prompt-skeleton placeholders and on the live try-on prompt, so a rule on ::part(prompt-button) styles those too.

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
`product-variant-sheet-sold-out-warning`	Sold-out notice in the variant picker sheet
`price-details`	Price block, including the original price when discounted, on product cards, the variant picker sheet, the cart, and showcase hover cards
`product-thumbnail`	Product photo in the cart toast, the cart, the linked-product badge, and showcase hover cards

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
`otp-request-field`	Passcode entry that replaces the chat input during email verification
`otp-request-email-field`	Email entry shown when the shopper changes the address to verify
`otp-request-notice`	Notice for an expired, verified, or exhausted passcode
`inline-nps-request`	Rating request card in the message stream
`nps-request-avatar`	Expert avatar on the rating request
`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). The shimmering placeholder blocks also carry the skeleton token, so you can target a specific placeholder or style them all at once.

Part	Element
`skeleton`	Applied alongside `-skeleton` parts on shimmering placeholder blocks
`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
`loading-dots-skeleton`	Loading dots shown while a conversation loads

Live Try-On and Review Summaries

These parts apply to workspaces with live try-on or review summaries enabled. Their dialogs open outside the element that launched them, so style these parts with [data-remark] (see Targeting Parts in Your CSS).

Live Try-On

Part	Element
`live-view-launcher`	Button that opens live try-on on the product page
`live-view-try-on-prompt`	Try-on prompt in the embedded chat
`live-view-tried-on-message`	Message in the conversation after a try-on
`live-view-dialog`	Full-screen try-on dialog
`live-view-backdrop`	Dialog backdrop
`live-view-hud`	Controls over the camera view
`live-view-status`	Status pill in the controls
`live-view-close`	Close button
`live-view-consent`	Camera consent panel
`live-view-consent-proceed`	Continue button on the consent panel
`live-view-post-try-on`	Panel shown after the try-on
`live-view-product-name`	Product name on that panel
`live-view-post-try-on-link`	Link to the product page
`live-view-add-to-cart`	Add-to-cart button

Other live try-on parts use the live-view- prefix.

Review Summaries

Part	Element
`review-summary`	Review summary root on the product page
`review-summary-title`	Summary heading
`review-summary-rating`	Average rating
`review-summary-blurb`	Summary text
`review-summary-highlight`	Highlighted phrase that opens the breakdown at its theme
`review-summary-open`	Button that opens the breakdown
`review-breakdown`	Breakdown panel
`review-breakdown-close`	Breakdown close button
`review-topic`	Theme section in the breakdown
`review-topic-trigger`	Button that expands a theme
`review`	Cited review
`review-rating`	Star rating on a cited review

Targeting Parts in Your CSS

Use ::part() on a Remark element. [data-remark] styles a part wherever it appears, which suits brand-wide rules. Name a specific element, such as remark-chat-widget for the floating chat or remark-qa-activator for the embedded chat (inline activator), to style only that surface:

/* Every Remark element: give prompt text a heavier weight */
[data-remark]::part(prompt-button) {
  font-weight: var(--remark-font-weights-medium);
}

/* Floating chat: add a bottom border to the header during a conversation */
remark-chat-widget[data-scene='chat']::part(widget-header) {
  border-block-end: 1px solid var(--remark-colors-border-subtle);
}

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

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

Live view and the review breakdown open in a full-page layer attached to the end of the page rather than inside the element that launched them. Style their parts with [data-remark], such as [data-remark]::part(review-breakdown), since an element name like remark-reviews doesn’t reach them. 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::part(parent-container) {
  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. CSS nesting works inside an element selector, as in the example above, but not inside a ::part() rule. A rule nested in a ::part() block never matches, while the outer rule still applies, so the mistake is easy to miss. Attach pseudo-classes and pseudo-elements to the part directly:

/* Matches: the pseudo-class is attached to the part */
remark-chat-widget::part(prompt-button):hover {
  background-color: var(--remark-colors-background-hover);
}

/* Never matches: the pseudo-class is nested inside the part rule */
remark-chat-widget::part(prompt-button) {
  &:hover {
    background-color: var(--remark-colors-background-hover);
  }
}

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.

/* Sizing on every Remark element */
[data-remark] {
  --hem: 18px;

  &::part(theme-root) {
    --remark-spacing-multiplier: 1.25;
    --remark-radii-base: 0.75rem;
  }

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

/* Floating chat: pad the header during a conversation */
remark-chat-widget[data-scene='chat']::part(widget-header) {
  padding-block: 1rem;
  padding-inline: 1.25rem;
}

/* Embedded chat: outline product recommendations */
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 widget-header or product-recommendation over incidental containers.
Scope by scene with data-scene. Parts like widget-header, header-menu-close-button, and prompt-button match all scenes. Add a scene to the element selector (e.g., remark-chat-widget[data-scene='chat']::part(widget-header)) to style a specific context. Keep base styling in unscoped rules, because the element sets data-scene only after the widget loads.
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 Drawer

​Welcome Message

​Messages

​Message Prose

​Typing and Input

​Attachments

​Prompts

​Product Recommendations

​Presented Showcases

​Content Previews

​Inline Cards

​Assistant Indicator

​Footer

​Data Collection

​Skeleton and Loading

​Live Try-On and Review Summaries

​Live Try-On

​Review Summaries

​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 Drawer

Welcome Message

Messages

Message Prose

Typing and Input

Attachments

Prompts

Product Recommendations

Presented Showcases

Content Previews

Inline Cards

Assistant Indicator

Footer

Data Collection

Skeleton and Loading

Live Try-On and Review Summaries

Live Try-On

Review Summaries

Targeting Parts in Your CSS

Full Example

Best Practices

Beyond CSS