--- title: Journey-Anpassung description: Konfigurieren Sie die visuelle Identität der Journey — Logo, Farben, Hintergrund und Button-Form — direkt im IDCloud Portal, mit Live-Vorschau. canonical: https://developer.unico.io/de/dual-api/product-guide/portal-idcloud/settings/journey-customization locale: de generated_by: markdown-export --- **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. :::info **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. :::info 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 hervorgehobenem Zahnradsymbol in der Seitenleiste](/img/product-guide/journey-customization/en/01-settings-tab.png) *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. ![Vollständiger Bildschirm für die Anpassung: Modellwähler, Formular und Vorschau](/img/product-guide/journey-customization/en/02-integration-model.png) *Auswahl von iFrame / Redirect oder SDK, Formular und Vorschau.* ### Schritt 3 — Logo hochladen :::warning 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](/img/product-guide/journey-customization/en/03-customization-form.png) *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). ![Felder für Hintergrundfarbe, Button-Farben und Inhaltsfarbe, mit dem Ergebnis in der Vorschau](/img/product-guide/journey-customization/en/04-colors.png) *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. ![Feld für den Eckenradius, mit der Schaltfläche in der Vorschau](/img/product-guide/journey-customization/en/05-button-border-radius.png) *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 in der Vorschau](/img/product-guide/journey-customization/en/06-live-preview.png) *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 :::warning 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. 1. Klicken Sie oben rechts auf **Domains konfigurieren**. ![Schaltfläche „Domains konfigurieren", hervorgehoben](/img/product-guide/journey-customization/en/07-configure-domains-button.png) 2. Das Seitenpanel listet die **Registrierten Domains** auf, jede mit den Aktionen **Bearbeiten** (Stift) und **Löschen** (Papierkorb). ![Panel „Domains konfigurieren" mit der Liste der registrierten Domains](/img/product-guide/journey-customization/en/08-domains-list.png) 3. Um eine hinzuzufügen, klicken Sie auf **Domain erstellen**, geben Sie die Domain ein und klicken Sie auf **Speichern**. ![Formular „Domain erstellen"](/img/product-guide/journey-customization/en/09-create-domain.png) 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 ```text 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 ```