Survey Look and Feel

Survey Customization

Adding custom CSS, logos and positioning allows you to tailor In-product and link surveys to match your company branding. Common styling changes include, but are not limited to:

Add a company logo (link surveys only)
Change the font and font colors
Move location of the close button
Change the shape of the survey container
Enable/Disable the Sprig signature - Enterprise only

Logo

Use this option to upload a logo that will be displayed in Shareable Link studies. File types supported include GIF, JPEG, and PNG.

Survey Appearance

Positioning is only available for in-product Website Surveys and applies to all relevant Surveys at a Product level.

Desktop

By default, on desktop/tablet screens, Sprig in-product Surveys will appear in the bottom right corner of your web application, but you can change that to also support:

Bottom left
Top left
Top right
Centered Modal

In-product Surveys that are Centered Modal have the option of a light or dark overlay and the option to allow or disallow exiting the survey by clicking outside the modal.

With the exception of center-positioned survey, your users may still interact with your website while the survey is visible.

Mobile

On mobile devices, Sprig Surveys always appear at the bottom of your web application. By default, your website will still be visible as normal on the remainder of the screen and users will be able to interact with it.

In addition, you may choose either a light or dark overlay to focus attention on the survey. In this case, you have the option to allow/disallow the survey to be exited by clicking outside the study.

Study Style

The color setting allows you to adjust the primary color of the feedback prompt so that it fits seamlessly into your user experience.

You can enter any valid hexadecimal #123ABC or RGB rgb(256,256,256) color code. The default color is Black #000000.

In-Product Website Survey Customization

By adding custom CSS, this feature enables you to tailor website surveys to reflect your brand accurately. Common use cases to update your CSS stylesheet are, but not limited to:

Change the font
Move location of the close button
Change the shape of the survey container
Update font color for question titles
Custom button styling

Adding Custom CSS to a Feedback study

Head over to the Surveys > Look & Feel section in Settings.
Select Add Custom Styles to open the custom CSS modal

Select a question type and Update Preview to observe how your applied styles impact that particular question
Accept the disclaimer and select Apply Styles to make your changes to the studies for which you modified CSS styling

To revert any changes made back to the default style, click Restore contents to default style, then select Apply Styles.

👍
Survey CSS styling applies on per product basis
Any new study created will be styled as configured under Surveys > Look & Feel
Updating CSS styling will apply to all surveys, including active ones.

Supported CSS Classes

Survey Styles:

/*
Base Typography
Applied generally to every view
*/
html,
body {
  /* font-family: -apple-system, BlinkMacSystemFont,
  'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
  'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol'; */
}

b {
  /* font-weight: 600; */
}

/*
Universal Elements
Footer, dots, and close button
*/
.ul-footer {
  /* margin-top: 10px; */
}

.ul-footer-bubble {
  /* width: 7px; */
  /* height: 7px; */
  /* border-radius: 3px; */
}

.close-container {
  /* display: flex; */
  /* justify-content: flex-end; */
  /* width: 100%; */
}

.close-btn {
  /* cursor: pointer; */
  /* height: 18px; */
  /* margin-inline-end: -10px; */
  /* position: relative; */
  /* top: -10px; */
  /* width: 18px; */
  /* z-index: 1; */
}

/*
Card Component
Used as the containing element in every question
*/
.ul-card {
  /* border-radius: 2px; */
  /* font-size: 17px; */
  /* line-height: 19px; */
}

.ul-card__container--desktop {
  /* padding: 20px 20px 5px 20px; */
  /* margin: 15px; */
  /* border: 2px solid #fff; */
  /* box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15); */
}

.ul-card__container--mobile {
  /* padding: 20px 20px 5px 20px; */
  /* border-width: 0; */
  /* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); */
  /* margin-top: 5px; */
}

.ul-card__container {
  /* background: #ffffff; */
  /* font-size: 17px; */
  /* line-height: 23px; */
  /* border-radius: 6px; */
}

.ul-card-main-content {
  /* padding: 0 20px 0 20px; */
}

.ul-question {
  /* color: #343442; */
  /* font-size: 20px; */
  /* line-height: 125%; */
  /* font-weight: 600; */
}

.ul-caption {
  /* margin-top: 8px; */
  /* margin-bottom: 15px; */
  /* font-size: 15px; */
  /* line-height: 130.35%; */
  /* letter-spacing: 0.02em; */
  /* color: #6c6c6e; */
}

.ul-card-text__button {
  /* border-radius: 3px; */
  /* color: white; */
  /* font-size: 15px; */
  /* line-height: 18px; */
  /* padding: 10.5px 21px; */
  /* font-weight: 600; */
  /* border: none; */
  /* cursor: pointer; */
}

.ul-card-text__button:disabled {
  /* background-color: rgba(100, 100, 100, 0.5); */
  /* color: #ffffff; */
}

.ul-card__button-wrapper {
  /* margin-top: 4px; */
  /* margin-bottom: 3px; */
  /* display: flex; */
  /* justify-content: center; */
}

