Flow-Editor

Der Flow-Editor ist das zentrale Werkzeug zum Erstellen und Bearbeiten von Automatisierungs-Flows in Octoserv. Er bietet eine visuelle Oberfläche, auf der Sie Steps per Drag & Drop anordnen und miteinander verknüpfen können. Ein Flow besteht aus Triggern, Aktionen und Logik-Bausteinen, die zusammen einen automatisierten Ablauf bilden.

Aufbau des Editors

Der Flow-Editor besteht aus folgenden Bereichen:

Navigation im Canvas

Beim Öffnen eines Flows wird die Ansicht automatisch so angepasst, dass der gesamte Flow sichtbar ist.

Steps hinzufügen

Es gibt zwei Wege, einen neuen Step einzufügen:

1. + Step-Button in der Toolbar: Öffnet den Step-Katalog als Seitenleiste. Wählen Sie eine Kategorie (Trigger, Aktionen, Logik) und klicken Sie auf den gewünschten Step.
2. + Button zwischen Steps: Zwischen zwei bestehenden Steps erscheint ein +-Symbol. Klicken Sie darauf, um an dieser Stelle einen neuen Step einzufügen.

Step konfigurieren

Klicken Sie auf einen Step im Canvas, um sein Einstellungs-Panel zu öffnen. Je nach Step-Typ stehen unterschiedliche Optionen zur Verfügung. Änderungen werden gespeichert, wenn Sie auf „Speichern“ klicken.

Zusätzliche Aktionen für jeden Step:

• Duplizieren: Erstellt eine Kopie des Steps mit allen Einstellungen
• Löschen: Entfernt den Step aus dem Flow
• Verschieben: Ziehen Sie den Step an eine neue Position

Formular-Landingpage & Seiten-Layout

Ein Formular-Step kann als fertige Landingpage genutzt werden – mit Kopfbereich, Sidebar-Inhalten und Ihrem Formular. Die Gestaltung erfolgt im Formular-Step unter dem Abschnitt „Seiten-Layout“.

Vorlage wählen

Zur Auswahl stehen drei Vorlagen:

• Zentriert: Alles untereinander, mittig – ohne Sidebar.
• Links + Sidebar: Formular links, Sidebar (z. B. Bild, Video, Text) rechts.
• Rechts + Sidebar: Sidebar links, Formular rechts.

Spaltenaufteilung festlegen

Bei den beiden Sidebar-Vorlagen können Sie zusätzlich bestimmen, wie breit Formular und Sidebar sind. Wählen Sie einfach eine der Karten – die kleine Grafik zeigt die Aufteilung (blau = Formular, grau = Sidebar):

• Standard: Sidebar mit fester Breite (300 px), das Formular nimmt den restlichen Platz ein.
• 50 / 50: Formular und Sidebar gleich breit.
• 60 / 40: Formular etwas breiter als die Sidebar.
• 70 / 30: Formular deutlich breiter als die Sidebar.

Die Prozentangabe gilt immer als Formular / Sidebar. Bei „Rechts + Sidebar“ sitzt das Formular rechts – die Aufteilung bleibt gleich.

Live-Vorschau

Unter den Einstellungen sehen Sie eine Vorschau der echten Landingpage – genau so, wie Ihre Besucher sie sehen. Ändern Sie Vorlage, Spaltenaufteilung, Titel oder Farben, aktualisiert sich die Vorschau nach kurzer Zeit automatisch – ganz ohne Speichern.

Damit Ihre Änderungen wirksam werden, klicken Sie anschließend auf „Speichern“.

Nur ausführen wenn… (Bedingte Ausführung)

Jeder Step im Flow-Editor kann mit einer Bedingung versehen werden. So lässt sich steuern, ob ein Step für einen bestimmten Kontakt tatsächlich ausgeführt wird – oder übersprungen wird, wenn die Bedingung nicht zutrifft.

Bedingung aktivieren

