How to Add a Cookie Banner to a Lovable Site (GDPR)

Lovable is one of the quickest ways to get a working website. Describe it, and a few minutes later you have a published app on a lovable.app address. Ask it to add Google Analytics and it will do that too.

What it will not do is ask the visitor first. We tested it: the analytics tag runs on page load for everyone, with no banner and no way to say no. In the EU, the UK and Norway that is the wrong order. This guide shows what Lovable generates, how to fix it with one prompt, and how to check the result.

What Lovable does when you ask for Google Analytics

New Lovable projects are built on TanStack Start, a React framework that renders pages on the server. There is no plain index.html to paste a tag into. When we asked a fresh project to "add Google Analytics with measurement ID G-TEST123456", Lovable stored the ID in an environment variable, read it through a server function, and injected the gtag script in the browser on every page.

It is tidy code. It is also exactly what the consent rules say not to do: the tag loads and sets the _ga cookie before the visitor has agreed. The same goes for the Meta Pixel, Hotjar and any other tracking tool you ask it to add.

The project we tested also loaded its fonts from fonts.googleapis.com. That sets no cookies, but it sends every visitor's IP address to Google, which a German court has treated as a GDPR breach. More on that below.

Step 1: Add your Lovable site to Consentify

Publish your Lovable project first, so you have its address. Then create a free Consentify account and add that address as a domain, for example yourproject.lovable.app. The script only loads on the domain it was created for, so if you later connect your own domain in Lovable, add that one in Consentify as well.

Step 2: Paste this prompt into Lovable

When you add the domain, choose AI builder (Lovable, Bolt, v0) in the install step. The dashboard gives you this prompt with your own script tag already filled in. You can also copy it from here and replace YOUR_TOKEN:

Add the Consentify cookie consent script to this site. Put this exact script tag as the very first element inside <head>, so it is rendered on every page before any other script. Use the root HTML template or root layout (for example index.html, app/layout.tsx or the root route), and keep it as a plain script tag with the async attribute:

<script async src="https://www.consentify.app/api/gateway?token=YOUR_TOKEN"></script>

Then remove all Google Analytics, Google Tag Manager, Meta Pixel, Hotjar, LinkedIn, TikTok and other tracking or advertising code from the project, including environment variables and server functions that only exist for them. Consentify will load those tools after the visitor has agreed.

Finally, add a button with id="revoke-consent-btn" and the text "Cookie settings" to the footer, so visitors can change their choice later.

Removing the tracking code matters as much as adding the script. A gtag that Lovable put there earlier keeps firing before consent, banner or not.

In our test Lovable followed the prompt exactly. It deleted the server function, the gtag code and the environment variable, and put the script first in the document head of the root route, src/routes/__root.tsx:

function RootShell({ children }) {
  return (
    <html lang="en">
      <head>
        <script
          async
          src="https://www.consentify.app/api/gateway?token=YOUR_TOKEN"
        ></script>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

Then publish the project again.

Step 3: Add your tracking IDs in Consentify

Google Analytics is gone from the code, so add it back the right way. In the Consentify dashboard, open Integrations and paste your measurement ID. Do the same for the Meta Pixel or anything else the prompt removed. Consentify now loads each tool only after the visitor has accepted that category, and Google Consent Mode v2 signals are sent for you.

Step 4: Fix the Google Fonts

This one is not about consent, so a banner does not solve it. The fix is to serve the fonts from your own site. Paste this into Lovable:

Replace the Google Fonts stylesheet links with self-hosted fonts. Install the matching @fontsource packages for every font the site uses, import them in the app, and remove all links and preconnects to fonts.googleapis.com and fonts.gstatic.com.

Our Google Fonts page explains why this matters.

Step 5: Check that it works

Open your published site in a private window. The banner should appear, and nothing should be tracking yet. To be sure, run the address through the free GDPR scan. It loads the page as a new visitor who has not clicked anything and lists every tracker, cookie and third-party request that starts anyway. On a correctly set up Lovable site, Google Analytics does not run at all before consent, and Google Fonts no longer shows up.

Do not forget the privacy policy

Lovable will often add a footer link to a privacy policy. Check what is behind it. You need a cookie declaration that lists what the site really sets, and Consentify can show one that updates itself as you add integrations. The rest of the privacy policy is about your business, and you have to write that part yourself. Our checklist of 7 things AI forgets when it builds your website covers the other gaps worth closing before launch.