.ul-card-skip__button {
  /* background-color: rgba(100, 100, 100, 0.5); */
}

/* Rich text */
.ul-rich-text-body {
  /* min-height: 2em; */
}

.ul-rich-text-body,
.ul-rich-text-body p {
  /* margin-top: 10px; */
  /* margin-bottom: 10px; */
}

.ul-rich-text-body p,
.ul-rich-text-body li {
  /* font-size: 15px; */
  /* line-height: 130.35%; */
  /* letter-spacing: 0.02em; */
  /* color: #343442; */
  /* text-align: left; */
  /* white-space: pre-line; */
}

.ul-rich-text-body:last-child,
.ul-rich-text-body li:last-child {
  /* margin-bottom: 15px; */
}

/*
Choice Elements
Used in Multiple Choice,
Multiple Choice Multi-Select,
and Matrix Questions
*/
.ul-card--multiple {
}

.ul-card__choices--desktop,
.ul-card__choices--mobile {
  /* margin: 5px 0 0 0; */
}

.ul-card__choices {
  /* height: 100%; */
}

.choice--mobile {
  /* border: 2px solid #e6e6e6; */
}

.choice--desktop {
  /* border: 1px solid #e6e6e6; */
}

.choice--desktop,
.choice--mobile {
  /* margin-bottom: 7px; */
  /* font-size: 15px; */
  /* line-height: 20px; */
  /* padding: 10px 20px 10px 15px; */
  /* background-color: rgba(0, 0, 0, 0.01); */
}

.choice {
  /* color: #262136; */
  /* box-sizing: border-box; */
  /* border-radius: 3px; */
}

.choice--desktop:hover {
  /* background-color: rgba(0, 0, 0, 0.05); */
}

.choice--desktop:active,
.choice--mobile:active {
  /* background-color: rgba(0, 0, 0, 0.05); */
}

.select-label {
  /* margin-left: 10px; */
}

.select-radio {
  /* border: 1px solid rgb(225, 225, 225); */
}

/* For active radios */
.ul-select-active-dynamic-style .select-radio  {
  /* border: 1px solid #FFFFFF !important; */
}

/*
Matrix Question
Applies only to matrix question type
*/

.ul-card--matrix_grid {
  /* row-gap: 4px */
}

.ul-card--matrix_container {
  /* margin-bottom: 16px; */
}

.ul-matrix-column-label {
  /* font-size: 15px; */
  /* max-width: 150px; */
}

.ul-matrix-option-wrapper {
  /* background: #f9f9f8; */
}

.ul-matrix-last-option {
  /* border-start-end-radius: 4px; */
  /* border-end-end-radius: 4px; */
}

.ul-matrix-row-label {
  /* background: #f9f9f8; */
  /* border-end-start-radius: 4px; */
  /* border-start-start-radius: 4px; */
  /* font-size: 15px; */
  /* max-width: 200px; */
}

/*
One to Five Scale (Likert) Question
Applies only to one to five scale (likert) question type
*/
.ul-card--likert {
}

.ul-card--likert__numbers {
  /* border-radius: 5px; */
}

.likert-number--mobile {
  /* border: 2px solid #e6e6e6; */
  /* margin-left: -2px; */
}

.likert-number--desktop {
  /* border: 1px solid #e6e6e6; */
  /* margin-left: -1px; */
}

.likert-number--desktop,
.likert-number--mobile {
  /* background-color: rgba(0, 0, 0, 0.01); */
  /* font-size: 18px; */
  /* line-height: 24px; */
  /* height: 67px; */
}

.likert-number {
}

.likert-number--desktop:hover {
  /* background-color: rgba(0, 0, 0, 0.05); */
  /* font-weight: 600; */
}

.likert-number--desktop:active,
.likert-number--mobile:active {
  /* z-index: 2; */
  /* background-color: rgba(0, 0, 0, 0.05); */
  /* font-weight: 600; */
}

.ul-card--likert__labels {
  /* color: #262136; */
  /* font-weight: 600; */
  /* font-size: 13px; */
  /* line-height: 15px; */
  /* margin: 7px 0 10px 0; */
}

/*
NPS Question
Applies only to NPS question type
*/
.ul-card--nps {
}

.ul-card--nps__numbers {
  /* border-radius: 5px; */
}

.nps-number--mobile {
  /* border: 2px solid #e6e6e6; */
  /* margin-left: -2px; */
}

.nps-number--desktop {
  /* border: 1px solid #e6e6e6; */
  /* margin-left: -1px; */
}

.nps-number--desktop,
.nps-number--mobile {
  /* background-color: rgba(0, 0, 0, 0.01); */
  /* font-size: 18px; */
  /* line-height: 24px; */
  /* height: 67px; */
}

.nps-number {
}

.nps-number--desktop:hover {
  /* background-color: rgba(0, 0, 0, 0.05); */
  /* font-weight: 600; */
}

.nps-number--desktop:active,
.nps-number--mobile:active {
  /* z-index: 2; */
  /* background-color: rgba(0, 0, 0, 0.05); */
  /* font-weight: 600; */
}

