# Custom CSS

> For AI agents: a documentation index is available at [/docs/llms.txt](/docs/llms.txt). Append `.md` to any page URL for markdown, or send `Accept: text/markdown`.

Amplitude provides two options for customizing the appearance of your guides and surveys. [Themes](https://amplitude.com/docs/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.

> **Note:** Web SDK only
>
> Custom CSS is available for the web SDK. Mobile SDKs (iOS, Android, React Native) don't support custom CSS.

## 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:

```css
/* 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

| Form Factor | Selector |
| --- | --- |
| Banner | `.amplitude-engagement-banner-container` |
| Card | `.amplitude-engagement-card-container` |
| Modal | `.amplitude-engagement-modal-container` |
| Modal overlay | `[data-amplitude-engagement-modal-overlay]` |
| Popover | `.amplitude-engagement-popover-container` |
| Tooltip | `.amplitude-engagement-tooltip-content` |
| Pin | `.amplitude-engagement-pin` |
| Checklist | `.amplitude-engagement-checklist` |

### Common elements

| Element | Selector |
| --- | --- |
| Close button | `.amplitude-engagement-close` |
| Image | `.amplitude-engagement-image` |
| Video | `.amplitude-engagement-video` |
| Title | `.amplitude-engagement-title` |
| Content | `.amplitude-engagement-content` |
| Beacon | `.amplitude-engagement-beacon` |

### Banner-specific elements

| Element | Selector |
| --- | --- |
| Banner body | `.amplitude-engagement-banner-body` |
| Banner title | `.amplitude-engagement-banner-title` |
| Banner content | `.amplitude-engagement-banner-content` |
| Banner actions | `.amplitude-engagement-banner-actions` |
| Banner close button | `.amplitude-engagement-banner-close-button` |

### Tooltip-specific elements

| Element | Selector |
| --- | --- |
| Tooltip content | `.amplitude-engagement-tooltip-content` |
| Tooltip marker | `.amplitude-engagement-tooltip-marker` |
| Tooltip marker (image) | `.amplitude-engagement-tooltip-marker__image` |
| Tooltip marker (icon) | `.amplitude-engagement-tooltip-marker__icon` |
| Tooltip marker (beacon) | `.amplitude-engagement-tooltip-marker__beacon` |

> **Note:**
>
> When a tooltip uses the **Element is marker** setting (web only), Amplitude doesn't render a separate marker element, so the tooltip marker selectors in the table above don't match any elements. Go to [Tooltip](https://amplitude.com/docs/guides-and-surveys/form-factors#tooltip) in the form factors guide for details.

### Pin-specific elements

| Element | Selector |
| --- | --- |
| Pin | `.amplitude-engagement-pin` |
| Pin beacon | `.amplitude-engagement-pin-beacon` |
| Pin content | `.amplitude-engagement-pin-content` |
| Pin arrow | `.amplitude-engagement-pin-arrow` |
| Pin mask | `.amplitude-engagement-pin-mask` |

### Checklist-specific elements

| Element | Selector |
| --- | --- |
| Checklist | `.amplitude-engagement-checklist` |
| Checklist header | `.amplitude-engagement-checklist-header` |
| Checklist title | `.amplitude-engagement-checklist-title` |
| Checklist subtitle | `.amplitude-engagement-checklist-subtitle` |
| Checklist progress | `.amplitude-engagement-checklist-progress` |
| Checklist close button | `.amplitude-engagement-checklist-close-button` |
| Checklist item header (expanded) | `.amplitude-engagement-checklist-item-header__expanded` |
| Checklist item header (collapsed) | `.amplitude-engagement-checklist-item-header__collapsed` |
| Checklist item body | `.amplitude-engagement-checklist-item-body` |
| Checklist item content | `.amplitude-engagement-checklist-item-content` |
| Checklist item buttons | `.amplitude-engagement-checklist-item-buttons` |
| Checklist item button (primary) | `.amplitude-engagement-checklist-item-button__primary` |
| Checklist item button (secondary) | `.amplitude-engagement-checklist-item-button__secondary` |

### Card-specific elements

| Element | Selector |
| --- | --- |
| Card | `.amplitude-engagement-card` |
| Card content | `.amplitude-engagement-card-content` |

### Modal-specific elements

| Element | Selector |
| --- | --- |
| Modal body | `.amplitude-engagement-modal-body` |

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

| Element | Selector |
| --- | --- |
| Actions bar container | `.amplitude-engagement-actions-bar-container` |
| Actions bar | `.amplitude-engagement-actions-bar` |
| Classic and split layout variants | `.actions-bar-layout-classic` |
| Stacked layout variant | `.actions-bar-layout-stacked` |
| Centered layout variant | `.actions-bar-layout-centered` |

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

```css
/* 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

| Element | Selector |
| --- | --- |
| CTA button | `.amplitude-engagement-cta-button` |
| CTA button (primary) | `.amplitude-engagement-cta-button__primary` |
| CTA button (secondary) | `.amplitude-engagement-cta-button__secondary` |
| Banner actions | `.amplitude-engagement-banner-actions` |

### Form elements (Survey elements)

| Element | Selector |
| --- | --- |
| Survey prompt | `.amplitude-engagement-survey-prompt` |
| List | `.amplitude-engagement-list` |
| List dropdown | `.amplitude-engagement-list-dropdown` |
| Rating | `.amplitude-engagement-rating` |
| Rating (emojis) | `.amplitude-engagement-rating__emojis` |
| Rating (numbers) | `.amplitude-engagement-rating__numbers` |
| Rating (stars) | `.amplitude-engagement-rating__stars` |
| Rating label | `.amplitude-engagement-rating-label` |
| Rating label (start) | `.amplitude-engagement-rating-label-start` |
| Rating label (end) | `.amplitude-engagement-rating-label-end` |
| Text input | `.amplitude-engagement-text-input` |
| Short text input | `.amplitude-engagement-short-text-input` |
| Input | `.amplitude-engagement-input` |
| Select | `.amplitude-engagement-select` |
| Select input | `.amplitude-engagement-select-input` |
| Checkbox option | `.amplitude-engagement-checkbox-option` |
| Radio option | `.amplitude-engagement-radio-option` |

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

```css
/* 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

```css
/* 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:

```css
.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