Add a GDPR cookie banner to your Lovable app

Set it up in 5 steps

1. 1Design your banner and copy your site keyCreate your banner in the PrivacyPill customizer and save it to your app's domain to get a site key.
2. 2Ask the Lovable agentPaste the prompt below into your Lovable chat, with your site key in the script URL. The agent finds the right file for your app's framework.
3. 3Review the changeThe tag should sit in index.html (Vite apps) or in the root route's head (TanStack Start apps) — never in a component or effect, which would load too late.
4. 4Gate your trackersAsk the agent to change non-Google trackers to type="text/plain" with data-pp-category="analytics" or "marketing". Google tags follow Consent Mode automatically.
5. 5Publish and testPublish your app, open the live URL in a private window and check the banner, reject and accept. Changes only reach your live site after publishing.

Add this exact tag as the first script in the shared document <head> on every page, before any analytics or advertising scripts:

<script src="https://privacy-pill-consent-studio.lovable.app/api/public/v1/pp.js?site=pp_your_site_key"></script>

Check which framework this project uses first. For a Vite app put it in index.html; for TanStack Start put it in the root route's head. Don't load it from useEffect or a page component, don't add async or defer, and don't add it twice. Then list any analytics, pixels or embeds in the app so I can gate them with data-pp-category.

• Shopify cookie bannertheme.liquid install + Customer Privacy API.
• Webflow cookie bannerPaste one line into Head code and publish.
• WordPress cookie bannerWPCode or functions.php, classic and block themes.
• Wix cookie bannerSettings → Custom Code → Head, all pages.
• Squarespace cookie bannerCode Injection → Header on Core plans and up.
• Framer cookie bannerProject Settings → Custom Code, start of head.
• Bolt cookie bannerOne prompt to the Bolt agent, then publish.
• v0 cookie bannernext/script in the root layout, publish to Vercel.
• Next.js cookie bannernext/script beforeInteractive in the root layout.
• Ghost cookie bannerSettings → Code Injection → Site header.
• HubSpot cookie bannerSite header HTML + setHubSpotConsent sync.