Add a GDPR cookie banner to your v0 app
v0 builds Next.js apps and publishes them to Vercel. In Next.js the consent script has to load before hydration and before your analytics, which means next/script with the beforeInteractive strategy in the root layout. One prompt gets you there.
Updated 28 October 2026
Set it up in 5 steps
- 1Design your banner and copy your site keyCreate your banner in the PrivacyPill customizer and save it to your app's domain — the vercel.app address or your custom domain — to get a site key.
- 2Ask v0Paste the prompt below into your v0 chat, with your site key in the script URL. v0 edits app/layout.tsx for you.
- 3Review the changeOpen the Code tab and check app/layout.tsx: the Script tag should use strategy="beforeInteractive" and sit in the root layout, not in a page or client component.
- 4Gate your trackersVercel Web Analytics is cookieless; other trackers should become type="text/plain" with data-pp-category="analytics" or "marketing". Google tags follow Consent Mode automatically.
- 5Publish and testSelect Publish in the chat header (Publish Changes for later updates). Open the production URL in a private window and try reject and accept.
In the root layout (app/layout.tsx), add this script with next/script and strategy="beforeInteractive", so it loads 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" strategy="beforeInteractive" />
Don't load it from a client component or useEffect, don't add it to individual pages and don't add it twice. Move any Google tags so they load after it, then list other analytics, pixels or embeds in the app so I can gate them with data-pp-category.Replace pp_your_site_key with your site key — you'll get it when you save your banner.
Preview deployments need their own site
v0 builds preview deployments with unique URLs. Your site key works on the domain you saved and its subdomains, so add your production domain as a site — and a preview domain separately if you want to test there.
Agents can set it up end to end
PrivacyPill has a REST API and a remote MCP server, so a coding agent can create your site, configure the banner, fetch the embed snippet and run a compliance scan. See the developer docs for the MCP URL and API reference.
Frequently asked questions
Set up PrivacyPill on other platforms
See all- 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.
- Lovable cookie bannerOne prompt to the Lovable agent, or one tag.
- Bolt cookie bannerOne prompt to the Bolt agent, then publish.
- Next.js cookie bannernext/script beforeInteractive in the root layout.
- Ghost cookie bannerSettings → Code Injection → Site header.
- HubSpot cookie bannerSite header HTML + setHubSpotConsent sync.
Try it on your own site
Design your banner, preview it live, and paste one line. Free for one domain.