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
| Variable | Replace 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.