1. Klicken Sie auf einen Step, um das Einstellungs-Panel zu öffnen
2. Unterhalb der Step-Einstellungen finden Sie den aufklappbaren Bereich „Nur ausführen wenn…“
3. Klicken Sie auf die Zeile, um den Bedingungsbereich zu öffnen
4. Klicken Sie auf „+ Regel hinzufügen“, um eine neue Bedingung anzulegen

Regel erstellen

Jede Regel besteht aus drei Teilen:

Verfügbare Kontaktfelder

Zusätzlich können Sie beliebige Meta-Felder direkt als Text eingeben (z. B. company_size oder newsletter_optin).

Verfügbare Operatoren

Mehrere Regeln verknüpfen

Sie können beliebig viele Regeln hinzufügen. Bei mehreren Regeln wählen Sie die Verknüpfung:

• UND – Alle Regeln müssen zutreffen, damit der Step ausgeführt wird
• ODER – Mindestens eine Regel muss zutreffen

Praxis-Beispiele

Trigger-Einstellungen

Bei jedem Trigger-Step (orange) können Sie über die Trigger-Einstellungen festlegen, wie sich der Trigger im Flow verhält. Die Einstellungen erscheinen unterhalb der Step-spezifischen Optionen.

Eintritt und Durchlauf

Zwei Schalter steuern, ob und wie Kontakte über diesen Trigger in den Flow gelangen:

Conversion tracken

Der Schalter „Conversion tracken?“ markiert diesen Trigger als Conversion-Punkt. Wenn aktiviert (An), wird gezählt, wie viele Kontakte diesen Trigger erreichen – sichtbar in der Flow-Statistik.

Auslöse-Häufigkeit

Unter „Kann ausgelöst werden“ legen Sie fest, wie oft ein einzelner Kontakt diesen Trigger aktivieren darf:

Step-Katalog – Übersicht

Octoserv bietet drei Kategorien von Steps, die sich farblich unterscheiden:

• ● Trigger (Orange) – Starten einen Flow, wenn ein Ereignis eintritt
• ● Aktionen (Blau) – Führen eine Operation für den Kontakt aus
• ● Logik (Hellblau) – Steuern den Ablauf des Flows

Trigger

Trigger starten einen Flow, wenn ein bestimmtes Ereignis für einen Kontakt eintritt. Jeder Flow beginnt mit mindestens einem Trigger.

Formulare

Aktivität

CRM

Pipeline

Entwickler

Aktionen

Aktionen führen eine bestimmte Operation für den Kontakt aus, der sich im Flow befindet.

Kommunikation

CRM

Pipeline

Verzögerung

Entwickler

Flow-Steuerung

Logik

Logik-Steps steuern den Ablauf eines Flows. Sie ermöglichen Verzweigungen, Bedingungen und Schleifen.

Verzweigung

Steuerung

Spezial

Verzweigungen (Branches)

Verzweigungen ermöglichen es, den Flow in mehrere Pfade aufzuteilen. Jeder Zweig kann eine eigene Folge von Steps enthalten.

So funktionieren Verzweigungen:

1. Fügen Sie einen Verzweigungs-Step ein (Ja/Nein, Mehrfach-Verzweigung, Split-Test oder Zufallsverteilung)
2. Konfigurieren Sie die Bedingungen oder Verteilung für jeden Zweig
3. Fügen Sie in jedem Zweig die gewünschten Steps hinzu

Im Canvas werden die Zweige als farbig markierte Kreise dargestellt (A, B, C, ...). Jeder Zweig zeigt seine eigene Step-Kette.

Flow aktivieren und deaktivieren

Ein Flow kann zwei Zustände haben:

• Inaktiv: Der Flow läuft nicht. Sie können ihn frei bearbeiten. Neue Kontakte werden nicht verarbeitet.
• Aktiv: Der Flow läuft. Trigger reagieren auf Ereignisse und leiten Kontakte durch den Flow.

Um einen Flow zu aktivieren oder zu deaktivieren, klicken Sie auf den Status-Badge im Header des Editors.

Flow manuell starten

Mit dem Play-Button in der Toolbar können Sie einen Flow manuell für ausgewählte Kontakte starten. Das ist nützlich, um:

