Flow Designer

Neben den Standard WiFi-Kampagnen gibt es mit dem OCMP Smart WiFi Flow Designer noch die Möglichkeit mit einem visuellen Designer umfangreiche WiFi Marketing Kampagnen zu erstellen und gestalten.

Leerer Flow

Der Flow Designer macht Kampagnen als grafische Strecke sichtbar. Oben ist der Tab „Flow“ aktiv, was deutlich macht, dass Sie nicht mehr in einer linearen Basiskonfiguration arbeiten, sondern Flows auf einer Canvas erstellen.

Auf der Canvas sehen Sie:

• links einen „+“‑Start‑Button (blaues Quadrat), über den am Anfang der Strecke Elemente ergänzt werden,
• als ersten Knoten eine Karte „Check‑in“ mit dem Hinweis „Einfach“ und der Variante „One‑Click“ (Haken). Dieser Knoten repräsentiert den Login-/Zugangsschritt des Captive Portals.
• zwischen den Knoten kleine Verbindungs‑Punkte (blaue Punkte), die die Verbindung optisch markieren,
• rechts weitere „+“‑Buttons, mit denen Sie nachgelagerte Elemente ergänzen.

Wenn Sie ein „+“ anklicken, öffnet sich das Menü „Neues Element“. In diesem Menü sind alle verfügbaren Flow‑Bausteine als klickbare Einträge aufgeführt:

• Bedingung (Verzweigungen/Entscheidungen)
• Bild (visuelle Inhalte)
• Video (Bewegtbild)
• Text (Information/Botschaft)
• Umfrage (Feedback/Fragen)
• Hintergrund (Hintergrund‑/Layout‑Baustein, z. B. zur Visual‑Kontinuität)
• E‑Mail (gezielte Datenerfassung)
• Form (Formularfelder, strukturierte Eingaben)
• Retargeting (Marketing‑/Tracking‑Baustein, üblicherweise an entsprechende Konfiguration/Einwilligungen gekoppelt)
• Ad (Werbe‑Baustein)
• Choice‑driven Ad (Werbeausspielung abhängig von Auswahl/Antwort)

Damit ist im leeren Flow bereits das Grundprinzip erkennbar: Knoten sind Inhalte/Schritte, Linien sind Übergänge, + fügt an Übergängen neue Schritte hinzu.

Flow Designer (Beispiel)

Im gefüllten Zustand wird die Canvas zur „Landkarte“ der Nutzerreise. Sie sehen mehrere typische UI‑Details, die für das Modellieren komplexer Strecken entscheidend sind:

Erstens sind die Knoten klar typisiert: Oben links in jeder Karte steht der Typ, z. B. „Bild“, „Bedingung“ oder „Check‑in“. Bild‑Knoten enthalten eine Mini‑Vorschau des Assets; Bedingungs‑Knoten zeigen die Frage und nummerierte Antwortoptionen; Check‑in‑Knoten zeigen die Login‑Variante (z. B. One‑Click).

Zweitens erkennen Sie an den Übergängen die kleinen „+“‑Kreise, über die Sie Elemente zwischen bestehende Schritte einfügen können. Das ist besonders wichtig, wenn Sie einen Flow iterativ verbessern: Sie müssen nicht neu verkabeln, sondern können gezielt an Übergängen erweitern.

Drittens sind am Ende eines Pfades „+“‑Quadrate sichtbar. Diese markieren einen offenen Endpunkt, an dem der Flow weitergeführt werden kann (z. B. nach Check‑in noch ein Textschritt oder eine Weiterleitung).

---

Elemente im Flow Designer

Bedingung (Condition)

Der Dialog „Bearbeiten Bedingung“ zeigt, dass Conditions nicht nur Logik, sondern auch Darstellung besitzen. Oben stehen gestalterische Einstellungen:

• Text Farbe, Button Farbe und Button Textfarbe werden über Farbfelder gesetzt (rechts als Swatches sichtbar).
• Hintergrundfarbe ist als eigener Punkt vorhanden, damit Bedingungsseiten im Look & Feel konsistent bleiben.
• Text Größe ist ein Dropdown (z. B. „Normal“), um Lesbarkeit je Zielgruppe/Endgerät zu steuern.

Die eigentliche Condition wird dann in zwei Schritten gebaut:

