Journey-Anpassung
Journey-Anpassung ermöglicht es Ihnen, die visuelle Identität Ihrer Marke auf die Identitätsprüfungs-Journey von Unico anzuwenden — ohne Support-Ticket, ohne Abhängigkeit vom Support-Team und mit sofort sichtbarem Ergebnis.
Sie legen Logo, Hintergrundfarbe, Button-Farben und -Form sowie die Inhaltsfarbe fest. Nach der Veröffentlichung gilt die Konfiguration sofort für die nächsten Journeys, die in Ihrer Niederlassung gestartet werden.
Für wen: Kunden, die die Web Journey mit den Integrationsmodellen iFrame, Redirect oder SDK verwenden.
Was sich für den Endnutzer ändert: Der Bildschirm, den er während der Identitätsprüfung sieht, trägt jetzt die Handschrift Ihrer Marke.
Wo Sie es finden: IDCloud Portal → Seitenleiste Einstellungen → Tab Anpassung.
Bevor Sie beginnen
Zugriffsberechtigung
Ihr Benutzer benötigt Zugriff auf den Bereich Einstellungen des IDCloud Portal. Wenn das Zahnradsymbol nicht in der Seitenleiste angezeigt wird, bitten Sie Ihren Kontoadministrator, den Zugriff zu gewähren.
Wie die Konfiguration angewendet wird
| Umfang | Die Anpassung gilt pro Niederlassung (Branch) und pro Integrationsmodell. iFrame und Redirect/SDK haben unabhängige Konfigurationen — die Veröffentlichung der einen wirkt sich nicht auf die andere aus. |
| Wann es wirksam wird | Sofort nach der Veröffentlichung, für Journeys, die ab diesem Zeitpunkt gestartet werden. Bereits laufende Journeys behalten das bisherige Erscheinungsbild. |
| Wenn Sie nichts anpassen | Die Journey lädt das Standard-Theme von Unico. |
| Journey-Version | Die Vorschau basiert auf dem Design der Web Journey v3.0. In anderen Versionen spiegelt die Vorschau das Ergebnis möglicherweise nicht genau wider — kontaktieren Sie in diesem Fall Unico bezüglich eines Versions-Updates. |
Was Sie bereithalten sollten
- Logo im PNG-Format, idealerweise mit transparentem Hintergrund, bis zu 60 px Höhe und 100 KB.
- Die Hex-Codes Ihrer Markenfarben (z. B.
#1B3FA0).
Was in Ihrer Integration konfigurierbar ist
Neben dem Integrationsmodell hängt das, was auf dem Bildschirm angezeigt wird, von der Web Journey-Version Ihrer Integration ab. Das ist die häufigste Ursache für „Ich sehe dieses Feld nicht":
| Funktion | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 Redirect | 2.0 Redirect | 3.0 Redirect |
|---|---|---|---|---|---|---|
| Logo | ✅ | existiert nicht | existiert nicht | ✅ | ✅ | ✅ |
| Hintergrundfarbe | — | — | — | — | — | ✅ |
| Hintergrundfarbe der Schaltfläche | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Textfarbe der Schaltfläche | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Eckenradius der Schaltfläche | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Inhaltsfarbe | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Kurz gesagt: Die Hintergrundfarbe ist nur bei Web Journey v3.0 im Redirect konfigurierbar, und im iFrame gibt es das Logo nur bei Web Journey v1.0. Farben und Button-Form funktionieren bei jeder Kombination.
Wenn Sie nicht wissen, welche Version Sie verwenden, wenden Sie sich an Ihren Onboarding-Ansprechpartner oder den Unico-Support.
Schritt für Schritt
Schritt 1 — Öffnen Sie den Tab „Anpassung"
Klicken Sie im IDCloud Portal auf das Zahnradsymbol (Einstellungen) in der Seitenleiste. Der Bildschirm öffnet sich direkt auf dem Tab Anpassung.
Der Bildschirm Einstellungen hat drei Tabs — Anpassung, Webhook und QR-Code. Diese Anleitung behandelt den ersten.
Bildschirm Einstellungen mit ausgewähltem Tab Anpassung.
Schritt 2 — Wählen Sie das Integrationsmodell
Wählen Sie in der linken Spalte iFrame oder Redirect oder SDK — die Formularfelder ändern sich je nach Modell.
Sie erkennen den Bildschirm an drei Bereichen: dem Modellwähler links, dem Formular in der Mitte und der Live-Vorschau rechts, die auf jede Änderung reagiert, bevor Sie veröffentlichen.
Wenn Sie beide Modelle verwenden, müssen Sie beide konfigurieren. Es sind unabhängige Konfigurationen — passen Sie eine an, veröffentlichen Sie sie, und wiederholen Sie den Vorgang für die andere.
Auswahl von iFrame / Redirect oder SDK, Formular und Vorschau.
Schritt 3 — Logo hochladen
Verfügbar bei Redirect oder SDK. Im iFrame nur bei Web Journey v1.0.
Klicken Sie auf Logo hinzufügen und wählen Sie die Datei aus. Anforderungen: PNG, maximale Höhe 60 px, maximale Größe 100 KB.
Verwenden Sie ein PNG mit transparentem Hintergrund. So funktioniert das Logo über jeder Hintergrundfarbe — ein PNG mit weißem Hintergrund wird zu einem sichtbaren Rechteck, sobald der Hintergrund eingefärbt ist. Bevorzugen Sie außerdem die horizontale Version des Logos: Der verfügbare Platz ist breit und niedrig.
Feld „Logo hinzufügen" mit den Anforderungen an Format, Höhe und Größe.
Schritt 4 — Farben festlegen
Es gibt vier Farbfelder, die im Formular unter Hintergrund, Buttons und Inhalt gruppiert sind:
| Feld | Wo es in der Journey erscheint | Standard | Verfügbarkeit |
|---|---|---|---|
| Hintergrundfarbe | Hintergrund des Journey-Bildschirms | #F2F2F7 | Nur Web Journey v3.0 im Redirect |
| Buttons → Hintergrundfarbe | Füllung der Aktionsschaltfläche (z. B. „Selfie aufnehmen") | — | Alle Versionen |
| Buttons → Textfarbe | Text innerhalb der Schaltfläche | — | Alle Versionen |
| Inhaltsfarbe | Titel und Beschreibungen (z. B. „Identitätsprüfung") | #000000 | Alle Versionen |
Bei jedem dieser Felder können Sie den Hex-Wert eingeben (z. B. #1B3FA0) oder auf das
Farbfeld links vom Eingabefeld klicken, um die visuelle Farbauswahl zu öffnen. Solange Sie das
Hintergrund- und das Inhaltsfeld leer lassen, verwendet die Journey den Standardwert, der als
Platzhalter im Feld selbst angezeigt wird.
Die Hintergrundfarbe wird als Verlauf angewendet, nicht als Volltonfarbe. Der eingestellte Ton bildet den oberen Rand des Verlaufs, und die Journey wird zum unteren Bildschirmrand hin zunehmend dunkler. Sehr dunkle Töne ergeben eine fast schwarze Basis — wählen Sie einen mittleren bis hellen Ton, wenn Sie ein gleichmäßiges Ergebnis möchten.
Verwenden Sie die Primärfarbe Ihrer Marke für den Hintergrund der Schaltfläche. Es ist das Element, das der Nutzer zuerst finden muss; hebt es sich nicht ab, verliert die Journey an Konversion.
Wählen Sie die vier Farben als Set, nicht einzeln. Sie beeinflussen sich gegenseitig: Ein dunkler Hintergrund mit schwarzer Inhaltsfarbe macht die Journey unlesbar, und eine helle Schaltfläche auf einer weißen Karte kann schlicht verschwinden. Legen Sie alle vier fest, und prüfen Sie das Ergebnis erst danach in der Vorschau (Schritt 6).
Hintergrundfarbe, Button-Hintergrund-/Textfarbe und Inhaltsfarbe, mit dem Ergebnis in der Vorschau.
Schritt 5 — Buttons konfigurieren
Drei Felder steuern die Aktionsschaltfläche der Journey (z. B. „Selfie aufnehmen"):
| Feld | Was es bewirkt |
|---|---|
| Hintergrundfarbe | Füllfarbe der Schaltfläche |
| Textfarbe | Farbe des Textes innerhalb der Schaltfläche |
| Eckenradius | Abrundung der Ecken, in Pixel |
Referenzwerte für den Eckenradius:
- 0 → rechteckige Schaltfläche, scharfe Ecken
- 8 bis 16 → leicht abgerundete Ecken
- 24 oder mehr → Pillenform (vollständig abgerundet)
Werte über der Hälfte der Schaltflächenhöhe verändern das Ergebnis nicht mehr — die Pillenform ist die Grenze.
Verwenden Sie die Primärfarbe Ihrer Marke für den Hintergrund der Schaltfläche. Es ist das Element, das der Nutzer zuerst finden muss — hebt es sich nicht ab, verliert die Journey an Konversion. Und halten Sie den Eckenradius konsistent mit dem Rest Ihres Produkts, damit sich die Journey wie eine Fortsetzung Ihrer App anfühlt und nicht wie eine Seite eines Drittanbieters.
Hintergrundfarbe, Textfarbe und Eckenradius, mit der Schaltfläche in der Vorschau.
Schritt 6 — Vorschau prüfen, auf Mobilgerät und Desktop
Die Vorschau rechts aktualisiert sich bei jeder Änderung. Verwenden Sie den Auswahlschalter Mobilgerät / Desktop oben, um beide Formate zu prüfen.
Wenn Sie einen ungültigen Farbwert eingeben — einen Farbnamen, einen unvollständigen Hex-Code — erhält das Feld einen roten Rand, und der Wert wird nicht auf die Vorschau angewendet. Korrigieren Sie ihn, bevor Sie fortfahren.
Prüfen Sie immer im Mobilgerät-Modus. Die meisten Endnutzer schließen die Verifizierung über ihr Smartphone ab; das ist das wichtigste Format. Und prüfen Sie drei Kontraste: Button-Text gegen Button-Hintergrund, Button gegen die Journey-Karte und Inhaltsfarbe gegen Hintergrundfarbe. Es kommt häufig vor, dass eine weiße Schaltfläche auf einer weißen Karte konfiguriert wird und diese schlicht verschwindet — die Vorschau dient dazu, das vor der Veröffentlichung aufzudecken.
Auswahlschalter Mobilgerät / Desktop und ein Farbfeld mit hervorgehobenem ungültigem Wert.
Schritt 7 — Veröffentlichen
Die Schaltfläche Veröffentlichen wird aktiviert, sobald eine ausstehende Änderung vorliegt.
- Veröffentlichen speichert die Konfiguration und wendet sie auf die Journey an.
- Abbrechen verwirft alles, was Sie bearbeitet haben, und setzt die Felder auf den zuletzt veröffentlichten Stand zurück.
- Um zum Unico-Standard zurückzukehren, leeren Sie die Farbfelder (sodass der Platzhalter wieder erscheint), entfernen Sie das Logo und veröffentlichen Sie.
Es gibt keinen Versionsverlauf. Wenn Sie eine fehlerhafte Konfiguration veröffentlichen, besteht die Lösung darin, die Werte anzupassen und erneut zu veröffentlichen — es gibt keine Möglichkeit, die vorherige Version mit einem Klick wiederherzustellen. Deshalb ist die Prüfung der Vorschau im vorherigen Schritt so wichtig. Solange Sie noch nicht veröffentlicht haben, löst Abbrechen das Problem.
Schritt 8 — Zulässige Domains registrieren
Nur im Modell iFrame verfügbar.
Im iFrame läuft die Journey eingebettet in Ihrer eigenen Seite. Aus Sicherheitsgründen kann sie nur von den hier registrierten Domains geladen werden.
-
Klicken Sie oben rechts auf Domains konfigurieren.
-
Das Seitenpanel listet die Registrierten Domains auf, jede mit den Aktionen Bearbeiten (Stift) und Löschen (Papierkorb).
-
Um eine hinzuzufügen, klicken Sie auf Domain erstellen, geben Sie die Domain ein und klicken Sie auf Speichern.
Geben Sie die Domain mit ihrem Protokoll ein (https://yoursite.com).
Diese Liste ist eine Sicherheitseinstellung und wird separat gespeichert. Sie wird über die eigene Schaltfläche Speichern des Panels angewendet, nicht über Veröffentlichen auf dem Hauptbildschirm. Registrieren Sie auch Ihre Test- und Staging-Domains, und entfernen Sie nicht mehr genutzte — dies ist die Liste derjenigen, die Ihre Journey einbetten dürfen.
FAQ
Gelten Änderungen für Journeys, die bereits laufen? Nein. Die veröffentlichte Konfiguration gilt für Journeys, die nach der Veröffentlichung gestartet werden.
Warum sehe ich die Felder Logo und Hintergrund nicht? Zwei mögliche Ursachen. Erstens: Sie haben möglicherweise iFrame ausgewählt — im iFrame ist die Journey in Ihre eigene Seite eingebettet, die bereits Hintergrund und Identität liefert. Zweitens: Ihre Web Journey-Version stellt das Feld möglicherweise nicht zur Verfügung. Die Hintergrundfarbe existiert nur bei Web Journey v3.0 im Redirect, und das Logo im iFrame nur bei Web Journey v1.0. Prüfen Sie die Tabelle unter „Bevor Sie beginnen".
Mein Logo wurde beim Hochladen abgelehnt. Warum? Prüfen Sie die drei Anforderungen: PNG-Format, Höhe bis zu 60 px und Größe bis zu 100 KB.
Der Hintergrund wirkt am unteren Bildschirmrand zu dunkel. Das ist erwartet — der Hintergrund wird als Verlauf dargestellt, der von oben nach unten dunkler wird. Wählen Sie einen helleren Grundton.
Die Vorschau stimmt nicht mit meiner echten Journey überein. Die Vorschau basiert auf dem Design der Web Journey v3.0. Wenn Ihre Integration auf einer anderen Version läuft, kann das Ergebnis abweichen — kontaktieren Sie Unico, um ein Versions-Update zu prüfen.
Ich habe eine fehlerhafte Konfiguration veröffentlicht. Wie mache ich das rückgängig? Öffnen Sie den Bildschirm erneut, passen Sie die Werte an (oder leeren Sie sie, um zum Standard zurückzukehren), und veröffentlichen Sie erneut. Es gibt keinen Versionsverlauf. Wenn Sie noch nicht veröffentlicht haben, klicken Sie einfach auf Abbrechen.
Wer hat die Anpassung in meinem Konto geändert? Der Bildschirm zeigt diesen Verlauf nicht an. Um herauszufinden, welcher Benutzer die letzte Änderung vorgenommen hat und wann, kontaktieren Sie den Unico-Support.
Kurzreferenz
IDCloud Portal
└─ Einstellungen (Zahnradsymbol in der Seitenleiste)
└─ Tab Anpassung
├─ iFrame ............... Buttons (Hintergrund, Textfarbe, Eckenradius)
│ Inhalt (Inhaltsfarbe)
│ + Domains konfigurieren
└─ Redirect oder SDK .... Logo (PNG, 60 px, 100 KB)
Hintergrund (Farbe, als Verlauf angewendet)
Buttons (Hintergrund, Textfarbe, Eckenradius)
Inhalt (Inhaltsfarbe)
Live-Vorschau · Mobilgerät / Desktop · Abbrechen · Veröffentlichen