• Bestehende Kontakte nachträglich durch einen Flow zu schicken
• Einen Flow zu testen, bevor er aktiviert wird
• Einmalige Aktionen für eine Gruppe von Kontakten auszuführen

Flow-Verkettung

Mit der Flow-Verkettung können Sie einen Kontakt von einem Flow direkt in einen anderen Flow übergeben – ohne Umweg über Tags. Das ist sauberer und übersichtlicher als das bisherige Muster „Tag setzen → Tag-Trigger im Ziel-Flow“.

Funktionsprinzip

Die Flow-Verkettung besteht aus zwei Steps, die zusammenarbeiten:

Schritt für Schritt einrichten

1. Ziel-Flow vorbereiten

1. Öffnen Sie den Flow, der Kontakte empfangen soll (oder erstellen Sie einen neuen).
2. Fügen Sie den Trigger „Flowaufruf“ hinzu (Kategorie: CRM).
3. Platzieren Sie ihn als ersten Step im Flow – er dient als Einstiegspunkt.
4. Fügen Sie nach dem Flowaufruf-Trigger alle gewünschten Aktionen hinzu (E-Mail senden, Tag zuweisen usw.).
5. Aktivieren Sie den Flow.

2. Quell-Flow konfigurieren

1. Öffnen Sie den Flow, der Kontakte senden soll.
2. Fügen Sie an der gewünschten Stelle die Aktion „Flow aufrufen“ hinzu (Kategorie: Flow-Steuerung).
3. Wählen Sie im Dropdown „Ziel-Flow“ den Flow aus, der den Flowaufruf-Trigger enthält.
4. Speichern Sie den Step.

Verbindung prüfen

Nachdem Sie die Verkettung eingerichtet haben, können Sie die Verbindung im Ziel-Flow prüfen:

1. Öffnen Sie den Ziel-Flow und klicken Sie auf den Flowaufruf-Trigger.
2. Wenn die Verbindung korrekt eingerichtet ist, sehen Sie die Meldung:
   „Mit Flow «[Name]» erfolgreich verbunden.“
3. Wenn noch kein Quell-Flow auf diesen Trigger verweist, erscheint eine Warnung:
   „Noch kein Flow-aufrufen-Step verweist auf diesen Flow.“

Wichtige Hinweise

• Der Ziel-Flow muss aktiv sein, damit die Verkettung funktioniert. Bei einem inaktiven Ziel-Flow passiert nichts – der Kontakt verbleibt im Quell-Flow und fährt dort normal fort.
• Ein Kontakt kann in mehreren Flows gleichzeitig aktiv sein. Der Quell-Flow läuft nach der Übergabe normal weiter.
• Mehrere Quell-Flows können auf denselben Ziel-Flow verweisen. Der Flowaufruf-Trigger zeigt alle verbundenen Flows an.
• Die Verkettung funktioniert ohne Tags. Sie müssen keine Tags erstellen oder pflegen.
• Im Step-Titel des „Flow aufrufen“-Steps wird automatisch der Name des Ziel-Flows angezeigt, damit Sie auf einen Blick sehen, wohin der Kontakt geleitet wird.

Praxis-Beispiel

Szenario: Ein Kontakt füllt ein Formular aus. Der Willkommens-Flow sendet eine Bestätigungs-E-Mail und übergibt den Kontakt anschließend an einen Qualifizierungs-Flow.

Willkommens-Flow (Quell-Flow):

1. Trigger: Formular ausgefüllt
2. Aktion: Bestätigungs-E-Mail senden
3. Aktion: Tag „Newsletter“ zuweisen
4. Aktion: Flow aufrufen → Qualifizierungs-Flow

Qualifizierungs-Flow (Ziel-Flow):

1. Trigger: Flowaufruf
2. Aktion: 3 Tage warten
3. Aktion: Ranking berechnen
4. Verzweigung: Ranking ≥ 50 → Berater zuweisen

Anwendungsbeispiele

Beispiel 1: Willkommens-Flow