1. Unter „Bedingung“ definieren Sie die Frage (Eingabefeld, z. B. „Umfrage“ als Platzhalter).
2. Unter „Neue Option“ erstellen Sie Antworten: Sie tragen den Antworttext in das Feld „Antwort“ ein und fügen ihn über „Hinzufügen“ der Liste hinzu.

Am unteren Rand sichern Sie die Arbeit über „Speichern“ oder verwerfen sie mit „Abbrechen“.

In der Canvas‑Ansicht zeigt eine ausgefüllte Bedingungskarte (z. B. „Ist OCMP super?“) die nummerierten Optionen direkt im Knoten. Rechts am Knoten kann ein „X“ (Schließen/Löschen) sichtbar sein, um Elemente wieder zu entfernen. Entscheidender Punkt ist die Verzweigung: Von der Condition gehen mehrere Übergänge ab, die jeweils mit einem „+“ erweitert werden können. So entsteht das typische Muster „eine Frage → mehrere Pfade“.

---

Bild/Video im Flow inkl. Media‑Auswahl

Medien‑Elemente (Bild/Video) sind in der Praxis häufig die aufmerksamkeitsstärksten Schritte eines Flows. Der Dialog „Bearbeiten Media“ zeigt die drei Ebenen, die Sie dabei typischerweise steuern:

1. Ablaufverhalten:

   • Dauer (z. B. „3“) definiert, wie lange ein Medium angezeigt wird bzw. wie eine Sequenz getaktet ist.
   • Überspringbar ist ein Schalter, der bestimmt, ob Nutzer diesen Schritt aktiv überspringen dürfen.
   • Hintergrund anzeigen steuert, ob das Medium zusätzlich vor einem Hintergrund gerendert wird (z. B. für konsistenten Look, wenn Medien unterschiedliche Seitenverhältnisse haben).

2. Ablage/Organisation:
   Der integrierte Medienbrowser bietet Hierarchieansicht und Listenansicht (rechts oben), damit Sie entweder mit Ordnerstrukturen arbeiten oder flach über Listen navigieren. Ein Suchfeld hilft, Dateien schnell zu finden, ohne Ordner manuell zu öffnen.

3. Auswahl/Upload:
   Links sehen Sie eine Ordner-/Kollektionstruktur (z. B. „default“, „trash“). In der Mitte werden Kollektioninformationen angezeigt (Typ, Erstellzeitpunkt, Anzahl Dateien, Größe), damit Sie einschätzen können, ob Sie im richtigen Medienpool sind. Der Button „Datei hochladen“ erlaubt das Hinzufügen neuer Medien direkt aus dem Dialog. Darunter listet die UI die Dateien mit Thumbnail, Namen und Datum (sortierbar, z. B. „Datum“).

➡️ Empfehlung: Halten Sie Medienkollektionen sauber (Namensschema, Trennung nach Brand/Standort), damit Flows nicht „aus Versehen“ auf falsche Assets zeigen.

---

Multi-Language (Übersetzungen)

Die Übersetzungsansicht ist als dreispaltiger Designer aufgebaut, damit Sie Inhalte zuverlässig „Original vs. Übersetzung“ pflegen können. Oberhalb steht ein Hinweistext, der verdeutlicht, dass Übersetzungen im System ggf. erst in der Basisansicht aktiviert werden müssen.

Links unter „Elemente“ sehen Sie eine Liste aller Kampagnenelemente, nummeriert nach Reihenfolge (z. B. „El. 1 Bild“, „El. 2 Bedingung“, „El. 5 Check‑in“). Diese Liste ist Ihre Navigation: Sie wählen das Element aus, das übersetzt werden soll.

In der mittleren Spalte „Original“ wird der Inhalt des ausgewählten Elements angezeigt. Bei Bild‑Elementen ist das eine Vorschau; bei Bedingungs‑Elementen sehen Sie Frage („Umfrage“) und Antwortoptionen in gefüllten Feldern.

Rechts unter „Translate“ wählen Sie oben über „Sprache“ die Zielsprache (Dropdown, z. B. „Englisch“). Darunter befinden sich die übersetzbaren Felder als Eingaben mit Platzhaltern. Für eine Bedingung bedeutet das: Sie übertragen die Frage und jede einzelne Antwort in die Zielsprachfelder. So wird vermieden, dass nur Teile einer Condition übersetzt werden.

---