Lovablefeaturebeginner

Add Cookie Consent Banner to Lovable App

Add a GDPR-compliant cookie consent banner with category preferences and localStorage persistence.

What you'll get

A GDPR-compliant cookie consent banner with preference management, localStorage persistence, and conditional script loading.

The Prompt

Add a GDPR-compliant cookie consent banner to my Lovable app.

REQUIREMENTS:
1. Show a cookie consent banner at the bottom of the page on first visit. Banner includes: brief message about cookie usage, "Accept All" button, "Reject All" button, and "Manage Preferences" link.
2. Clicking "Manage Preferences" opens a modal with cookie categories: Necessary (always on, disabled toggle), Analytics, Marketing, and Functional. Each with a description and toggle switch.
3. Save consent state to localStorage with keys: cookie_consent_given (boolean), cookie_preferences (object with category booleans), and consent_date.
4. Only load analytics scripts (e.g., Google Analytics) after the user consents to that category.
5. Add a "Cookie Settings" link in the footer that reopens the preferences modal.
6. The banner does not appear again after the user makes a choice. Re-show after 365 days or if preferences are cleared.
7. Style the banner to match the app's design system.

DATABASE:
- No database needed. All stored in localStorage.

SECURITY:
- Block all non-essential cookies until consent is given.
- Respect "Do Not Track" browser header as an additional signal.

Replace these variables

VariableReplace with
[COOKIE_CATEGORIES]Cookie categories beyond Necessary (e.g., Analytics, Marketing)

Tips for best results

Keep the banner text short and friendly — long legal text scares users into rejecting.

Test that analytics scripts truly don't load until consent is given — check the Network tab.

Follow-up prompts

Add privacy policy page

Add a Privacy Policy page with sections for data collection, cookie usage, third-party services, user rights, and contact information.

Related prompts