Ein neuer Kontakt füllt ein Formular aus und erhält automatisch eine Willkommens-Sequenz:

1. Trigger: Formular → Kontakt füllt das Anmeldeformular aus
2. Aktion: Tag zuweisen → „Neukontakt“
3. Aktion: E-Mail senden → Willkommens-E-Mail
4. Aktion: Verzögerung → 2 Tage warten
5. Aktion: E-Mail senden → Follow-up mit weiterführenden Informationen

Beispiel 2: Lead-Qualifizierung

Neue Kontakte werden automatisch bewertet und dem richtigen Berater zugewiesen:

1. Trigger: Tag zugewiesen → „Neuer Lead“
2. Aktion: Ranking berechnen → Score ermitteln
3. Aktion: PLZ Klasse → Entfernung zum Standort bestimmen
4. Logik: Ja/Nein → Score > 50?
   • Ja: PLZ Berater → Berater automatisch zuweisen
   • Nein: Tag zuweisen → „Nachfassen“

Beispiel 3: Termin-Nachfassung

Nach einem Termin wird automatisch nachgefasst:

1. Trigger: Aufgabe erledigt → Terminbericht erstellt
2. Aktion: Verzögerung → 1 Tag warten
3. Aktion: E-Mail senden → Danke-E-Mail mit Zusammenfassung
4. Aktion: Verzögerung → 3 Tage warten
5. Logik: Ja/Nein → Tag „Angebot angenommen“ vorhanden?
   • Ja: Flow beenden
   • Nein: Admin-Benachrichtigung → Berater erinnern

Formular-Landingpages

Der Formular-Step (web_form) im Flow-Editor kann als eigenständige Landingpage betrieben werden – mit eigenem Layout, eigener Dankeseite und optionalem Tracking. So erstellen Sie professionelle Formular-Seiten, die unabhängig von Ihrer Website unter einer eigenen URL erreichbar sind.

Die erweiterten Einstellungen finden Sie unterhalb des Formular-Builders, aufgeteilt in mehrere Akkordeon-Bereiche:

Einbetten & Vorschau

Im Akkordeon „Einbetten & Vorschau“ finden Sie vier Wege, Ihr Formular zu verwenden:

Die Landingpage-URL ist der Einstieg für die erweiterten Funktionen: Nur wenn Sie diese URL verwenden, werden Seiten-Layout, Dankeseite und Tracking-Einstellungen wirksam.

Klicken Sie auf „Vorschau anzeigen“, um die Landingpage in einem neuen Tab zu öffnen.

Datei-Upload: Grenzen und Anhänge

Beim Feldtyp Datei legen Sie drei Grenzen fest:

Steht bei „Zusammen max.“ eine Zahl, nennt das Formular nur diese – zwei Zahlen nebeneinander würden den Absender nur verwirren. Wählt jemand zu viel aus, meldet sich das Formular sofort und nennt die tatsächliche Größe: „Zusammen sind das 7,4 MB. Erlaubt sind höchstens 5 MB.“ Wer die Prüfung im Browser umgeht, bekommt beim Absenden dieselbe Auskunft vom Server. Stillschweigend verworfen wird nichts.

Benachrichtigung und Antwortmail

Ein Formular verschickt zwei voneinander unabhängige E-Mails. Beide stellen Sie im Bereich „Benachrichtigung“ ein:

Empfänger der Antwortmail ist immer die im Formular angegebene E-Mail-Adresse – nicht die Adresse Ihres Teams. In Betreff und Anschreiben setzt {formular} den Namen des Formulars ein. Bleiben beide Felder leer, verwendet Octoserv verständliche Vorgaben.

Nur abfragen, was noch fehlt

Jedes Eingabefeld hat den Schalter „Nur abfragen, wenn noch leer“. Kommt ein Besucher über einen erkannten Link – einen Superlink oder einen Link aus einer E-Mail – prüft das Formular beim Aufbau, ob am Kontakt schon ein Wert steht:

