Styling & Theming

​

1. CSS Custom Properties

​

1.1. Font Sizes

​

1.2. Blur Effects

​

1.3. Line Heights & Font Families

​

1.4. Component Sizes and Layout

​

1.5. Opacity

​

1.6. Colors

​

1.7. Borders, Radii, and Spacing

remark-qa-activator {
  --remark-colors-primary-default: #007acc;
  --remark-font-sizes-default: 18px;
  --remark-spacing-default: 20px;
}

​

2. Shadow DOM Parts

​

2.1. Available Parts

​

Activator Parts

• parent-container: The root container that wraps the entire Q&A Activator.
• expert-header-container: The header section containing the expert’s avatar, name, and additional information.
• expert-avatar-container: Container for the expert’s avatar (typically includes rotation or loading effects).
• expert-avatar-name: The name of the expert.
• expert-avatar-clover: The small clover icon next to the expert’s name.
• expert-avatar-expertise: The expertise of the expert.
• we-run-with-remark: The text “We run with Remark” in the footer.
• online-indicator: Visual cue (a small circle) indicating the expert’s online status.
• expert-chat-message: The container displaying the expert’s chat message or bio.
• input-group: Groups the text input area and send button for the user’s message.
• activator-button: Buttons used to activate questions or actions.
• activator-button-text: The text inside the activator button.

​

Chat Widget Parts

Activator Components

• activator-card-parent, activator-card-close-button, activator-card-open-button
• expert-activator-parent
• main-activator-button-parent, main-activator-button, main-activator-button-unread-message-count-bubble, main-activator-button-unread-message-count-bubble-text, main-activator-button-activator-image
• mobile-activator-parent, mobile-activator-close-button, mobile-activator-close-button-text, mobile-activator-open-button, mobile-activator-open-button-image, mobile-activator-unread-message-count-bubble, mobile-activator-unread-message-count-bubble-text

Chat Interface Components

• app-parent
• chat-box-parent, chat-box
• chat-header, chat-header-avatar, chat-header-vendor-badge, chat-header-empty, chat-header-title, chat-header-subtitle, chat-header-menu-button
• message-list-container, message-list-loading-container, message-list-scrollable-container
• message-body
• powered-by-remark-container, powered-by-remark-link, powered-by-remark-text

Message Components

• chat-message-container, chat-message-container-flexbox, chat-message-container-inner, chat-message-timestamp, chat-message-ai-generated-text
• chat-event-container, chat-event-emoji, chat-event-text, chat-event-additional-info
• og-container, og-container-inner, og-video, og-image, og-title, og-price, og-loading-container
• nps-emoji-container, nps-emoji-button, nps-option-button

Expert Profile Components

• expert-profile-container, expert-profile-name, expert-profile-bio, expert-profile-wide-photo, view-expert-profile-link
• expert-profile-avatar-parent, expert-profile-avatar, expert-profile-avatar-loading
• expert-profile-fullscreen-parent, expert-profile-fullscreen-carousel-item, expert-profile-fullscreen-carousel-item-image, expert-profile-fullscreen-carousel-item-image-loading, expert-profile-fullscreen-carousel-item-image-blurred
• expert-matched-message-parent, expert-matched-message-summary-title, expert-matched-message-summary
• matched-expert-pills-parent, matched-expert-pill, matched-expert-pill icon, matched-expert-pill-text
• work-experience-label, work-experience-item, work-experience-item-title, work-experience-item-description

Introduction and Onboarding Components

• introduction-message-parent, introduction-message-avatar-parent, introduction-message-name, introduction-message-vetted, introduction-message-need-help, introduction-message-chat-button, introduction-message-chat-button-text
• PII-collection-steps-count, email-collection-input, email-collection-input-count, email-collection-input-submit, email-collection-input-skip
• terms-of-service-text, terms-of-service-link, customer-support-link

Loading and Status Indicators

