> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sprig.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Feedback Look and Feel

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

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

> **Warning:** Feedback CSS Styling requires Web SDK v2.29.0+. Learn more [here](/docs/developer-center/sprig-sdk/sdk-traffic).

### Adding Custom CSS to a Feedback study

1. Head over to the [Look & Feel](https://app.sprig.com/settings/feedback-look-and-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](https://app.sprig.com/settings/feedback-look-and-feel)

### Supported CSS Classes

#### Button Styles

```css theme={null}
#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

```css theme={null}
/*
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; */
}
```

> **Warning:** 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](mailto:success@sprig.com) if there are additional CSS selectors we should support.