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 (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); 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 |
| Astro | Base layout <head>, with is:inline | Install on Astro |
| React (Vite, CRA, React Router) | index.html, top of the <head>, plus SPA mode | Install on 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:
<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.
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).
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.
Verify the installation
- Open the production domain in a private window: the banner appears.
- In the Network tab, no third-party request goes out before Accept.
- Run the setup wizard (Builder → Integration): loader present with the right license code, Consent Mode stub present and placed before every Google tag.
- Finish with a refusal scan from the Compliance tab (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 and FlowConsent for AI agents.
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.