Ein Pop-up erstellen
- 18 Nov 2024
- 11 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
Ein Pop-up erstellen
- Aktualisiert am 18 Nov 2024
- 11 Minuten zu lesen
-
Drucken
-
DunkelLicht
-
pdf
Artikel-Zusammenfassung
Fanden Sie diese Zusammenfassung hilfreich?
Vielen Dank für Ihr Feedback
Pop-ups konzentrieren die Aufmerksamkeit Ihrer Benutzer auf etwas, das ihre unmittelbare Aufmerksamkeit benötigt, sobald sie auf eine bestimmte Seite in Ihrer gespiegelten Anwendung gehen. Sie können einen Flow, ein Video, ein Bild oder ein GIF an das Pop-up anhängen. Erstellen Sie Pop-ups auf Mirror, um rechtzeitige Benachrichtigungen und Updates an Ihre Benutzer zu senden.
Popup-Erstellung ist ein zweistufiger Prozess:
Schritt 1: Das Pop-up mit Hilfe des Visual Editor erstellen
Schritt 2: Die Popup-Sichtbarkeitsregeln konfigurieren
Schritt 1: Das Pop-up mit dem Visual Editor erstellen
Erstellen Sie ein Pop-up auf die folgenden zwei Arten:
- Pop-up Erstellung mit Visual Editor über Whatfix Studio
- Pop-up-Erstellung mit Visual Editor über das Whatfix Dashboard
Pop-up-Erstellung mit dem Visual Editor über Whatfix Studio
Der Visual Editor ermöglicht Ihnen die einfache Gestalten und Anpassen der Komponenten in Whatfix Pop-Ups und vermeidet so die Notwendigkeit der Codebearbeitung. Mit der Ziehen und Ablegen Funktion können Inhalt-Ersteller Pop-ups, Komponenten hinzufügen oder löschen und Anpassungen direkt in der UI hinzufügen.
Verwenden Sie die folgenden Schritte, um ein Pop-up mit dem Visual Editor durch Whatfix Studio zu erstellen:
-
Melden Sie sich bei der Anwendung an, in der Sie Inhalte erstellen möchten, und starten Sie dann den Whatfix Studio.
-
Auf dem Whatfix Studio, klicken Sie Pop-up.
-
Wählen Sie in der Dropdown-Liste Thema das gewünschte Farbthema aus.
Note
Sie können auch Ihre eigene Farbe verwenden, indem Sie den Hex-Farbcode in das Textfeld eingeben.
-
Wählen Sie eine Vorlage, zum Beispiel Eigenschaft Onboarding.
-
Einen Namen für das Pop-up-Segment eingeben.
-
Auf der Pop-up-Vorlage bearbeiten Sie den Titel und die Beschreibung für Ihr Pop-up.
your title goes here
Um den Text anzupassen und auszurichten, schweben Sie mit dem Cursor über einen beliebigen Text und doppelklicken Sie dann auf die {{glossary.Rich Text Editor}}**.
Für weitere Informationen zum Rich Text Editor sehen Sie Rich Text Inhalte in einem Pop-up mithilfe des Visual Editors hinzufügen.
::::9::::
- Bearbeiten Sie in dem Pop-up-Template den Button Namen für Ihr Pop-up.
your title goes here
- Um die Button-Konfigurationen zu ändern, schweben Sie den Mauscursor über den Button und klicken Sie dann, um das Button-konfigurationsmenü zu öffnen.
- Klicken Sie auf das Dropdown-Menü neben Aktion, und wählen Sie dann die Button-aktion aus.
Die folgende Tabelle listet die verschiedenen Arten der Button Action, ihr Verhalten und ihre Beschreibungen auf:
| Button Aktion | Verhalten |
|---|---|
| Flow beginnen | Wann der Benutzer auf diesen Button klickt, wird er zu einem Whatfix Flow gebracht, der an den Button angehängt wird. |
| URL anhängen | Wenn der Benutzer auf diesen Button klickt, wird er an die URL weitergeleitet, die an den Button angehängt ist. |
| Skip | Wenn der Benutzer diesen Button anklickt, das betreffende Pop-up ist ausgelassen und sie sehen das Pop-up weiter, bis sie auf den Schließen oder Nicht erneut anzeigen Button klicken. |
| Schließen | Wann der Benutzer auf diesen Button klickt, schließt er das jeweilige Pop-Up. |
your title goes here
-
Ändern Sie den Button Typ auf {{glossary.Primary Button}} oder {{glossary.Secondary Button}}**.
</div>
-
Klicken Sie auf das Button Stil Symbol, um die Farbe, Hover-Farbe und Eckenradius des Buttons zu ändern.
</div>
-
Klicken Sie auf das Button Größe Symbol, um den Button zu vergrößern.
</div>
-
Klicken Sie auf das Horizontale Ausrichten Symbol, um den Button horizontal auszurichten.
</div>
-
Klicken Sie auf das Vertikal ausrichten Symbol, um den Button vertikal auszurichten.
</div>
- Im Rich Text Editor, klicken Sie auf das +-Symbol. Das Dialogfeld Komponente hinzufügen öffnet sich.
- Mit Komponente hinzufügen, fügen Sie Text, Button, Bild/GIF, Video und Audio zum Pop-up hinzu.
Note
-
Fügen Sie bis zu 24 Komponenten zum Pop-Up hinzu, indem Sie den Reiter Komponente hinzufügen verwenden.
</div>
-
Das Pop-Up folgt einem strukturierten Rasterlayout mit einer 6x4-Konfiguration von 6 Zeilen und 4 Spalten.
-
Der Visual Editor unterstützt maximal 6 Zeilen und 4 Spalten aus 24 Komponenten der Pop-up Vorlage.
your title goes here
-
Mit Ziehen und Ablegen können Sie verschiedene Komponenten auf dem Pop-Up verschieben oder neu positionieren, sowohl vertikal (Zeilenweise) als auch horizontal (spaltenweise).
-
Jede Komponente hat zwei {{glossary.Drag Handlers}}, den {{glossary.Horizontal Drag Handler}} und den {{glossary.Vertical Drag Handler}} zum Verschieben der Komponente.
</div>
your title goes here
Wenn Sie Änderungen am Pop-up mit Hilfe der Drag Handlers vornehmen, können Sie bestimmte Änderungen leider nicht rückgängig machen. In diesem Fall müssen Sie das Pop-up möglicherweise neu erstellen. Weitere Informationen finden Sie unter Kann ich die Änderungen mit den Drag-Handlern rückgängig machen?.
- Unter KONTROLLE wählen Sie, ob Sie das 'x'-Symbol auf dem Popup anzeigen und Nicht mehr anzeigen möchten, indem Sie die Toggle aktivieren.\
your title goes here
Die folgende Tabelle listet die verschiedenen Arten von Button-Verhalten und Beschreibungen auf, die einem Pop-Up hinzugefügt werden können:
| Button | Verhalten | Beispiel: Ein Pop-up wird zweimal angezeigt |
| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Schließen Button oder Symbol "X** | Wenn Sie auf eine dieser Button klicken, wird das Pop-up geschlossen und die Anzeige wird als eine Ansicht gezählt | Ein Benutzer, der **Schließen** klickt und das Pop-up beendet, wird das Pop-up anhand der Anzeigeanzahl wieder sehen. |
| **Mir nicht mehr anzeigen** | Der Benutzer klickt auf das Kontrollkästchen, um sicherzustellen, dass das Pop-up nie wieder erscheint. Der Anzahl sinkt auf Null. | Ein Benutzer, der auf das Kästchen **Nicht mehr anzeigen** klickt, wird das Pop-up nie wieder sehen. Es spielt keine Rolle, wenn die Anzahl nicht erreicht wurde. |
| ::: | | |
your title goes here
- Um die Pop-up Background Color zu ändern, wählen Sie die Farbe aus der vorhandenen Farbpalette oder geben Sie den Hex-Code der gewünschten Farbe ein.
- Um ein Pop-up Background Image hinzuzufügen, klicken Sie Bild hochladen.
- Sie können die URL des Bildes, das Sie einfügen möchten, einsetzen oder ein Bild von Ihrem lokalen Laufwerk oder der Whatfix-Galerie hochladen.
- Nur .jpg und .png Bildformate mit einer Größe von 4 MB werden unterstützt.
:::
13. Um die Popup-Position zu konfigurieren, aktivieren Sie den Toggle Popup positionieren.
your title goes here
- Standardmäßig wird das Pop-up in der Mitte der Seite angezeigt, und Endbenutzer können nicht mit anderen Elementen der Anwendung interagieren, solange sie das Pop-up schließen/interagieren.
- Wenn Sie den Toggle Pop positionieren aktivieren, können Ihre Endbenutzer auch mit anderen Elementen in Ihrer Anwendung interagieren.
- Stellen Sie die Position des Pop-up ein.\
- Klicken Sie Popup speichern.\
Pop-up-Erstellung mit Visual Editor über das Dashboard
Verwenden Sie die folgenden Schritte, um Pop-ups über das Dashboard zu erstellen:
-
Auf dem Whatfix Guidance Dashboard, klicken Sie Widgets.
-
Klicken Sie Pop-ups.
- Klicken Sie Widget erstellen.
- Klicken Sie Pop Up.
- Wählen Sie das Farbschema über die Dropdown-Liste Theme aus.
your title goes here
Verwenden Sie Ihre benutzerdefinierte Farbe, indem Sie den Hex-Farbcode in das Textfeld eingeben.
-
Wählen Sie die Pop-up-Vorlage.
-
Geben Sie einen Namen für das Pop-up-Segment ein, indem Sie oben auf den Unbenannten Pop-up Text klicken.
- Bearbeiten Sie den Titel, die Beschreibung und den Button Namen.
your title goes here
Um den Text anzupassen und auszurichten, schweben Sie mit dem Cursor über einen beliebigen Text und doppelklicken Sie dann auf die {{glossary.Rich Text Editor}}**.
Für weitere Informationen zum Rich Text Editor, sehen Sie Rich Text Inhalte in einem Pop-up mithilfe des Visual Editors hinzufügen.
::::9::::
- Bearbeiten Sie in dem Pop-up Vorlage den Button Namen für Ihr Pop-up.\
your title goes here
- Um die Button-Konfigurationen zu ändern, schweben Sie den Mauscursor über den Button und klicken Sie dann, um das Button-konfigurationsmenü zu öffnen.
- Klicken Sie auf das Dropdown-Menü neben Aktion, und wählen Sie dann die Button-aktion aus.
| Button-Aktion | Verhalten |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Flow beginnen** | Wann der Benutzer auf diesen Button klickt, wird er zu einem Whatfix Flow gebracht, der an den Button angehängt wird. |
| **URL anhängen** | Wann der Benutzer auf den Button klickt, wird er zu der URL weitergeleitet, die mit dem Button verknüpft ist. |
| **Skip** | Wann der Benutzer auf den Button klickt, überspringt er dieses bestimmte Pop-up und sieht das Pop-up so lange, bis er auf den Button Schließen oder Nicht mehr anzeigen klickt. |
| **Schließen** | Wenn der Benutzer auf diesen Button klickt, schließt er das jeweilige Pop-Up. |
your title goes here
Zusätzlich die folgenden Änderungen im Button-konfigurationsmenü vornehmen:
-
Ändern Sie den Button Typ auf {{glossary.Primary Button}} oder {{glossary.Secondary Button}}**.
</div>
-
Klicken Sie auf das Button Stil Symbol, um die Farbe, Hover-Farbe und Eckenradius des Buttons zu ändern.
</div>
-
Klicken Sie auf das Button Größe Symbol, um den Button zu vergrößern.
</div>
-
Klicken Sie auf das Horizontale Ausrichten Symbol, um den Button horizontal auszurichten.
</div>
-
Klicken Sie auf das Vertikal ausrichten Symbol, um den Button vertikal auszurichten.
</div>
- Im Rich Text Editor, klicken Sie auf das +-Symbol. Das Dialogfeld Komponente hinzufügen öffnet sich.
- Mit Komponente hinzufügen, fügen Sie Text, Button, Bild/GIF, Video und Audio zum Pop-up hinzu.
Note
-
Fügen Sie bis zu 24 Komponenten zum Pop-Up hinzu, indem Sie den Reiter Komponente hinzufügen verwenden.
</div>
-
Das Pop-Up folgt einem strukturierten Rasterlayout mit einer 6x4-Konfiguration von 6 Zeilen und 4 Spalten.
-
Der Visual Editor unterstützt maximal 6 Zeilen und 4 Spalten aus 24 Komponenten der Pop-up Vorlage.
your title goes here
-
Mit Ziehen und Ablegen können Sie verschiedene Komponenten auf dem Pop-Up verschieben oder neu positionieren, sowohl vertikal (Zeilenweise) als auch horizontal (spaltenweise).
-
Jede Komponente hat zwei {{glossary.Drag Handlers}}, den {{glossary.Horizontal Drag Handler}} und den {{glossary.Vertical Drag Handler}} zum Verschieben der Komponente.
</div>
your title goes here
Wann Sie Änderungen am Pop-up mit Hilfe der Drag Handlers vornehmen, können Sie bestimmte Änderungen leider nicht rückgängig machen. In diesem Fall müssen Sie das Pop-up möglicherweise neu erstellen. Weitere Informationen finden Sie unter Kann ich die Änderungen mit den Drag-Handlern rückgängig machen?.
- Wählen Sie aus, ob Sie das X-Symbol im Popup und Nicht erneut anzeigen Optionen anzeigen möchten, indem Sie die entsprechenden Schalter unter Kontrolle aktivieren.
your title goes here
| Button | Verhalten | Beispiel: Ein Pop-up wird zweimal angezeigt |
|---|---|---|
| Schließen Button oder Symbol "X | Wenn Sie auf eine dieser Button klicken, wird das Pop-up geschlossen und die Anzeige wird als eine Ansicht gezählt | Ein Benutzer, der Schließen klickt und das Pop-up beendet, wird das Pop-up anhand der Anzeigeanzahl wieder sehen. |
| Mir nicht mehr anzeigen | Der Benutzer klickt auf das Kontrollkästchen, um sicherzustellen, dass das Pop-up nie wieder erscheint. Der Anzahl sinkt auf Null. | Ein Benutzer, der auf das Kontrollkästchen Nicht mehr anzeigen klickt, sieht das Pop-up nie wieder. Es spielt keine Rolle, wenn die Anzahl nicht erreicht wurde. |
| ::: |
your title goes here
- Um die Pop-up Background Color zu ändern, wählen Sie die Farbe aus der vorhandenen Farbpalette oder geben Sie den Hex-Code der gewünschten Farbe ein.
- Um ein Pop-up Background Image hinzuzufügen, klicken Sie Bild hochladen.
- Sie können die URL des Bildes, das Sie einfügen möchten, einfügen oder ein Bild von Ihrem lokalen Laufwerk oder der Whatfix-Galerie hochladen.
- Nur .jpg und .png Bildformate mit einer Größe von 4 MB werden unterstützt.
- Um die Popup-Position zu konfigurieren, aktivieren Sie den Toggle Popup positionieren.
your title goes here
- Standardmäßig wird das Pop-up in der Mitte der Seite angezeigt, und Endbenutzer können nicht mit anderen Elementen der Anwendung interagieren, solange sie das Pop-up schließen/interagieren.
- Wenn Sie den Toggle Pop positionieren aktivieren, können Ihre Endbenutzer auch mit anderen Elementen in Ihrer Anwendung interagieren.
- Stellen Sie die Position des Pop-up ein.
Note
Wenn Ihr Endbenutzer einen mobilen Browser benutzt, dann auch wenn Sie das Popup positionieren aktiviert und die Pop-up-Position konfiguriert haben Ihr Endbenutzer sieht das Popup in der Mitte der Seite. Der Grund dafür ist der begrenzte Bildschirmplatz auf mobilen Browsern.
- Klicken Sie Speichern um das Pop-Up zu speichern, oder fahren Sie mit der Konfiguration des Pop-ups.
Schritt 2: Die Pop-up Sichtbarkeitsregeln konfigurieren
Die Pop-up Sichtbarkeitsregeln konfigurieren
Gehen Sie wie folgt vor, um ein Pop-up zu konfigurieren:
-
Auf dem Whatfix Guidance Dashboard, klicken Sie Widgets.
-
Klicken Sie Pop-ups.
-
Schweben Sie den Mauscursor über das Pop-up-Segment, das Sie konfigurieren möchten, und klicken Sie dann auf das Symbol Bearbeiten.
- Klicken Sie Sichtbarkeitsregeln festlegen →.
- Legen Sie die Wo Sichtbarkeitsregeln fest, damit das Pop-up erscheint.
your title goes here
Wenn Sie mehrere Pop-ups mit unterschiedlichen Sichtbarkeitsregeln festgelegt haben, um auf derselben Seite angezeigt zu werden, wird das Pop-up, das mit User Action abgeschlossen als Sichtbarkeitsregel konfiguriert ist, immer zuerst angezeigt, wenn der Endbenutzer die User Action ausführt.
- Festlegen Sie der Wann Sichtbarkeitsregeln für das Pop-up. Sehen Sie, Pop-ups planen
your title goes here
Wenn das Pop-up eine Überspringen Button hat und wenn Ihre Endbenutzer auf den Button "Überspringen" klicken, es wird nicht als Interaktion betrachtet und das Pop-up wird ihnen unabhängig von den eingegebenen Vorkommnissen angezeigt.
:::7. Klicken Sie Später fertigstellen oder Pop-up bearbeiten, je nach Ihrer Präferenz.
- Später beenden: Speichert das Pop-up als Entwurf und markiert es als inaktiv.
- Pop-up bearbeiten: Bringt Sie zurück zum Pop-up, wo Sie Einstellungen festlegen können.8. Wenn Sie mit der Erstellung des Pop-ups fertig sind, wählen Sie das Widget aus und klicken Sie dann an Bereit senden.
- Gehen Sie zur Bereit Phase und wählen Sie das Segment aus, das Sie in die Produktionsstufe verschieben möchten, und klicken Sie dann Zur Produktion schieben.
your title goes here
Nach dem Drücken des Pop-up in die Produktion analysieren Sie das Engagement der Endbenutzer mit dem Pop-up aus verschiedenen Städten, Ländern und mehr, mit Hilfe von Product Analytics. Für weitere Informationen sehen Sie, Wie kann ich Analytics von Pop-Ups mit Trend Insights sehen?
- Klicken Sie Später fertigstellen oder Pop-up bearbeiten, je nach Ihrer Präferenz.
- Später fertigstellen - Speichert das Pop-up als Entwurf und markiert es als inaktiv.
- Pop-up bearbeiten: Bringt Sie zurück zum Pop-up, wo Sie Einstellungen festlegen können.
-
Wenn Sie mit der Erstellung des Pop-ups fertig sind, wählen Sie das Widget aus und klicken Sie dann an Bereit senden.
-
Gehen Sie zur Bereit Phase und wählen Sie das Segment aus, das Sie in die Produktionsstufe verschieben möchten, und klicken Sie dann Zur Produktion schieben.
your title goes here
Nachdem das Pop-up in die Produktion geschoben wurde, analysieren Sie die Interaktion von Endbenutzern mit dem Pop-up aus verschiedenen Städten, Ländern und mehr mithilfe von Product Analytics. Für weitere Informationen sehen Sie Wie kann ich Analytics von Pop-Ups mit Trend-Insights sehen?
Note:
Wenn Sie die JS Embed method verwenden, um Whatfix-Inhalte zu testen oder zu veröffentlichen, fügen Sie die entsprechenden Bedingungen in Map Stages hinzu. Dadurch wird sichergestellt, dass der Inhalt in der richtigen Instanz angezeigt wird. Weitere Informationen finden Sie unter Wie fügt man Bedingungen in Map Stages hinzu? (Melden Sie sich an, um den Artikel anzuzeigen)
War dieser Artikel hilfreich?