# FlowConsent auf Framer installieren

Auf Framer fügen Sie den FlowConsent-Code unter Project Settings → Custom Code am Anfang des <head> ein, veröffentlichen und entfernen das Framer-Banner.

> Canonical: https://www.flowconsent.com/de/doc/install-framer
> Last updated: 2026-10-01
Auf Framer gehört der FlowConsent-Code unter **Project Settings → Custom Code → Add Script**, platziert am **Anfang des `<head>`**, danach **veröffentlichen** Sie die Website. Die Installation umfasst drei Schritte. Die wichtigste Falle: Die **Cookie Banner**-Komponente von Framer ist ein eigenes Consent-Banner, das an den Google Tag Manager angebunden ist. Haben Sie sie eingefügt, entfernen Sie sie, damit Besucher nicht zwei Banner sehen.

## Bevor Sie beginnen

- Ein Konto auf [app.flowconsent.com](https://app.flowconsent.com) (kostenloser Free-Plan, ohne Kreditkarte, 25.000 Sessions pro Monat) und ein erstelltes und bereitgestelltes Banner. Im Free-Plan erfolgt die Bereitstellung über Ihr eigenes Cloudflare-Konto ([Anleitung](/de/doc/cloudflare-deployment)), bei Pro und Enterprise mit einem Klick.
- Ein Framer-Projekt, das Sie bearbeiten und veröffentlichen dürfen. Ein DSGVO-Banner läuft in der Praxis auf Ihrer eigenen Domain, und Framer behält eigene Domains den kostenpflichtigen Site-Plänen vor. Fordert der Editor beim Hinzufügen des Scripts ein Upgrade, enthält Ihr aktueller Plan die Funktion nicht.

## Schritt 1: Den Code kopieren

Öffnen Sie in FlowConsent **Builder → Deployment → Integration**, Tab **HTML / No-code**. Der Code besteht aus zwei Teilen, und ihre Reihenfolge zählt:

```html title="Project Settings → Custom Code → Anfang des <head>"
<script>
// FlowConsent Loader - VOR jedem anderen Script im <head> platzieren
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://IHR-LIZENZCODE.consent.flowconsent.com/cookie-manager.js?code=IHR_LIZENZCODE"></script>
```

Der erste Block setzt die Standardwerte für Consent Mode v2 (alles `denied`), der zweite lädt das Banner. Fügen Sie beide zusammen in ein einziges Framer-Script ein.

## Schritt 2: Unter Project Settings → Custom Code einfügen

Die Oberfläche von Framer ist englisch. In Ihrem Projekt:

1. Öffnen Sie **Project Settings** (in manchen Versionen des Editors **Site Settings**).
2. Wählen Sie in der linken Seitenleiste den Tab **Custom Code**.
3. Klicken Sie auf **Add Script**, wenn noch kein Code existiert, sonst auf das Symbol **+**.
4. Geben Sie dem Script einen klaren Namen, etwa `FlowConsent`, und fügen Sie den Code ein.
5. Wählen Sie als Position den **Anfang des `<head>`-Tags** (start of `<head>`), damit der Code vor jedem anderen Script läuft.
6. Lassen Sie das Script auf allen Seiten aktiv, ohne die Seitenliste einzuschränken.
7. Wählen Sie bei der Ausführungshäufigkeit **Once**: Die Seite lädt den Code einmal, und das Banner folgt danach selbst den Seitenwechseln (siehe Schritt 3).

## Schritt 3: Veröffentlichen, SPA-Modus aktivieren, Framer-Banner entfernen

Custom Code läuft nicht in der Canvas-Vorschau: Klicken Sie auf **Publish**, um den Code live zu schalten, und testen Sie auf der veröffentlichten Website.

Eine Framer-Website wechselt die Seiten im Browser, ohne vollständiges Neuladen. Aktivieren Sie daher den **SPA-Modus** in den Banner-Einstellungen: FlowConsent prüft die Einwilligung dann bei jeder Navigation erneut. Das Prinzip erklärt die [Anleitung für Next.js und SPAs](/de/doc/nextjs-integration).

> [!WARNING]
> Framer bietet eine eigene **Cookie Banner**-Komponente, die die Wahl der Besucher über eine Container-ID an den Google Tag Manager sendet. Nutzen Sie sie nicht parallel zu FlowConsent: Zwei Banner bedeuten zwei widersprüchliche Entscheidungen und eine Einwilligung, die Sie nicht nachweisen können. Löschen Sie die Komponente aus Ihrem Projekt (sie steckt oft in einer gemeinsamen Komponente wie der Navigation) und veröffentlichen Sie erneut.

Haben Sie Google Tag Manager, Google Analytics oder das Meta Pixel über weitere **Custom Code**-Scripts geladen, darf keines davon vor FlowConsent laufen. Am sichersten: Entfernen Sie diese Scripts und deklarieren Sie die Dienste unter **Builder → Services**, damit das Banner sie erst nach Einwilligung lädt. Den GTM-Container können Sie im Custom Code behalten, aber am **Ende des `<head>`** (end of `<head>`), also nach dem FlowConsent-Code. Die integrierte Statistik von Framer (Framer Analytics) verwendet laut Framer keine Cookies und läuft daher nicht über das Banner.

## Installation prüfen

1. Öffnen Sie die veröffentlichte Website in einem **privaten Fenster**: Das Banner muss erscheinen.
2. Im Tab **Netzwerk** der Entwicklertools darf vor dem Klick auf „Akzeptieren“ keine Drittanbieter-Anfrage (Google, Meta, LinkedIn usw.) rausgehen.
3. Starten Sie den **Installationsassistenten** (**Builder → Integration**): Er prüft die Live-Seite (Loader mit Ihrem Lizenzcode vorhanden, Consent-Mode-Stub vorhanden, Stub VOR jedem Google-Tag). Siehe [Installationsassistent](/de/doc/setup-wizard).
4. Schließen Sie mit einem **Ablehnungs-Scan** im Tab **Compliance** ab: Ein echter Browser lehnt die Einwilligung ab und bestätigt, dass nichts feuert. Siehe [Konformitätsprüfung](/de/doc/compliance-verification).

## Mit Ihrem KI-Agenten erledigen (MCP)

FlowConsent bietet einen offiziellen MCP-Server, `https://mcp.flowconsent.com`, nutzbar aus Claude, ChatGPT oder jedem MCP-Client. Die Verbindung läuft über OAuth 2.0 mit Ihrem FlowConsent-Konto, ohne API-Schlüssel. Ihr Agent kann den Code und die Platzierungshinweise abrufen (Tools `get_banner_snippet` und `get_setup_instructions`), die Installation mit einem echten Scan prüfen (`verify_consent_compliance`) und eine wiederkehrende Überwachung einrichten (`monitor_compliance`).

Beispielanfrage:

> Gib mir den Banner-Code für meine Framer-Website und prüfe, ob er auf https://meinewebsite.de korrekt installiert ist

Der Agent ändert Ihr Framer-Projekt nicht selbst: Er liefert den Code, die Anleitung und die Prüfung. Siehe [MCP-Server](/de/doc/mcp-server) und [MCP-Seite](/de/mcp).

## Häufige Fragen

### Warum erscheint das Banner nicht in der Framer-Vorschau?

Framer lädt Custom Code nicht in der Canvas-Vorschau. Veröffentlichen Sie die Website und öffnen Sie die Live-Adresse, am besten in einem privaten Fenster.

### Brauche ich ein Banner, wenn ich nur Framer Analytics nutze?

Laut Framer setzt die integrierte Statistik keine Cookies und benötigt keine Einwilligung. Sobald Sie einen Drittanbieter-Dienst einbinden (Google Analytics, HubSpot, YouTube-Videos usw.), brauchen Sie ein Banner.

### Kann ich FlowConsent nur auf einer einzelnen Seite einbinden?

Framer erlaubt das, empfehlenswert ist es nicht: Das Banner muss auf jeder Seite vorhanden sein, um Scripts vor der Einwilligung zu blockieren und Besuchern überall eine Änderung ihrer Wahl zu ermöglichen.

### Sollte ich FlowConsent über den Google Tag Manager laden?

Nein. FlowConsent lädt nicht über GTM, denn ein aus GTM geladenes Banner kommt für die Vorabblockierung zu spät. Der Code gehört an den Anfang des `<head>`, oberhalb des GTM-Containers. Siehe [Google Consent Mode](/de/doc/google-consent-mode).