Custom CSS

Amplitude provides two options for customizing the appearance of your guides and surveys. Themes control the overall appearance of your guides and surveys. Custom CSS offers fine-grained control for specific styling needs that themes can't address. Amplitude recommends using themes for most customizations, because themes offer better flexibility and backward compatibility.

How custom CSS works

The Guides and Surveys SDK adds CSS classes to form factor elements so you can target the elements with CSS. These selectors:

• Provide stable targets for custom styling
• Focus on container and parent elements
• Work alongside existing theme settings

Class selectors

Use CSS class selectors to target Guides and Surveys elements:

/* Target banner container */
.amplitude-engagement-banner-container {
  background-color: #f0f0f0;
}

/* Target modal overlay */
[data-amplitude-engagement-modal-overlay] {
  background-color: rgba(0, 0, 0, 0.8);
}

Form factor containers

Common elements

Banner-specific elements

Tooltip-specific elements

Pin-specific elements

Checklist-specific elements

Card-specific elements

Modal-specific elements

Actions bar elements

Use these selectors to target the action bar area of nudge footers. Each layout applies a base class and a layout-specific variant class, so you can style all layouts together or target a specific layout.

For example, to add a border above CTAs in all nudge footer layouts, or to style only a specific layout:

/* Add a border above CTAs in all guide/survey footer layouts */
.amplitude-engagement-actions-bar-container {
  border-top: 1px solid #000000;
}

/* Style only Classic and Split layout footers */
.amplitude-engagement-actions-bar.actions-bar-layout-classic {
  padding-top: 12px;
}

Buttons and actions

Form elements (Survey elements)

The .amplitude-engagement-survey-prompt selector targets question prompt labels across rating, text, list, and dropdown survey blocks. The .amplitude-engagement-rating-label-start and .amplitude-engagement-rating-label-end selectors target the two scale-endpoint labels inside .amplitude-engagement-rating-label.

Using class selectors

Basic styling

/* Style banner background */
.amplitude-engagement-banner-container {
  background: linear-gradient(to right, #667eea, #764ba2);
}

/* Customize CTA button appearance */
.amplitude-engagement-cta-button {
  border-radius: 8px;
  text-transform: uppercase;
}

/* Style close button hover state */
.amplitude-engagement-close:hover {
  opacity: 0.7;
}

Target specific form factors

/* Style banners with custom background */
.amplitude-engagement-banner-container {
  background: linear-gradient(to right, #667eea, #764ba2);
}

/* Style primary CTA buttons in banners */
.amplitude-engagement-banner-container
  .amplitude-engagement-cta-button__primary {
  width: 100%;
}

/* Style checklist progress bars */
.amplitude-engagement-checklist-progress {
  background-color: #f5f5f5;
}

Important considerations

Note the following considerations when you implement custom CSS.

Specificity

You may need to use !important to override default styles:

.amplitude-engagement-banner-container {
  background-color: #custom-color !important;
}

Selector stability

Target the documented CSS classes rather than:

• Internal generated class names
• Element structure that may change
• Undocumented classes or attributes