If you’re using Consentise to manage cookie consent on your website, you can easily change the color of the cookie banner to better match your website’s design. This guide will show you how to do it.
Where to Update the Color
If you have already generated and added the Consentise script to your website, you can update the preferred color directly in the script tag found inside the <body> section of your HTML.
Here’s what your script might look like:
<script src="https://www.consentise.com/v1.2/consent-min.js"
data-cookiedomain="www.your-website.com"
data-privacy-policy-url="https://www.your-website.com/privacy-policy"
data-preferred-color="#4fa5d3"
data-banner-position="bottom"
data-default-language="en"
defer></script>
To change the preferred color, simply modify the data-preferred-color attribute. The value must be a HEX color code (e.g., #ff0000 for red, #000000 for black, #ffffff for white, etc.).
How to Choose the Right HEX Color
• Use your brand’s color palette: If you have a brand style guide, select a primary or secondary color that represents your brand.
• Use online color pickers: Tools like color-hex.com, coolors.co, or your browser’s developer tools can help you pick a HEX code.
• Contrast matters: Make sure the banner’s text remains readable against the background color you choose. Aim for good contrast between text and background for accessibility.
Example
To use a green banner instead of blue, update the HEX code like this:
data-preferred-color="#28a745"
Final Notes
• Always test your website after updating the color to make sure the banner displays correctly across devices.
• If you’re managing multiple languages or domains, ensure consistency in branding by applying the same preferred color across all banners.
Need help selecting the best color for your banner? Contact our support team or check out the Consentise Design Guide for inspiration.