• Wert ist bekannt: Das Feld wird nicht angezeigt. Es steht weiter im Formular und wird mitgesendet, der Besucher sieht es nur nicht.
• Wert fehlt: Das Feld wird ganz normal abgefragt.

Damit bieten Sie ein Formular an, das bei bekannten Interessenten nur noch die Lücken abfragt und bei neuen Besuchern vollständig erscheint. Die Eingaben aktualisieren wie gewohnt den Kontakt.

Mehrseitiges Formular mit Schritten

Lange Formulare wirken auf einer einzigen Seite abschreckend. Mit dem Feldtyp Seitenumbruch teilen Sie ein Formular in Schritte auf. Über dem Formular erscheint dann eine Legende mit allen Schritten: der aktuelle ist hervorgehoben, bereits ausgefüllte sind anklickbar.

So richten Sie die Schritte ein

1. Öffnen Sie den Formular-Step im Flow-Editor.
2. Wählen Sie unter Feld hinzufügen › Spezialfelder den Eintrag Seitenumbruch und fügen Sie ihn hinzu.
3. Ziehen Sie den Umbruch an die Stelle, an der ein neuer Schritt beginnen soll.
4. Tragen Sie im Feld Label den Namen des Schritts ein. Dieser Name erscheint in der Legende.
5. Wiederholen Sie das für jeden weiteren Schritt und speichern Sie den Step.

Was die Besucher sehen

• Pro Schritt nur die Felder dieses Schritts, darunter Weiter.
• Ab dem zweiten Schritt zusätzlich Zurück. Der Absenden-Knopf erscheint nur im letzten Schritt.
• Weiter gibt erst frei, wenn alle Pflichtfelder des aktuellen Schritts ausgefüllt sind. Das fehlende Feld wird direkt benannt.
• Ein bereits ausgefüllter Schritt lässt sich in der Legende anklicken. Vorwärts geht es nur über Weiter – so bleibt die Prüfung wirksam.
• Eingaben bleiben beim Wechsel zwischen den Schritten erhalten.

Hinweistexte zwischen den Feldern

Mit dem Spezialfeld Hinweistext setzen Sie Zwischenüberschriften und Erklärungen in das Formular – zum Beispiel eine Liste der Unterlagen über dem Datei-Upload. Der Text wird nur angezeigt; er wird nicht abgefragt, nicht dem Kontakt zugeordnet und erscheint nicht in den Formularantworten.

Nach dem Absenden

Das Akkordeon „Nach dem Absenden“ legt fest, was passiert, nachdem ein Besucher das Formular abgeschickt hat. Sie haben zwei Modi zur Auswahl:

Standard-Modus (ohne eigene Dankeseite)

Im Standard-Modus stehen Ihnen drei Optionen zur Verfügung:

Eigene Dankeseite verwenden

Aktivieren Sie die Checkbox „Eigene Dankeseite verwenden“, um stattdessen eine vollständig gestaltbare Dankeseite zu nutzen. Diese wird über das Dankeseiten-Akkordeon weiter unten konfiguriert.

Seiten-Layout

Das Akkordeon „Seiten-Layout“ steuert das Aussehen der Formular-Landingpage. Hier legen Sie Template, Titel, zusätzliche Inhalte und das Farbdesign fest.

Template

Wählen Sie eines der drei verfügbaren Templates:

Titel & Untertitel

Geben Sie einen Seitentitel und optional einen Untertitel ein. Diese werden im Header-Bereich der Landingpage angezeigt, über dem Formular.

Inhaltsblöcke / Sidebar-Inhalte

Fügen Sie zusätzliche Inhalte hinzu, die neben (bei Sidebar-Templates) oder über/unter (bei zentriertem Template) dem Formular angezeigt werden. Es stehen drei Block-Typen zur Verfügung:

Blöcke können per Drag & Drop sortiert und über das X-Symbol entfernt werden.

Ansprechpartner

Aktivieren Sie „Ansprechpartner anzeigen“, um eine Kontaktperson auf der Landingpage einzublenden. Wählen Sie einen Benutzer aus dem Dropdown – dessen Profilbild, Name und optional E-Mail-Adresse werden angezeigt.

