# Install FlowConsent on Fimo

On Fimo, your site is your own code: put the FlowConsent snippet at the top of the root layout's <head>, or ask the Fimo Studio chat to do it, then publish.

> Canonical: https://www.flowconsent.com/en/doc/install-fimo
> Last updated: 2026-10-01
On Fimo (fimo.ai), there is no "custom code" field to fill in: your site is real code, in a repository you control. The FlowConsent snippet therefore goes **at the very top of the root layout's `<head>`**, either by asking the **Fimo Studio chat** or with your coding agent, and then you **publish**. The main pitfall: Fimo sites run on frameworks that change pages without a full reload, so you need to turn on the banner's **SPA Mode**.

## Before you start

- An account on [app.flowconsent.com](https://app.flowconsent.com) (free Free plan, no credit card, 25,000 sessions per month) and a banner that is created and deployed. On the Free plan, deployment runs through your own Cloudflare account ([guide](/en/doc/cloudflare-deployment)); on Pro and Enterprise it is one click.
- A Fimo project you can edit and publish. Fimo creates sites with Next.js (the default), React Router, Vite + React, Astro or SvelteKit, and can host other applications.

## Step 1: Copy the snippet

In FlowConsent, open **Builder → Deployment → Integration**, **HTML / No-code** tab (or **Next.js** if your Fimo site uses Next.js). The snippet has two parts, and their order matters:

```html title="Top of the root layout's <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>
```

The first block sets the Consent Mode v2 defaults (everything `denied`), the second loads the banner. Both must come before any tracking script.

## Step 2: Add it to the root layout

Fimo's documentation does not describe a custom code menu in Studio: the `<head>` lives in your site's code. There are two ways to do it.

**With the Fimo Studio chat (the simplest).** Open your project's chat and describe the outcome you want, pasting the snippet:

> Add this snippet at the very top of the root layout's `<head>`, before any other script, on every page, without modifying the code: [FlowConsent snippet]

The chat prepares the change and leaves it for review: use **View changes** to check that the snippet is the first element of the `<head>`, and **Open preview** to see it in a preview.

**With your coding agent or by hand.** The file depends on the framework:

| Framework | Where to put the snippet |
| - | - |
| Next.js | The root layout (`app/layout.tsx`), see the [Next.js guide](/en/doc/nextjs-integration) |
| Astro | The layout that renders the `<head>` (`src/layouts/Base.astro` in new Fimo projects), with `is:inline` on both `<script>` tags so Astro does not bundle them |
| SvelteKit | `src/app.html`, at the top of the `<head>`, before `%sveltekit.head%` |
| Vite + React | `index.html` at the project root |
| React Router | The component that renders the `<head>` in `app/root.tsx` |

Then `fimo deploy` updates the current Branch's Preview, without publishing anything.

## Step 3: Publish

Saved changes do not update the public site. Once the change is merged into the production Branch (`main` by default), select **Publish** at the top right of the project header, then **Publish** in the panel. From the terminal: `fimo checkout main`, then `fimo deploy --publish`.

## Fimo-specific pitfalls

> [!WARNING]
> Next.js, React Router, Vite + React and SvelteKit change pages in the browser, without reloading the `<head>`. Turn on **SPA Mode** in the banner settings so FlowConsent rechecks consent on every navigation. The same applies to Astro if you use View Transitions.

- **Preview and production are separate.** Preview is for review among project members, it is not your public site. Run your final checks on the published address.
- **Other trackers come after.** If the code loads Google Analytics, the Meta Pixel or Google Tag Manager, they must come after the snippet. The safest option: remove them from the code and declare them in **Builder → Services**, so the banner only loads them after consent.
- **Security headers.** Fimo lets you set HTTP headers in `.fimo/config.json`. If you add a Content Security Policy there, allow your FlowConsent banner's domain, or the browser will block it.

## Verify the installation

1. Open your published site in a **private window**: the banner should appear.
2. In the **Network** tab of the developer tools, no third-party request should leave before you click "Accept".
3. Run the **installation assistant** (**Builder → Integration**): it checks the live page (loader present with your license code, Consent Mode stub present, stub placed BEFORE every Google tag). See [the setup wizard](/en/doc/setup-wizard).
4. Finish with a **refusal scan** from the **Compliance** tab: a real browser refuses consent and confirms that nothing fires. See [compliance verification](/en/doc/compliance-verification).

## Do it from your AI agent (MCP)

FlowConsent has an official MCP server, `https://mcp.flowconsent.com`, that works from Claude, ChatGPT or any MCP client. You connect with OAuth 2.0 using your FlowConsent account, no API key needed. Your agent can fetch the snippet and placement instructions (`get_banner_snippet` and `get_setup_instructions` tools), verify the installation with a real scan (`verify_consent_compliance`) and set up recurring monitoring (`monitor_compliance`).

Example request:

> Give me my banner snippet for my Fimo site and check that it is installed correctly on https://mysite.com

The FlowConsent MCP server does not edit your site: it provides the snippet, the instructions and the verification. You, your coding agent or the Fimo chat add the snippet to the layout. See [the MCP server](/en/doc/mcp-server) and [the MCP page](/en/mcp).

## Frequently asked questions

### Does Fimo have a field for pasting code into the `<head>`?

Fimo's documentation does not describe one: Studio settings cover things like SEO and domains, while the `<head>` is part of your site's code. You add the snippet to the root layout, through the Studio chat or your coding agent.

### Should I load FlowConsent through Google Tag Manager?

No. FlowConsent does not load through GTM, because a banner loaded from GTM arrives too late for prior blocking. The snippet goes at the top of the `<head>`, above the GTM container. See [Google Consent Mode](/en/doc/google-consent-mode).

### Can a Fimo agent remove the snippet by mistake?

Fimo agents work in Branches and present their changes for review before merge. Read the diffs that touch the root layout, and let FlowConsent monitoring (`monitor_compliance`) flag any regression.