# Install FlowConsent on Vercel

Install FlowConsent on a Vercel-hosted site: the snippet goes in the <head> of the framework you deploy (Next.js, Astro, React, HTML), then you redeploy.

> Canonical: https://www.flowconsent.com/en/doc/install-vercel
> Last updated: 2026-10-01
Vercel is a host: the FlowConsent snippet is not pasted into the Vercel dashboard but into the `<head>` of the framework you deploy (Next.js, Astro, React, static site), and then you redeploy. Installation therefore follows your framework's guide, in two steps. The two Vercel-specific points are its own measurement tools (Vercel Web Analytics and Speed Insights) and preview domains, which are not the place to verify the installation.

## Before you start

- An account on [app.flowconsent.com](https://app.flowconsent.com) (free Free plan, no credit card, up to 25,000 sessions per month).
- A banner created and deployed. On the Free plan, deployment goes through your own Cloudflare account ([Cloudflare guide](/en/doc/cloudflare-deployment)); on Pro and Enterprise it takes one click.
- The project's Git repository connected to Vercel, or the Vercel CLI.

## Step 1: Paste the snippet into your framework

Copy the snippet from **Builder → Deployment → Integration** (HTML / No-code, Webflow and Next.js tabs), then follow your framework's guide:

| Deployed framework | Where the snippet goes | Guide |
| --- | --- | --- |
| Next.js | `app/layout.tsx` or `pages/_document.tsx`, plus SPA mode | [Next.js and React SPA](/en/doc/nextjs-integration) |
| Astro | Base layout `<head>`, with `is:inline` | [Install on Astro](/en/doc/install-astro) |
| React (Vite, CRA, React Router) | `index.html`, top of the `<head>`, plus SPA mode | [Install on React](/en/doc/install-react) |
| Static site (HTML) | Top of the `<head>` on every page | Below |

For a static HTML site, the snippet goes right after the opening `<head>` tag, before any other script:

```html title="index.html (and every HTML page)"
<head>
<script>
// FlowConsent Loader - place BEFORE any other script in the <head>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{
  'ad_storage':'denied',
  'analytics_storage':'denied',
  'ad_user_data':'denied',
  'ad_personalization':'denied',
  'wait_for_update':500
});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);
</script>
<!-- FlowConsent CMP -->
<script src="https://YOUR-LICENSE-CODE.consent.flowconsent.com/cookie-manager.js?code=YOUR_LICENSE_CODE"></script>
<!-- your other tags come after -->
</head>
```

## Step 2: Redeploy

Push the change to your production branch (or run `vercel --prod`). Vercel rebuilds the site and the snippet goes live on your production domain. If your app uses client-side navigation (Next.js, React, Astro with `<ClientRouter />`), check that **SPA mode** is on in the Builder's **Settings** tab.

## Vercel Web Analytics and Speed Insights

Both Vercel products are enabled in the project dashboard and added to your code with the `@vercel/analytics` (`<Analytics />` component) and `@vercel/speed-insights` packages. According to Vercel's official documentation:

- **Web Analytics** records, for each page view, the URL, referrer, filtered query parameters, geolocation (country, region, city), OS, browser and device type. Vercel states it uses no third-party cookies: visitors are identified by a hash created from the incoming request, and the session is discarded after 24 hours. Page views are also tracked on client-side navigations.
- **Speed Insights** collects Core Web Vitals on each page load, with the route, network type, browser, device and country. Vercel describes this data as anonymous and not allowing a browsing session to be reconstructed or a user identified.

> [!NOTE]
> Vercel's documentation presents these tools as privacy-friendly, but it **does not say** they are exempt from consent. That assessment depends on your setup and on your data protection authority's guidance: have your DPO confirm it. If you decide to put them behind consent, render the `<Analytics />` component only after analytics consent, by listening for the `flowconsent:consent` event (example in the [Next.js guide](/en/doc/nextjs-integration)). The `beforeSend` option of `@vercel/analytics` can also drop an event by returning `null`.

Third-party trackers (Google Analytics, Meta Pixel…) are declared in **Builder → Services**, never hard-coded in the layout. With Google Tag Manager, the snippet goes **above** the GTM container ([Google Consent Mode guide](/en/doc/google-consent-mode)).

## Preview domains

Every branch and pull request gets a preview deployment on a generated `*.vercel.app` URL. Two behaviors documented by Vercel skew your tests:

- **Deployment Protection**: when enabled with **Standard Protection**, every deployment except production domains requires authentication. An external scan, such as the FlowConsent refusal scan, cannot reach it.
- **Vercel Toolbar**: it is enabled by default on all preview deployments, and not in production. What you see on a preview is therefore not exactly what your visitors see.

> [!TIP]
> Test the banner on previews if you like, but keep the setup wizard and the refusal scan for your **production domain**.

## Verify the installation

1. Open the production domain in a private window: the banner appears.
2. In the **Network** tab, no third-party request goes out before **Accept**.
3. Run the [setup wizard](/en/doc/setup-wizard) (Builder → Integration): loader present with the right license code, Consent Mode stub present and placed before every Google tag.
4. Finish with a refusal scan from the **Compliance** tab ([compliance verification](/en/doc/compliance-verification)).

## Do it from your AI agent (MCP)

FlowConsent has an official MCP server, `https://mcp.flowconsent.com`, usable from Claude, ChatGPT or any MCP client, with an OAuth 2.0 connection to your FlowConsent account (no API key). The agent fetches the snippet and placement instructions for your framework (`get_banner_snippet`, `get_setup_instructions`), verifies the installation with a real scan (`verify_consent_compliance`) and can set up recurring monitoring (`monitor_compliance`). It does not change your Vercel project for you.

> Give me my banner's snippet for my Next.js site hosted on Vercel and check that it is installed correctly on https://mysite.com

Learn more: [MCP server](/en/doc/mcp-server) and [FlowConsent for AI agents](/en/mcp).

## Frequently asked questions

### Can I add the snippet from the Vercel dashboard?

No. Vercel deploys the code in your repository: the snippet goes into your framework's files, and a new deployment puts it live.

### The banner does not show on my preview URL. Is that a problem?

First check that the deployment includes the change. Then test on the production domain, which is the one your visitors see and the one the setup wizard checks.

### Is Vercel Web Analytics exempt from consent?

Vercel does not claim so. Its documentation describes anonymized measurement without third-party cookies, but the decision is yours: when in doubt, load it only after consent.

### Do I need SPA mode on Vercel?

That depends on the framework, not on Vercel: yes for Next.js, React and Astro with `<ClientRouter />`, no for a static multi-page site.