Downloads

Fügen Sie Dateien als Downloads hinzu, die der Besucher direkt von der Landingpage herunterladen kann (z. B. Produktbroschüren, Preislisten). Die Dateien werden aus Ihren Octoserv-Dokumenten ausgewählt.

Footer-Text

Optionaler Text, der am unteren Rand der Landingpage angezeigt wird – z. B. für rechtliche Hinweise oder Kontaktinformationen.

Bestätigungsseite

Die Bestätigungsseite wird angezeigt, wenn der Besucher das Formular abgeschickt hat und keine eigene Dankeseite aktiviert ist. Sie konfigurieren:

Design

Passen Sie das Farbschema der Landingpage über fünf Farbfelder an:

Vorschau

Am Ende des Seiten-Layout-Akkordeons sehen Sie eine Live-Vorschau der Landingpage. Klicken Sie auf „Vollbild-Vorschau öffnen“, um die Seite im Overlay in voller Größe zu betrachten.

Eigene Dankeseite

Das Akkordeon „Dankeseite“ ermöglicht es Ihnen, eine vollständig gestaltbare Dankeseite zu erstellen, die nach dem Absenden des Formulars angezeigt wird. Die Dankeseite nutzt dasselbe Layout-System wie die Landingpage und bietet dieselben Gestaltungsmöglichkeiten.

Template

Wie beim Seiten-Layout wählen Sie zwischen Zentriert, Links + Sidebar und Rechts + Sidebar. Das Template der Dankeseite ist unabhängig vom Landingpage-Template – Sie können beide unterschiedlich gestalten.

Hauptinhalt

Der Hauptinhalt ist das zentrale Element der Dankeseite und wird prominent in der Mitte der Karte angezeigt:

Weitere Einstellungen

Die Dankeseite bietet dieselben zusätzlichen Bereiche wie die Landingpage:

• Titel & Untertitel: Seitentitel im Header-Bereich
• Inhaltsblöcke / Sidebar-Inhalte: Videos, Bilder und Textblöcke (z. B. Upselling-Inhalte, weiterführende Links)
• Ansprechpartner: Profilbild und Kontaktdaten eines Octoserv-Benutzers
• Downloads: Dateien zum Herunterladen (z. B. das versprochene E-Book oder die Preisliste)
• Footer-Text: Optionaler Text am Seitenende
• Design: Eigenes Farbschema mit 5 Farbfeldern (unabhängig vom Landingpage-Design)
• Vorschau: Live-Vorschau mit Vollbild-Option

Auf den Besuch der Dankeseite reagieren

Oft soll ein Flow erst weiterlaufen, wenn der Kontakt die Dankeseite tatsächlich gesehen hat – etwa um erst dann eine Bestätigungsmail zu senden oder ein Tag zu setzen. Dafür gibt es den Trigger „Seite besucht“.

Sie müssen die Adresse der Dankeseite dabei nicht abtippen. Wählen Sie im Trigger unter „Dankeseite eines Formulars“ einfach das gewünschte Formular aus. Octoserv trägt die Adresse selbst ein und hält sie aktuell – auch dann, wenn das Formular später in einen anderen Flow verschoben wird.

Damit es eine Dankeseite gibt, die besucht werden kann, muss im Formular der Schalter „Eigene Dankeseite verwenden“ eingeschaltet sein. Ist er das nicht, wird der Besucher nach dem Absenden gar nicht auf eine eigene Seite geleitet – der Trigger könnte also nie auslösen. Octoserv weist im Trigger darauf hin:

Schalten Sie den Schalter im Formular ein und speichern Sie das Formular: Der Hinweis verschwindet, und die Regel wird sofort nachgezogen. Möchten Sie stattdessen eine eigene Regel eintippen, wählen Sie in der Auswahl den Eintrag „— eigene Regel unten —“.

Formular-Design

Im Akkordeon „Formular-Design“ gestalten Sie das Aussehen des Formulars selbst (unabhängig vom Seiten-Layout):

Tracking & Consent für Formular-Landingpages

