Basic customization of your surveys can be accomplished in the Iterate survey builder, including color scheme, border radius, and fonts. For website surveys, fonts will automatically be matched to your site, but can also be manually specified in the survey builder.
If you need further control over customization, certain elements of the survey have CSS classes applied to them that will remain stable even as we update elements of the survey interface. These can be used to target survey elements with custom CSS.
For Website Surveys
You can target survey elements using your site's global stylesheet.
For In-App Message Surveys
When using integrations like Braze or Iterable, you can include custom CSS within the in-app message code to style the survey elements.
Stable CSS Classes
Title | CSS class | Description |
Button |
| All UI buttons excluding the close button and the previous/next buttons, including question types where a button is used to respond |
Button active |
| An active state for Button |
Close button |
| The close button used to dismiss the prompt or survey |
Container |
| A container element that wraps both the optional prompt and the survey itself |
Container border |
| A top border element applied to both the prompt and survey |
Dark mode |
| A container element that applies to surveys that have their appearance set to Dark |
Dark mode auto |
| A container element that applies to surveys that have their appearance set to Auto (respects the OS appearance style Light/Dark) |
Emoji option |
| A container element that wraps each of the images in the Emoji question type |
Footer |
| The footer panel of the survey that contains previous/next question buttons and Iterate branding |
Footer - next button |
| Next question button in the survey footer |
Footer - previous button |
| Previous question button in the survey footer |
Legal copy |
| The container element which houses the copy for the legal question type |
Prompt |
| A container element for the optional prompt that appears before the user opts in to the survey (can be used to target elements that only appear in the prompt, vs. the survey itself) |
Question |
| A container element that wraps each question within the survey |
Question text |
| The text of each question in the survey |
Radio button |
| Radio buttons, for the question types in which they appear |
Rating images |
| A container element that wraps each of the images in the Rating question type |
Selected option |
| An active state for the selected answer option |
Survey |
| A container element for the survey itself (can be used to target elements that only appear in the survey, vs. the prompt) |
Segment |
| Each of the segments of the survey progress bar that is displayed across the top of the survey container |
Segment active |
| An active state for Segment |
Thank you message |
| A container element for the Thank you message that appears at the end of a survey |
Example Usage
/* Custom question text styling */
.iterate__questionPrompt {
color: #333333;
font-size: 24px;
}
Note: Our CSS classes have a double underscore.
For specific guidance on implementing custom CSS in Braze, Iterable, or one of our other integrations, please refer to their respective documentation on in-app message customization.
Important: While we'll do our best to support any advanced customization of the survey UI you'd like to do, we may not be able to assist with troubleshooting all styling issues.