# FlowConsent auf einer eigenen Website installieren (HTML)

FlowConsent auf einer Website mit HTML, PHP, Django, Rails, Laravel, Hugo, Jekyll oder Eleventy installieren: Code einmal in den <head> der Basisvorlage.

> Canonical: https://www.flowconsent.com/de/doc/install-html
> Last updated: 2026-10-01
Auf einer individuell entwickelten Website fügen Sie den FlowConsent-Code **ein einziges Mal** ganz oben in den `<head>` der Vorlage ein, die alle Seiten teilen (Layout, eingebundener Header, Basisvorlage), vor jedem anderen Skript. Die Installation umfasst zwei Schritte: den Code kopieren und in diese gemeinsame Vorlage einfügen. Die zwei typischen Stolperfallen: eine Content-Security-Policy, die das Banner blockiert, und clientseitige Navigation, die den SPA-Modus erfordert.

## Bevor Sie beginnen

- Ein Konto auf [app.flowconsent.com](https://app.flowconsent.com) (der Free-Tarif ist kostenlos, ohne Kreditkarte, bis zu 25.000 Sitzungen pro Monat).
- Ein erstelltes und bereitgestelltes Banner. Im Free-Tarif läuft die Bereitstellung über Ihr eigenes Cloudflare-Konto ([Cloudflare-Anleitung](/de/doc/cloudflare-deployment)), bei Pro und Enterprise genügt ein Klick.
- Zugriff auf den Quellcode Ihrer Website und auf deren Veröffentlichungsprozess.

## Schritt 1: Code kopieren

Öffnen Sie **Builder → Deployment → Integration** und kopieren Sie den Code aus dem Tab **HTML / No-code**. Er besteht aus zwei Teilen in dieser Reihenfolge: dem Google-Consent-Mode-v2-Stub (Standardwerte `denied`) und dem Loader des Banners.

```html title="Ganz oben im <head>"
<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>

  <meta charset="utf-8">
  <!-- Ihre übrigen Tags und Skripte folgen danach -->
</head>
```

Jedes Skript oberhalb dieses Codes entgeht dem vorherigen Blockieren. Der Code muss also vor Google Analytics, Meta Pixel, Google Tag Manager und jedem anderen Tracker stehen.

## Schritt 2: Einmal in die gemeinsame Vorlage einfügen

Suchen Sie die Datei, die den `<head>` aller Seiten erzeugt. Je nach Technologie:

- **Statische HTML-Website**: Ohne Vorlage hat jede `.html`-Datei ihren eigenen `<head>`. Fügen Sie den Code in jede Datei ein (Suchen und Ersetzen auf `<head>` genügt) oder nutzen Sie ein serverseitiges Include, falls Ihr Hoster das unterstützt.
- **PHP**: der gemeinsame Header, oft `header.php`, der per `include` oder `require` in jede Seite eingebunden wird.
- **Laravel**: das Blade-Layout, zum Beispiel `resources/views/layouts/app.blade.php`.
- **Django**: die Basisvorlage (oft `templates/base.html`), die Ihre Seiten mit `{% extends "base.html" %}` erweitern.
- **Ruby on Rails**: `app/views/layouts/application.html.erb`.
- **Hugo**: die Basisvorlage `layouts/baseof.html` (`layouts/_default/baseof.html` vor Hugo 0.146) oder das von ihr aufgerufene Partial `head.html`. Bei einem Theme kopieren Sie diese Datei in den Ordner `layouts/` Ihres Projekts, statt das Theme zu ändern.
- **Jekyll**: das Layout `_layouts/default.html` oder `_includes/head.html` bei einem Theme wie Minima. Um eine Theme-Datei zu überschreiben, kopieren Sie sie an denselben Pfad in Ihrer Website.
- **Eleventy**: das Basislayout in `_includes/` (zum Beispiel `_includes/base.njk`), ausgewählt über den Schlüssel `layout` im Front Matter.

Der Code ist normales HTML: Keine Template-Engine verlangt ein Escaping. Hat Ihre Website mehrere Root-Layouts, wiederholen Sie den Schritt in jedem. Bauen Sie die Website anschließend neu bzw. stellen Sie sie erneut bereit.

Binden Sie Ihre Tracker (Google Analytics, Meta Pixel…) nicht fest in die Vorlage ein: Deklarieren Sie sie unter **Builder → Services**, dann lädt das Banner sie erst nach der Einwilligung. Für Google Tag Manager siehe die [eigene Anleitung](/de/doc/install-google-tag-manager).

## Content-Security-Policy und clientseitige Navigation

> [!WARNING]
> Sendet Ihre Website einen `Content-Security-Policy`-Header, bleibt das Banner blockiert, bis seine Domain darin steht. Erlauben Sie die Domain aus Ihrem Code in `script-src` (Laden des Skripts) und in `connect-src` (Anfragen des Banners an dieselbe Domain): `https://*.consent.flowconsent.com` bei Pro und Enterprise, die URL Ihres Cloudflare Workers im Free-Tarif. Da der Stub ein Inline-Skript ist, braucht er zusätzlich eine `nonce`, einen `sha256-…`-Hash (neu berechnen, wenn Sie den Code ändern) oder `'unsafe-inline'`.

```text title="Beispiel-Header (Pro und Enterprise)"
Content-Security-Policy: script-src 'self' 'nonce-RANDOM' https://*.consent.flowconsent.com; connect-src 'self' https://*.consent.flowconsent.com
```

Ergänzen Sie dann `nonce="RANDOM"` an beiden `<script>`-Tags des Codes, mit einem Wert, der für jede Antwort neu erzeugt wird. Dienste, die das Banner nach der Einwilligung lädt, müssen ebenfalls erlaubt sein, genau wie ohne FlowConsent. Bei einer Blockierung nennt die Browserkonsole die Direktive und die abgelehnte Domain.

> [!NOTE]
> Navigiert Ihre Website ohne vollständiges Neuladen (Turbo in Rails, `wire:navigate` von Livewire, `hx-boost` von htmx, ein JavaScript-Framework), aktivieren Sie den **SPA-Modus** im Tab **Einstellungen** des Builders und stellen Sie das Banner erneut bereit: Die Einwilligung wird dann bei jeder clientseitigen Navigation erneut geprüft. Details in der [Next.js- und SPA-Anleitung](/de/doc/nextjs-integration).

## Installation prüfen

1. Öffnen Sie die Live-Website in einem privaten Fenster: Das Banner erscheint.
2. Im Tab **Netzwerk** geht vor dem Klick auf **Akzeptieren** keine Anfrage an Drittanbieter raus. Die **Konsole** meldet keinen CSP-Verstoß.
3. Starten Sie den [Einrichtungsassistenten](/de/doc/setup-wizard) (Builder → Integration): Er prüft die Live-Seite (Loader mit dem richtigen Lizenzcode vorhanden, Consent-Mode-Stub vorhanden und vor jedem Google-Tag platziert).
4. Schließen Sie mit einem Ablehnungs-Scan aus dem Tab **Compliance** ab ([Konformitätsprüfung](/de/doc/compliance-verification)).

## Mit Ihrem KI-Agenten erledigen (MCP)

FlowConsent bietet einen offiziellen MCP-Server, `https://mcp.flowconsent.com`, nutzbar mit Claude, ChatGPT oder jedem MCP-Client. Die Verbindung erfolgt per OAuth 2.0 mit Ihrem FlowConsent-Konto, ohne API-Schlüssel. Ihr Agent holt den Code und die Platzierungsanweisungen (`get_banner_snippet`, `get_setup_instructions`), prüft die Installation mit einem echten Scan (`verify_consent_compliance`) und kann eine wiederkehrende Überwachung einrichten (`monitor_compliance`). Die Vorlage ändern Sie selbst oder Ihr Coding-Agent: Der MCP-Server liefert den Code, die Anweisungen und die Prüfung.

Beispielanfrage:

> Gib mir den Code meines Banners für meine individuell entwickelte HTML-Website, sag mir, wo er in meine Vorlage gehört, und prüfe dann, ob er auf https://meinewebsite.de korrekt installiert ist

Mehr dazu: [MCP-Server](/de/doc/mcp-server) und [FlowConsent für KI-Agenten](/de/mcp).

## Häufige Fragen

### Muss ich den Code in jede Seite einfügen?

Er muss auf jeder Seite vorhanden sein, aber Sie fügen ihn nur einmal ein, wenn Ihre Seiten eine Vorlage teilen. Nur eine reine HTML-Website ohne Vorlage verlangt das Einfügen Datei für Datei.

### Kann ich ihn ans Ende des `<body>` setzen?

Nein. Der Consent-Mode-Stub muss vor jedem Tracker laufen: Am Seitenende wären weiter oben stehende Skripte bereits ausgeführt. Setzen Sie ihn ganz oben in den `<head>`.

### Das Banner erscheint nicht: Wo fange ich an?

Öffnen Sie die Browserkonsole. Ein CSP-Fehler nennt eine Domain, die Sie erlauben müssen. Andernfalls prüfen Sie, ob der Code im tatsächlich ausgelieferten HTML steht (Seitenquelltext), mit Ihrem Lizenzcode.

### Meine Website wird statisch generiert: Funktioniert das Banner ohne Server?

Ja. Der Code läuft im Browser und funktioniert daher auf jedem Hosting für statische Dateien.