Cookie Consent Banner Generator
Design a cookie banner for your site: write the message, pick the position and colors, add Accept, Reject and Customize buttons, and copy one self-contained snippet with no external library. It remembers each visitor's choice and only runs the scripts they agree to.
Last updated:
How to use the Cookie Consent Banner Generator
- Write the banner text and link to your privacy or cookie policy.
- Choose the buttons and categories you need: Reject all and Customize are recommended for GDPR.
- Pick a position and colors, and check the live preview and contrast badges.
- Set how the choice is stored (cookie or localStorage, number of days) and whether to send Google Consent Mode signals.
- Copy the code, paste it before </body>, and change non-essential scripts to type="text/plain" with a data-consent category so they wait for consent.
Cookie categories explained
| Category | Typical examples | Consent needed (EU/UK)? | data-consent value |
|---|---|---|---|
| Necessary | Session and login cookies, shopping cart, load balancing, security, the consent cookie itself | No, but list them in your cookie policy | (not blocked) |
| Preferences | Language, region, dark mode, recently viewed items | Yes, unless strictly needed for a feature the user asked for | preferences |
| Analytics | Google Analytics, Matomo with cookies, Hotjar, Microsoft Clarity | Yes in most EU countries (some allow strictly anonymous, first-party measurement) | analytics |
| Marketing | Google Ads, Meta Pixel, TikTok Pixel, LinkedIn Insight, ad network and retargeting cookies | Yes | marketing |
Blocking a script until consent
Change the script's type to text/plain and add the category. The browser ignores it until the banner swaps it for a real script after consent:
| Before | After |
|---|---|
<script src="https://example-analytics.com/a.js"></script> | <script type="text/plain" data-consent="analytics" src="https://example-analytics.com/a.js"></script> |
<script>fbq('init', '123');</script> | <script type="text/plain" data-consent="marketing">fbq('init', '123');</script> |
With Google tags you can instead keep the tag loading and use Consent Mode: the default block sets every signal to denied, and Google's tags then avoid setting analytics and ad cookies until the banner sends granted.
A compliant banner in practice
- No pre-ticked boxes. Optional categories start unchecked; consent must be an active choice.
- Equal choices. Accept and Reject on the first layer, same size, neither hidden.
- Nothing before consent. Test with the browser's developer tools (Application > Cookies): after a fresh load, only necessary cookies should exist.
- Easy to change. A permanent Cookie settings link that calls
CookieConsent.open(). - Explained. Link to a policy listing each cookie, its purpose and duration; the Privacy Policy Generator includes a cookie section.
Frequently asked questions
Do I need a cookie consent banner?
If visitors from the EU, EEA or UK use your site and you set non-essential cookies, such as analytics or advertising cookies, the ePrivacy rules and GDPR require prior, informed consent. In the US there is no general cookie consent law, but state privacy laws such as the CCPA require an opt-out of selling or sharing data for targeted ads, which a banner with a Reject button can provide.
Does this banner block cookies before consent?
It blocks the scripts you mark. Change a tracking script from <script> to <script type="text/plain" data-consent="analytics"> (or marketing, preferences) and the banner only runs it after the visitor agrees to that category. Scripts you do not mark run as usual, so mark every non-essential one.
What is Google Consent Mode v2?
Consent Mode is Google's API that tells Google tags whether a visitor consented to analytics and ad cookies, using four signals: analytics_storage, ad_storage, ad_user_data and ad_personalization. Since March 2024 Google requires it for advertisers using personalized ads with visitors in the EEA. With the option on, the code sets all signals to denied by default and updates them when the visitor chooses.
Where is the visitor's choice stored?
In a first-party cookie (or localStorage if you choose) on the visitor's own browser, as a small JSON value with the date and each category's yes/no. Nothing is sent to FreeToolCabin or any other server. The banner shows again when the stored choice expires after the number of days you set.
How long should consent be remembered?
There is no single legal limit, but many EU regulators consider asking again after about 6 to 13 months reasonable; the French regulator CNIL recommends 6 months. The default here is 180 days. If you add new cookie categories, change "version": 1 to 2 in the code so everyone is asked again.
Why should Reject be as visible as Accept?
European regulators and courts say refusing cookies must be as easy as accepting them. A banner with only an Accept button, or a Reject option hidden in a second layer, has been fined in several countries. The generator shows a warning when the Reject button is turned off.
How do visitors change their cookie choice later?
Add a Cookie settings link in your footer that calls CookieConsent.open(). It reopens the banner with the visitor's current choices, so they can withdraw consent as easily as they gave it, as GDPR requires.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.