Customizing widgets

How custom CSS works with RightMessage

When editing any widget in RightMessage, you’ll find a textarea where you can enter arbitrary CSS code.

RightMessage will interpolate whatever you enter into this textarea and add it directly to your widget’s stylesheet.

It’s important to note that the CSS styles you add to a widget are accessible to the entire webpage - this means that what you enter can “spill over” and possibly affect other content on your website.

To mitigate this, we recommend that you follow the best-practices we’ve outlined below.

Available CSS Classes

When writing custom CSS, you'll use simplified class selectors that automatically get scoped to your specific widget. This ensures your styles only affect the intended widget and don't interfere with other page elements.

Core Structure Classes

.widget

Purpose: The main widget container element

Default Behavior:

• Controls overall widget dimensions, positioning, and shadows

• Has rounded corners (border-radius) based on theme

• Contains box-shadow for depth effect

Common Customizations:

.widget {
  /* Adjust rounded corners */
  border-radius: 20px !important;

  /* Customize shadow */
  box-shadow: 0 15px 80px 50px rgba(224, 216, 208, 0.65);

  /* Change maximum width */
  max-width: 500px !important;
}

.container

Purpose: The content area ("meat") where questions, offers, and forms appear

Default Behavior:

• Has padding for internal spacing

• Background color inherited from theme settings

Common Customizations:

.container {
  /* Adjust internal padding */
  padding: 30px !important;

  /* Add background gradient */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

Text Elements

.title

Purpose: Main heading text for questions, offers, or forms

Default Behavior:

• Font size scales based on widget type (larger for modals, smaller for toasters)

• Uses theme's heading font family

• Bold font weight (700)

Common Customizations:

.title {
  /* Change font family */
  font-family: 'Georgia', serif !important;

  /* Adjust size */
  font-size: 24px !important;

  /* Add text effects */
  text-transform: uppercase;
  letter-spacing: 2px;

  /* Change color */
  color: #2d3748 !important;
}

.description

Purpose: Supporting text that appears below titles

Default Behavior:

• Smaller font size than title

• Regular font weight (400)

• Slightly muted color for hierarchy

Common Customizations:

.description {
  /* Adjust font styling */
  font-style: italic;
  font-size: 16px !important;

  /* Change line height for readability */
  line-height: 1.6 !important;

  /* Adjust opacity */
  opacity: 0.9;
}

Interactive Elements

.answerButton

Purpose: Buttons for answering segmentation questions

Default Behavior:

• Full width by default

• Padding for comfortable click targets

• Background color from theme settings

• Hover state with darker background

Common Customizations:

.answerButton {
  /* Custom colors */
  background-color: #4299e1 !important;
  color: white !important;

  /* Add border */
  border: 2px solid #2b6cb0 !important;

  /* Rounded corners */
  border-radius: 50px !important;

  /* Hover effect */
  transition: all 0.3s ease;
}

.answerButton:hover {
  background-color: #2b6cb0 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.submitButton

Purpose: Submit buttons for forms and offers

Default Behavior:

• Styled similar to answer buttons

• Often has accent color for prominence

• May include icon elements

Common Customizations:

.submitButton {
  /* Gradient background */
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;

  /* Add padding */
  padding: 15px 30px !important;

  /* Text styling */
  font-weight: bold !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.inputField

Purpose: Text input fields in forms

Default Behavior:

• Full width

• Border styling based on theme

• Padding for comfortable text entry

• Focus state with border color change

Common Customizations:

.inputField {
  /* Border styling */
  border: 2px solid #e2e8f0 !important;
  border-radius: 8px !important;

  /* Padding and spacing */
  padding: 12px 16px !important;

  /* Font */
  font-size: 16px !important;

  /* Focus state */
  transition: border-color 0.2s ease;
}

.inputField:focus {
  border-color: #4299e1 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1) !important;
}

Multi-Select Elements

.multiSelectList

Purpose: Container for multi-select question options

Default Behavior:

• Vertical layout with spacing between options

• No default borders or backgrounds

Common Customizations:

.multiSelectList {
  /* Add background */
  background-color: #f7fafc !important;
  padding: 10px !important;
  border-radius: 8px !important;

  /* Adjust spacing between items */
  gap: 12px !important;
}

.multiSelectOption

Purpose: Individual checkbox-style options in multi-select questions

Default Behavior:

• Display as block elements

• Contains checkbox indicator and label text

• Cursor changes to pointer on hover

Common Customizations:

.multiSelectOption {
  /* Custom styling */
  background-color: white !important;
  border: 1px solid #cbd5e0 !important;
  border-radius: 6px !important;
  padding: 12px !important;

  /* Hover state */
  transition: all 0.2s ease;
}

.multiSelectOption:hover {
  background-color: #edf2f7 !important;
  border-color: #4299e1 !important;
}

/* Selected state */
.multiSelectOption.rm-selected {
  background-color: #ebf8ff !important;
  border-color: #4299e1 !important;
}

.checkboxIndicator

Purpose: The visual checkbox square/circle indicator

Default Behavior:

• 20px × 20px square with border

• Empty when unselected

• Contains checkmark SVG when selected

Common Customizations:

.checkboxIndicator {
  /* Make it circular */
  border-radius: 50% !important;

  /* Custom colors */
  border: 2px solid #4299e1 !important;
  background-color: white !important;

  /* Adjust size */
  width: 24px !important;
  height: 24px !important;
}

/* Selected state */
.checkboxIndicator.rm-selected {
  background-color: #4299e1 !important;
  border-color: #4299e1 !important;
}

/* Checkmark color */
.checkboxIndicator svg {
  stroke: white !important;
}

CSS Variables Reference

RightMessage widgets use CSS custom properties (variables) that you can override:

.widget {
  /* Typography */
  --rm-font: 'Your Font Family', sans-serif;

  /* Colors */
  --rm-palette-backgroundColor: #ffffff;
  --rm-palette-textOnBackgroundColor: #2d3748;
  --rm-palette-ctaBackgroundColor: #4299e1;
  --rm-palette-textOnCtaBackgroundColor: #ffffff;

  /* Structure */
  --rm-structure-containerBorderRadius: 12px;
  --rm-standardPadding: 20px;

  /* Shadows */
  --rm-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

Troubleshooting

Styles Not Applying

1. Check for typos in class names

2. Ensure you're using the simplified class names (.title, not .rm-title)

3. Try adding !important to override existing styles

4. Check browser console for CSS syntax errors

Unexpected Behavior

1. Test in incognito/private mode to rule out browser extensions

2. Clear your browser cache

3. Check if custom CSS is conflicting with theme settings

Mobile Issues

1. Use relative units (em, rem, %) instead of fixed pixels where possible

2. Test touch targets are at least 44×44 pixels

3. Avoid hover-only interactions