Wenn Sie im Flow-Editor einen Formular-Step (web_form) verwenden und dafür eine eigene Landingpage konfiguriert haben, können Sie direkt in den Step-Einstellungen festlegen, welche Tracking-Dienste auf der Landingpage und Dankeseite eingebunden werden sollen. Zusätzlich können Sie einen DSGVO-konformen Consent-Banner konfigurieren, der automatisch angezeigt wird.

Die Tracking-Einstellungen gelten immer für beide Seiten gleichzeitig – sowohl für die Formular-Landingpage als auch für die Dankeseite.

Tracking-Akkordeon öffnen

Klicken Sie im Flow-Editor auf einen Formular-Step und scrollen Sie in den Einstellungen nach unten. Unter der Dankeseiten-Konfiguration finden Sie das Akkordeon „Tracking & Consent“ mit einem Diagramm-Icon. Klicken Sie darauf, um es zu öffnen.

Wenn mindestens ein Tracking-Dienst aktiviert ist, erscheint neben dem Titel das grüne Badge „Aktiv“.

Tracking-Dienste aktivieren

Im geöffneten Akkordeon sehen Sie drei Checkboxen für die verfügbaren Tracking-Dienste:

Falls mehrere OctoLytics-Sites registriert sind, erscheint nach dem Aktivieren ein Dropdown zur Auswahl der gewünschten Site.

Consent-Banner anpassen

Sobald Google Analytics oder Meta Pixel aktiviert ist, erscheint automatisch der Bereich „Consent-Banner“. Der Banner wird auf der Landingpage und Dankeseite am unteren Bildschirmrand eingeblendet und fragt den Besucher um Zustimmung.

Sie können folgende Elemente des Banners anpassen:

Banner-Design

Unterhalb der Text-Einstellungen finden Sie drei Farbfelder, um das Banner an Ihr Corporate Design anzupassen:

• Hintergrund: Hintergrundfarbe des Banners (Standard: dunkelblau #1e293b)
• Textfarbe: Farbe für Text und Links (Standard: weiß #f8fafc)
• Button-Farbe: Hintergrundfarbe des Akzeptieren-Buttons (Standard: blau #3b82f6)

So funktioniert der Consent

Der Consent-Banner nutzt localStorage (keine Cookies) und funktioniert folgendermaßen:

1. Beim ersten Besuch wird der Banner nach 500ms am unteren Rand eingeblendet
2. Klickt der Besucher auf „Akzeptieren“:
   • Die Zustimmung wird im Browser gespeichert (octo_consent_marketing = granted)
   • GA4 und/oder Meta Pixel werden sofort geladen
   • YouTube-Videos werden freigeschaltet (falls aktiv)
3. Klickt der Besucher auf „Ablehnen“:
   • Die Ablehnung wird gespeichert (octo_consent_marketing = denied)
   • Kein Tracking wird geladen
4. Bei erneutem Besuch wird der Banner nicht mehr angezeigt – die gespeicherte Entscheidung gilt

YouTube-Consent-Overlay

Wenn Sie YouTube-Videos in der Sidebar Ihrer Landingpage verwenden, können Sie zusätzlich ein DSGVO-konformes Consent-Overlay aktivieren. Dieses verhindert, dass YouTube-Inhalte ohne Zustimmung des Besuchers geladen werden.

Die Checkbox „Consent-Overlay für YouTube-Videos anzeigen“ finden Sie im Bereich „YouTube-Videos“ des Tracking-Akkordeons. Sie ist standardmäßig aktiviert.

Darstellung des Overlays

Anstelle des Videos sieht der Besucher:

• Das YouTube-Thumbnail des Videos als Hintergrundbild (leicht abgedunkelt)
• Einen roten YouTube-Play-Button in der Mitte
• Den Hinweistext: „Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.“
• Einen „Video laden“-Button mit Glas-Effekt

Klickt der Besucher auf den „Video laden“-Button, wird der Consent-Banner automatisch bestätigt (falls noch offen) und das Video wird geladen.

Zusammenfassung