.ul-card--nps__labels {
  /* color: #262136; */
  /* font-weight: 600; */
  /* font-size: 13px; */
  /* line-height: 15px; */
  /* margin: 7px 0 10px 0; */
}

/*
Open Text Card
Applies only to open text card question type
*/
.ul-card--text {
}

.ul-card-text {
  /* margin-top: 2px; */
  /* margin-bottom: 3px; */
  /* padding: 0; */
}

.ul-card-text__container {
  /* border-radius: 3px; */
  /* margin-bottom: 12px; */
}

.ul-card-text__input--mobile {
  /* border-radius: 3px; */
  /* border: 2px solid #e6e6e6; */
  /* max-height: 63px; */
}

.ul-card-text__input--desktop {
  /* border-radius: 3px; */
  /* border: 1px solid #e6e6e6; */
  /* max-height: 150px; */
}

.ul-card-text__input--desktop,
.ul-card-text__input--mobile {
  /* font-size: 15px; */
  /* line-height: 20px; */
}

.ul-card-text__input {
  /* background: rgba(0, 0, 0, 0.01); */
  /* color: #343442; */
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol'; */
  /* min-height: 63px; */
  /* padding: 12px; */
  /* resize: none; */
  /* width: 100%; */
}

.ul-card-text__input::placeholder {
  /* color: rgba(108, 108, 110, 0.5); */
}

.ul-card-text__input:focus {
  /* outline: none; */
  /* background: white; */
}

.ul-card-text__input--desktop:hover:not(:focus) {
  /* background-color: rgba(0, 0, 0, 0.05); */
}

/*
Text / URL Prompt
Applies only to Text / URL Prompt question type
*/
.ul-card__text-url-prompt {
}

.ul-card__text-url-prompt-button {
  /* margin-right: auto; */
  /* text-overflow: ellipsis; */
  /* overflow: hidden; */
  /* white-space: nowrap; */
  /* max-width: 100%; */
}

/*
Consent / Legal card
Applies only to consent / legal question type
*/
.ul-consent-legal__name-input--mobile {
  /* border: 2px solid #e6e6e6; */
}

.ul-consent-legal__name-input--desktop {
  /* border: 1px solid #e6e6e6; */
}

.ul-consent-legal__name-input {
  /* background: rgba(0, 0, 0, 0.01); */
  /* box-sizing: border-box; */
  /* color: #343442; */
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
       'Segoe UI Emoji', 'Segoe UI Symbol'; */
  /* padding: 10px 20px 10px 15px; */
  /* border-radius: 3px; */
  /* font-size: 15px; */
  /* line-height: 20px; */
  /* margin-bottom: 7px; */
}

.ul-consent-legal__name-input::placeholder {
  /* color: rgba(108, 108, 110, 0.5); */
}

.ul-consent-legal__name-input:focus {
  /* outline: none; */
  /* background: white; */
}

.ul-consent-legal__name-input--desktop:hover:not(:focus) {
  /* background-color: rgba(0, 0, 0, 0.05); */
}

.ul-card__consent-legal .choice {
  /* font-size: 15px; */
  /* padding: 10px 15px 10px 15px; */
  /* background-color: rgba(0, 0, 0, 0.01); */
}

.ul-card__consent-legal .choice--desktop:hover {
  /* background-color: rgba(0, 0, 0, 0.05); */
}

.ul-card__consent-legal .choice--desktop:active,
.ul-card__consent-legal .choice--mobile:active {
  /* background-color: rgba(0, 0, 0, 0.05); */
}

/*
Thank You Card
Applies only to the thank you card
*/

.ul-card--thanks {
}

.ul-thanks-check {
  /* text-align: center; */
  /* margin-bottom: 20px; */
}

.ul-card--thanks-content {
  /* padding: 20px 0 10px 0; */
}

.ul-card--thanks .ul-question {
  /* padding-top: 0; */
  /* text-align: center; */
}

.ul-card--thanks .ul-caption {
  /* padding-top: 0; */
  /* text-align: center; */
}

🚧
Styling may be limited if using unsupported SDK CSS selectors
While you are able to customize your study layout with any SDK CSS selectors, we highly recommend sticking to the CSS classes listed above for the best support.
Please reach out to Customer Success if there are additional CSS selectors we should support.

Survey Look and Feel

Survey Customization

Logo

Survey Appearance

Desktop

Mobile

Study Style

In-Product Website Survey Customization

Adding Custom CSS to a Feedback study

👍
Survey CSS styling applies on per product basis

Supported CSS Classes

Survey Styles:

🚧
Styling may be limited if using unsupported SDK CSS selectors

Survey Customization

Logo

Survey Appearance

Desktop

Mobile

Study Style

In-Product Website Survey Customization

Adding Custom CSS to a Feedback study

👍Survey CSS styling applies on per product basis

Supported CSS Classes

Survey Styles:

🚧Styling may be limited if using unsupported SDK CSS selectors

👍
Survey CSS styling applies on per product basis

🚧
Styling may be limited if using unsupported SDK CSS selectors