Customizing Buttons and Star Colors on Your GetReviews Survey
In this post, we’ll guide you through the steps to personalize your GetReviews.ai survey buttons and other stylistic details with minimal coding. You can make your surveys stand out and align more with your branding.
How it Works
The GetReviews Survey Editor includes options like “Additional CSS” to accommodate nearly unlimited customizations.
This feature is supported on both the “Standard “and “Extended” layouts, which you can select at the top of your Survey Editor form.
To customize specific details of your survey, you will need to leverage CSS. Below are guides to common modifications that do not require prior coding experience.
How to Customize Button Colors
1. If you are creating a new survey, you will only be able to customize button colors on either Standard or Extended survey templates. The Minimal theme does not support customizations. To edit an existing survey, click the edit button for the survey you'd like to edit.
2. Next, scroll down to the Additional CSS text area.
3. By default, the color of the buttons will be a GetReviews - light blue shade.
To change the button colors, you will add the following lines of CSS to this section:
button {
background-color: rgb(61, 181, 255) !important;
}
button.text-black {
color: rgb(255, 255, 255) !important;
}
This is where your customization comes in. For the following line, replace the RGB values with the colors you would like the button color to be.
background-color: rgb(61, 181, 255) !important;
To get the RGB values, we recommend using websites like ColorHexa.
For example, let's change the button color to the following. We will replace the RGB values with the following:
background-color: rgb(141, 134, 164) !important;
The second part of the CSS is the color of the text. You'll notice that the RGB values of 255, 255, 255 is white color.
button.text-black {
color: rgb(255, 255, 255) !important;
}
That is why in a light purple background button, the text "Next" is in white. If you would like to change the color of the text, you can place your desired RGB values.
5. Once you make the necessary changes, click the "Save" button in the top right.
How to Customize the Color of Stars
1. If you are creating a new survey, you will only be able to customize button colors on either Standard or Extended survey templates. The Minimal theme does not support customizations. To edit an existing survey, click the edit button for the survey you'd like to edit.
2. Next, scroll down to the Additional CSS text area.
3. By default, the color of the stars will be a GetReviews - light blue shade.
To change the button colors, you will add the following lines of CSS to this section:
:root {
--star-colour: #F5DF23 !important;
--star-colour-hover: #F5DF23 !important;
}
This is where your customization comes in. Replace
#F5DF23with the hex code of the colors you would like the star colors to be. The hex code
#F5DF23is a yellow shade. To get the RGB values, we recommend using websites like ColorHexa.
4. Once you make the necessary changes, click the "Save" button in the top right. Your star colors should now look something like the following:
How to Customize the Color of Asterisks
1. If you are creating a new survey, you will only be able to customize button colors on either Standard or Extended survey templates. The Minimal theme does not support customizations. To edit an existing survey, click the edit button for the survey you'd like to edit.
2. Next, scroll down to the Additional CSS text area.
3. By default, the color of the asterisks will be a GetReviews - light blue shade.
To change the asterisk colors, you will add the following lines of CSS to this section:
.text-blue-400 {
color: rgb(0, 0, 0) !important;
}
This is where your customization comes in. For the following line, replace the RGB values with the colors you would like the button color to be.
color: rgb(0, 0, 0) !important;
To get the RGB values, we recommend using websites like ColorHexa.
We are using the RGB values of
(0, 0, 0)which is the color black.
4. Once you make the necessary changes, click the "Save" button in the top right. Your asterisk colors should now look something like the following:
Putting it All Together
If we were to combine all the CSS, it would look like this:
button {
background-color: rgb(141, 134, 164)!important;
}
:root {
--star-colour: #F5DF23 !important;
--star-colour-hover: #F5DF23 !important;
}
button.text-black {
color: rgb(255, 255, 255) !important;
}
.text-blue-400 {
color: rgb(0, 0, 0) !important;
}For more guides on how to customize your GetReviews surveys:
What is GetReviews.ai?
GetReviews.ai is a tool designed for e-commerce sellers on Amazon, Walmart, and more to increase post-purchase customer engagement platform through QR codes, and survey flows and help generate more authentic, compliant product reviews and build stronger relationships with their customers after every sale.
Book a demo today to learn more: