Guides
Sign InGet Started Free

Feedback Look and Feel

Apply custom Look & Feel styling to match your product or website branding!

Suggest Edits

Feedback Study Customization

Adding custom CSS allows you to tailor Feedback buttons and surveys to match your company branding. Common updates customers make include, but not limited to:

  • Customize Feedback tab styling
  • Precise Feedback button positioning
  • Change the font and font colors
  • Move location of the close button
  • Change the shape of the survey container

🚧

Feedback CSS Styling requires Web SDK v2.29.0+. Learn more here.

Adding Custom CSS to a Feedback study

  1. Head over to the Look & Feel section in Settings.
  2. Select Add Custom Styles to open the custom CSS modal
    1. At least one draft Feedback study first must exist for your product before you are able to modify Feedback styling
  3. Select a study from dropdown for which to apply custom CSS styling
  4. Select Update Preview to observe how your applied styles impact that particular survey
  5. 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.

👍

Feedback styling applies on per study basis

If you wish to create a new Feedback study and apply previously used CSS styling to the study, you must copy, paste and apply the styling to the new study under Look & Feel

Supported CSS Classes

Button Styles

#sprig-feedback-button {
}
.sprig-feedback-button-label {
}
.sprig-feedback-button-right {
}
.sprig-feedback-button-bottom {
}
.sprig-feedback-button-light {
}
.sprig-feedback-button-dark {
}

#sprig-feedback-container {
}

.sprig-feedback-container-left {
}
.sprig-feedback-container-center {
}
.sprig-feedback-container-bottom {
}

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

Updated 6 months ago