Cookie consent banner generator
Design a cookie banner on a live preview, then copy a tiny snippet with no dependency. It saves each visitor’s choice and only loads your analytics after they agree.
Ship your app this week
A sample page, so you can see how the banner sits on a real site.
Get startedMore options
See the code
Paste this once, just before </body>, on every page.
How to hold back your analytics until people agree
Change your analytics tags to type="text/plain" with a data-cookie-category. They only run after the visitor allows that category.
More free tools
How it works
- Pick a style: a bar across the page, a small box in the corner, or a pop-up in the middle. The preview at the top shows it live on a sample page.
- Choose your colors, your text and which kinds of cookies you ask about: analytics, marketing, or both. Try the buttons on the preview to see what your visitors will see.
- Click “Copy code” and paste it just before
</body>, or click “Copy prompt for your AI agent” and let Claude Code, Codex or Cursor add it for you, including the change that holds back your analytics until people agree.
Questions
Do I need a cookie banner?
If people in the EU or UK visit your site and you use cookies that are not strictly needed, like Google Analytics, Meta Pixel or ad trackers, you need to ask first. If you only use cookieless analytics such as Cloudflare Web Analytics, Plausible or Fathom, and no other tracking, you may not need a banner at all. This is not legal advice.
How does it hold back my analytics?
Change your analytics tags from <script> to <script type="text/plain" data-cookie-category="analytics">. The browser ignores them until the visitor clicks Accept, and then the banner’s script turns them back into real scripts. Open “How to hold back your analytics” for a copy-paste example.
Where is the choice saved?
In the visitor’s browser, in localStorage under cookie-consent. It’s not a cookie itself, and nothing is sent to us or anyone else. On the next visit the banner stays hidden and the allowed scripts load straight away.
How do visitors change their mind?
Add a link with data-cookie-settings, for example <a href="#" data-cookie-settings>Cookie settings</a> in your footer. Clicking it opens the banner again with their choices filled in.
Does it work with React, Next.js or other frameworks?
Yes, but frameworks like React don’t run a <script> tag pasted into a component. Use “Copy prompt for your AI agent”: the prompt tells your agent to move the script into its own file for your framework.
Can my code react to the choice?
Yes. The banner fires a cookieconsent event on document with the choice in event.detail, for example { analytics: true, marketing: false }.
Is anything uploaded?
No. Everything runs in your browser, and the code you copy has no outside dependency.