• loading-messages-spin, loading-messages-spin-svg
• waiting-for-pairing-container, waiting-for-pairing-ai-overlay, waiting-for-pairing-ai-overlay-title, waiting-for-pairing-ai-overlay-message, waiting-for-pairing-ripple, waiting-for-pairing-brand-logo, waiting-for-pairing-expert
• typing-indicator-container, typing-indicator-dot
• online-indicator
• ai-persona-indicator-container, ai-persona-indicator-persona-chatting-with, ai-persona-indicator-beta-badge, ai-persona-indicator-menu-button

Recommendation Components

• recommendation-parent, recommendation-inner
• recommendation-carousel-container, recommendation-carousel-item, recommendation-carousel-item-image
• recommendation-image-container, recommendation-image
• recommendation-link, recommendation-price
• recommendation-variant, recommendation-variant-separator
• recommendation-loading, recommendation-loading-container, recommendation-loading-title, recommendation-loading-price

Icons

• close icon, wave icon, sparkles icon, transparent-speech-bubble icon,
• vertical-ellipsis icon, vetted-expert icon

UI Building Blocks

• avatar-container, avatar-image, avatar-initials-container, avatar-initials-text
• slide-button
• tooltip-container
• wave-divider
• ai-chat-transfer-inline-message
• chat-divider

​

2.2. Targeting Parts in Your CSS

/* Adjust padding on the main container */
remark-qa-activator::part(parent-container) {
  padding: 12px 24px !important;
}

/* Hide the expert header */
remark-qa-activator::part(expert-header-container) {
  display: none !important;
}

/* Style the expert chat message container */
remark-qa-activator::part(expert-chat-message) {
  background-color: var(--remark-colors-bg-primary) !important;
  padding: var(--remark-spacing-default);
}

remark-qa-activator::part(expert-header-container) {
  display: ${showHeader ? "flex" : "none"} !important;
}

​

3. Putting It All Together: A Full Example

/* Global theme overrides for the Q&A Activator */
remark-qa-activator {
  /* Change the primary colors */
  --remark-colors-primary-default: #007acc;
  --remark-colors-primary-emphasis: #005a9c;

  /* Adjust text sizes */
  --remark-font-sizes-default: 18px;
  --remark-font-sizes-large: 20px;

  /* Modify spacing */
  --remark-spacing-default: 20px;
}

/* Style individual parts via the ::part() selector */
remark-qa-activator::part(parent-container) {
  padding: 16px 32px !important;
  background-color: var(--remark-colors-bg-default);
}

remark-qa-activator::part(expert-header-container) {
  display: flex !important;
  align-items: center;
  gap: var(--remark-spacing-small);
}

remark-qa-activator::part(expert-chat-message) {
  border: var(--remark-borders-default) solid var(
      --remark-colors-border-default
    );
  border-radius: var(--remark-radii-default);
  background-color: var(--remark-colors-bg-primary);
  padding: var(--remark-spacing-default);
}

remark-qa-activator::part(activator-button) {
  background-color: var(--remark-colors-primary-default);
  color: var(--remark-colors-content-inverted);
  border-radius: var(--remark-radii-small);
  padding: var(--remark-spacing-small) var(--remark-spacing-default);
  transition: background-color 0.22s;
}

remark-qa-activator::part(activator-button):hover {
  background-color: var(--remark-colors-primary-emphasis);
}

​

4. Best Practices

• Use Variables First: Because most styling is based on CSS custom properties, try to override the variables on the remark-qa-activator element first. This maintains consistency and leverages the built-in theming.
• Minimize !important: Although the examples above use !important to ensure your styles take precedence, use this sparingly and only when necessary.
• Test Responsiveness: Some parts of the activator (like button layout or input widths) may be responsive. Check your overrides on multiple screen sizes.
• Dynamic Styling: If your application logic needs to show or hide parts (for example, toggling the expert header), consider using inline styles or CSS classes in combination with the ::part() selectors.