Web-Popup-Inhalt

Web-Popup-Inhalt ist das visuelle Layout, das Besucher sehen, wenn ein Web-Popup auf Ihrer Website erscheint. Erstellen Sie es unter Content und fügen Sie es dann einer Web-Popup-Kampagne hinzu.

Web-Popup-Inhalt erstellen

1. Gehen Sie zu Content → Web popup content.
2. Klicken Sie auf Create web popup content.
3. Wählen Sie eine Startvorlage aus der Galerie. Verwenden Sie das Dropdown-Menü für Kategorien oben rechts, um nach Anwendungsfällen zu filtern (z. B. Aktionen & Angebote, Gaming & Marktplätze oder Feedback & Umfragen), oder lassen Sie es auf Alle Vorlagen. Die Kategorie Leere Layouts enthält die einfachen Ausgangspunkte, einschließlich Modal + Abonnementformular, das bereits einen Abonnementformular-Block enthält.

4. Sobald Sie eine Vorlage ausgewählt haben, passen Sie das Popup im Editor an.

Das Popup benennen

Klicken Sie auf den Popup-Namen in der oberen Leiste, um ihn zu bearbeiten. Der Name identifiziert diesen Inhalt innerhalb von Pushwoosh, in der Inhaltsliste und im Kampagnen-Assistenten. Website-Besucher sehen ihn nicht.

Popup-Einstellungen bearbeiten

Passen Sie das Erscheinungsbild und die Position des Popups im Einstellungsfeld links von der Arbeitsfläche an:

Hinweis

Diese Einstellungen steuern nur das Design des Popups. Zielgruppe, Seitenausrichtung, Verzögerung, Häufigkeit und Starteinstellungen werden in der Web-Popup-Kampagne konfiguriert.

Bilder und Video

Wenn das Layout einen oder mehrere Medienblöcke enthält, erhält jeder seinen eigenen Block oben im Panel mit einer Vorschau und Steuerelementen.

Klicken Sie auf Bild ändern, um eine Datei aus dem Media Store Ihres Projekts auszuwählen, oder stellen Sie Medien auf Video ein, um anstelle eines statischen Bildes ein Video abzuspielen.

Unter der Vorschau:

• Medien: Bild oder Video.
• Anpassung: wie das Bild oder Poster seinen Rahmen füllt: Natürlich, Abdecken oder Enthalten. Wird nicht für ein Hintergrundbild angezeigt, das immer seinen Bereich abdeckt.
• Weichzeichnen: das Bild oder Poster weichzeichnen, von 0 bis 20 px.
• Abdunkeln: nur für Hintergrundmedien. Fügt eine dunkle Blende über das Bild oder Video hinzu, damit der darüber platzierte Text lesbar bleibt, von 0 bis 100 %.

Wenn Sie Medien auf Video einstellen, werden vier weitere Felder hinzugefügt:

• Video-URL: ein direkter Link zur Videodatei. Video akzeptiert nur eine externe URL. Sie können kein Video in den Media Store hochladen. Exportieren Sie es als MP4 (H.264-Video, AAC-Audio) mit aktiviertem “Fast Start” (manchmal auch “web-optimiert” genannt), damit der Browser mit der Wiedergabe beginnen kann, bevor die gesamte Datei heruntergeladen ist. Wenn die URL nicht geladen werden kann, sehen die Besucher nur das Poster.
• Schleife: das Video kontinuierlich wiedergeben, anstatt nach einer Wiedergabe anzuhalten.
• Steuerelemente anzeigen: die integrierten Wiedergabe-, Pause- und Lautstärkeregler des Browsers anzeigen. Videos starten immer stummgeschaltet, und ohne diese Option haben Besucher keine Möglichkeit, den Ton einzuschalten.
• Poster-URL: das Bild, das angezeigt wird, während das Video lädt. Es ist optional, wird aber empfohlen: Es ist auch das Einzige, was einem Besucher angezeigt wird, dessen Browser noch ein älteres Popup-Skript ausführt, das kein Video unterstützt. Wenn Sie es also leer lassen, sieht dieser Besucher nichts, wo das Video wäre.

Einige Layouts fügen auch einen Abschnitt Layout mit Platzierungseinstellungen für den Medienblock hinzu:

• Bildbreite: Anteil an der Popup-Breite in Prozent.
• Bildposition: Links oder Rechts, für Layouts mit Medien neben dem Text.

Der Abschnitt Layout erscheint nur, wenn das aktuelle Layout solche Einstellungen hat. Bei einem Layout mit unterer Leiste bietet er Schaltflächenbreite anstelle von Bildsteuerelementen.

Popup-Größe und -Stil

Im Abschnitt Popup:

• Breite, Höhe (leer = auto): lassen Sie beide leer für ein Popup, das sich an seinen Inhalt anpasst, oder legen Sie eine feste Größe in Pixeln fest. In einem Popup mit mehreren Seiten hat jede Seite ihre eigene Größe.
• Eckenradius, Schatten: die Eckenabrundung und der Schlagschatten des Popups.
• Animation: wie das Popup erscheint: Keine, Einblenden oder Hineingleiten.

Farben

Klicken Sie auf Farben, um die Farbpalette des Popups zu erweitern:

• Hintergrund, Akzent (Schaltflächen): der Popup-Hintergrund und die Akzentfarbe, die auf Schaltflächen angewendet wird.
• Text, Sekundärtext: die Farbe des Haupttextes und des sekundären Textes wie Bildunterschriften und Eyebrows.
• Text über Bild: wird nur für Layouts mit Text über einem Hintergrundbild angezeigt. Legt die Farbe für diesen Text fest.

Dunkelmodus

Aktivieren Sie den Dunkelmodus, um dem Popup eine zweite Palette für Besucher zu geben, deren Gerät auf ein dunkles Farbschema eingestellt ist. Wenn er ausgeschaltet ist, wird das Popup immer mit der obigen hellen Palette bei jedem Besucher gerendert.

Sobald der Dunkelmodus eingeschaltet ist:

• Verwenden Sie den Schalter Hell / Dunkel über den Farbfeldern, um auszuwählen, welche Palette Sie bearbeiten. Die Arbeitsfläche wird in diesem Schema neu gezeichnet, sodass Sie das Popup so überprüfen können, wie es in jedem Modus tatsächlich aussehen wird.
• Klicken Sie auf Automatisch aus Hell, um die dunkle Palette aus den aktuellen hellen Farben (neu) zu generieren: Oberflächen werden dunkel und Texte hell, während Akzent und Text über Bild unverändert übernommen werden. Bearbeiten Sie anschließend eines der fünf Felder, um das Ergebnis zu verfeinern.
• Das Ausschalten des Dunkelmodus verwirft die dunkle Palette nicht – sie wird beibehalten, sodass das erneute Einschalten Ihre Bearbeitungen wiederherstellt, anstatt sie von Grund auf neu zu generieren.

Der Browser eines Besuchers entscheidet, welche Palette er sieht, basierend auf seiner systemweiten Dunkelmodus-Einstellung – es gibt keinen Hell/Dunkel-Schalter auf dem Popup selbst. Eine Website kann ein Schema für alle erzwingen, unabhängig von der Betriebssystemeinstellung; siehe webPopups.colorScheme in der Web-SDK-Dokumentation.

Platzierung und Überlagerung

Im Abschnitt PLATZIERUNG:

• Position: Wählen Sie mit dem 3×3-Raster aus, wo das Popup auf der Seite verankert wird.
• Randabstand: Legen Sie den Abstand in Pixeln vom ausgewählten Rand fest.

Im Abschnitt ÜBERLAGERUNG:

• Seite dahinter abdunkeln: Aktivieren Sie diese Option, um den Rest der Seite abzudunkeln, während das Popup angezeigt wird.
• Farbe, Deckkraft: Legen Sie die Farbe und Deckkraft der Überlagerung von 0 bis 1 fest.

Text bearbeiten

Klicken Sie auf einen beliebigen Textblock im Popup, um ihn direkt zu bearbeiten. Eine Symbolleiste erscheint darüber:

• Wenden Sie fette, kursive oder unterstrichene Formatierung an.
• Fügen Sie einen Link hinzu oder entfernen Sie ihn.
• Legen Sie die Ausrichtung links, zentriert oder rechts fest.
• Wählen Sie einen Textstil: Symbol, Eyebrow, Überschrift 1–3, Textkörper oder Bildunterschrift.

Schaltflächen bearbeiten

Klicken Sie auf eine Schaltfläche, um ihre Symbolleiste zu öffnen:

• Wählen Sie den Schaltflächenstil: Primär oder Sekundär.
• Wählen Sie, was die Schaltfläche tut:
  • Einen Link öffnen: Geben Sie die Ziel-URL ein.
  • Das Popup schließen.
  • Gehe zu Seite: Wählen Sie eine andere Seite des Popups aus, zu der gewechselt werden soll. Diese Option erscheint, sobald das Popup mehr als eine Seite hat. Siehe Mit mehreren Seiten arbeiten.

Tipp

Wenn ein Textblock, eine Schaltfläche oder ein anderes Element ausgewählt ist, klicken Sie in seiner Symbolleiste auf Hinzufügen und wählen Sie Text, Schaltfläche, Symbol, Countdown, Themenauswahl, Bewertung oder Abonnementformular, um diesen Block darunter einzufügen. Verwenden Sie die Auf- und Ab-Pfeile, um ihn auf der Seite zu verschieben, und das Löschsymbol, um ihn zu entfernen. Das letzte verbleibende Element einer Seite kann nicht gelöscht werden.

Wenn ein Abschnitt des Popups keine Elemente enthält, werden nur die Schaltflächen + Text, + Schaltfläche und + Formular angezeigt. Um einen Symbol-, Countdown-, Themenauswahl- oder Bewertungsblock hinzuzufügen, fügen Sie zuerst einen Text oder eine Schaltfläche hinzu und verwenden Sie dann dessen Hinzufügen-Menü.

Ein Abonnementformular hinzufügen

Fügen Sie einen Abonnementformular-Block hinzu, um E-Mail-Anmeldungen und andere Felder direkt im Popup zu sammeln. Erfahren Sie mehr über Abonnementformulare.

Den Block hinzufügen

1. Wählen Sie einen Textblock, eine Schaltfläche oder ein anderes Element auf der Arbeitsfläche aus.
2. Klicken Sie in seiner Symbolleiste auf Hinzufügen.
3. Wählen Sie Abonnementformular. Der Block erscheint sofort mit einem Standardfeld E-Mail und einer Schaltfläche Abonnieren.

Eine Formularquelle auswählen

Klicken Sie auf den Abonnementformular-Block, um die FORMULAR-Symbolleiste zu öffnen. Das erste Dropdown-Menü verknüpft den Block mit einem Abonnementformular in Ihrem Projekt. Sie können ein neues Formular erstellen oder ein bereits vorhandenes auswählen:

Option	Wann zu verwenden
Neues Formular – bei Speicherung erstellt (Standard)	Schnellster Start: Pushwoosh erstellt das Formular für Sie, wenn Sie das Popup speichern, benannt “Popup-Name – Web-Popup”.
+ Neues Formular erstellen…	Sie möchten das Formular benennen und einrichten, bevor Sie das Popup speichern. Öffnet ein Dialogfeld Neues Abonnementformular – geben Sie einen Namen ein, legen Sie dann seine Felder, den Senden-Text und den Datenschutz wie unten beschrieben fest und klicken Sie auf Erstellen.
Ein vorhandenes Formular aus dem Dropdown-Menü	Verwenden Sie ein Formular wieder, das bereits Abonnenten oder eine Double-Opt-in-Konfiguration hat.

Wichtig

Wenn Sie ein vorhandenes Formular aus dem Dropdown-Menü auswählen, wird dieses Abonnementformular durch das Speichern dieses Popups für das gesamte Projekt aktualisiert. Die Felder, der Text der Senden-Schaltfläche und die Erfolgsmeldungen, die Sie in diesem Block festlegen, ersetzen die bisherigen Einstellungen dieses Formulars. Das schließt das auf Ihrer Website eingebettete Formular und das Formular unter Audience → Subscription forms ein.

Andere Web-Popups, die dasselbe Formular verwenden, werden nicht aktualisiert. Jedes Popup behält seine eigene Kopie der Felder und Texte des Blocks, bis Sie dieses Popup erneut öffnen und speichern.

Felder und Übermittlungsverhalten festlegen

1. Legen Sie den Stil der Senden-Schaltfläche in der FORMULAR-Symbolleiste fest:
   • Primär: gefüllte Schaltfläche in der Akzent-Farbe des Popups. Am besten, wenn Abonnieren die Hauptaktion auf der Seite ist.
   • Sekundär: umrandete Schaltfläche mit einem Rand und einer Beschriftung in Akzentfarbe. Am besten, wenn das Popup bereits eine primäre Schaltfläche hat oder Sie ein leichteres Aussehen wünschen.
2. Aktivieren Sie Datenschutz, um eine Zeile zur Datenschutzeinwilligung unter dem Formular hinzuzufügen, und geben Sie dann die URL Ihrer Datenschutzrichtlinie in das erscheinende Feld ein.

3. Klicken Sie auf Felder…, um ein Popover zu öffnen, in dem Sie E-Mail (immer erforderlich) beibehalten und Vorname, Nachname, Telefon oder Benutzerdefiniert hinzufügen können, und legen Sie die Texte für Erfolg und E-Mail bestätigen fest, die nach der Übermittlung durch einen Besucher angezeigt werden.

Einen Countdown hinzufügen

Fügen Sie einen Countdown-Block hinzu, um Dringlichkeit mit einer Frist zu erzeugen, die live auf dem Popup herunterzählt.

1. Wählen Sie einen Textblock, eine Schaltfläche oder ein anderes Element auf der Arbeitsfläche aus.
2. Klicken Sie in seiner Symbolleiste auf Hinzufügen und wählen Sie Countdown.
3. Klicken Sie auf den Countdown, um seine Symbolleiste zu öffnen:
   • Frist: das Datum und die Uhrzeit, zu der der Countdown Null erreicht.
   • Zeitzone: die Zeitzone, in der die Frist gelesen wird. Lassen Sie sie für UTC leer.
   • Sprache: die Sprache der Einheitenbeschriftungen (Tage, Stunden usw.). Lassen Sie sie auf Englisch (Standard) oder wählen Sie aus 13 anderen Sprachen.
   • Beschriftungen: aktivieren, um Einheitenbeschriftungen neben den Zahlen anzuzeigen.
   • Wenn die Frist abläuft:
     • Nullen anzeigen: der Countdown zeigt weiterhin 00:00:00 an.
     • Das Popup nicht anzeigen: das gesamte Popup wird übersprungen, sobald die Frist in der Vergangenheit liegt.
     • Gehe zu Seite: springen Sie zu einer anderen Seite des Popups, wenn die Frist abläuft. Wird nur angeboten, wenn das Popup mehr als eine Seite hat – wählen Sie die Zielseite aus dem erscheinenden Dropdown-Menü. Siehe Mit mehreren Seiten arbeiten.

Hinweis

Die Frist wird in der hier ausgewählten Zeitzone gelesen, nicht in der eigenen Zeitzone des Besuchers – derselbe Vertrag wie beim Countdown-Block im E-Mail-Editor. Lassen Sie das Feld leer, und die Frist wird als UTC gelesen.

Hinweis

Mit Das Popup nicht anzeigen prüft Pushwoosh die Frist direkt bevor das Popup erscheinen würde. Ein auf diese Weise übersprungenes Popup zählt nicht gegen die Häufigkeit Einmal pro Besucher, verbraucht also nicht die eine Chance des Besuchers, es zu sehen.

Ein Symbol hinzufügen

Fügen Sie einen Symbol-Block hinzu, um ein kleines Piktogramm – ein Prozentzeichen für einen Verkauf, ein Geschenk für einen Drop – neben Ihren Text zu setzen.

1. Wählen Sie ein Element aus, klicken Sie auf Hinzufügen und wählen Sie Symbol.
2. Klicken Sie auf das Symbol, um seine Symbolleiste zu öffnen:
   • Symbol: Wählen Sie aus einem festen Satz von 20 Symbolen (Glocke, Geschenk, Warenkorb, Diagramm, Schloss, Kalender, Häkchen, Stern, Uhr, Etikett, E-Mail, Telefon, Download, Wiedergabe, Schild, Funkeln, Prozent, LKW, Ticket, Benutzer). Das Hochladen benutzerdefinierter Symbole wird nicht unterstützt.
   • Größe: 24, 32 oder 48 px.
   • Akzent: standardmäßig aktiviert, sodass das Symbol zur Akzentfarbe des Popups passt. Deaktivieren Sie es, um eine benutzerdefinierte Farbe auszuwählen.

Eine Themenauswahl hinzufügen

Fügen Sie einen Themenauswahl-Block hinzu, damit Besucher ihre Interessen als Kontrollkästchen oder Chips selbst auswählen können. Ihre Auswahl wird in ein Tag auf ihrem Gerät geschrieben.

Den Block hinzufügen und ein Tag binden

1. Wählen Sie ein Element aus, klicken Sie auf Hinzufügen und wählen Sie Themenauswahl. Es erscheint mit zwei Platzhalteroptionen und ohne gebundenes Tag – es wird nichts schreiben, bis Sie eines auswählen.
2. Klicken Sie auf den Block, um seine Symbolleiste zu öffnen. Das erste Dropdown-Menü verknüpft es mit einem Tag vom Typ Liste in Ihrem Projekt – wählen Sie ein vorhandenes aus oder wählen Sie Listen-Tag erstellen, um eines zu erstellen, ohne den Editor zu verlassen.

Die Optionen und Grenzen festlegen

Noch in der Symbolleiste:

• Steuerelement: die Optionen als Kontrollkästchen oder Chips anzeigen.
• Minimale / Maximale Auswahl: wie viele Optionen ein Besucher auswählen muss oder kann. 0 an beiden Enden bedeutet keine Begrenzung – obwohl immer mindestens eine Auswahl zum Senden erforderlich ist, auch bei Minimum 0. Eine Auswahl über dem Maximum oder der Versuch, unter dem Minimum zu senden, zeigt eine Inline-Nachricht neben dem Block an, anstatt etwas zu senden.
• Klicken Sie auf Optionen, um das Optionsfeld zu öffnen:
  • Bearbeiten Sie die Beschriftung jeder Option (was der Besucher liest) und den Tag-Wert (was in das Tag geschrieben wird). Lassen Sie den Tag-Wert leer, und Pushwoosh schreibt stattdessen die interne ID der Option (option-1, option-2 usw.) – füllen Sie ihn aus, wenn Sie einen lesbaren Wert im Tag benötigen.
  • + Option fügt eine weitere Zeile hinzu, bis zu insgesamt 12 Optionen.
  • Legen Sie die Schaltflächenbeschriftung und die Nachricht nach dem Senden fest.

Auswahlen fügen nur hinzu, sie entfernen nie

Die Auswahl eines Besuchers wird dem Tag angehängt – ein erneutes Senden des Blocks fügt weitere Werte hinzu, es löscht niemals frühere. Ein Popup kann nicht verwendet werden, um einem Besucher zu ermöglichen, ein zuvor ausgewähltes Thema abzuwählen; dafür ist eine andere Oberfläche erforderlich, wie eine Einstellungsseite, die auf demselben Tag basiert.

Eine Bewertung hinzufügen

Fügen Sie einen Bewertungs-Block hinzu, um eine schnelle Punktzahl – NPS, Sterne oder Daumen – als benutzerdefiniertes Event zu erfassen.

Den Block hinzufügen und das Event festlegen

1. Wählen Sie ein Element aus, klicken Sie auf Hinzufügen und wählen Sie Bewertung. Es erscheint ohne festgelegtes Event – es wird nichts senden, bis Sie eines auswählen.
2. Klicken Sie auf den Block, um seine Symbolleiste zu öffnen, und wählen Sie ein Event aus den vorhandenen Events Ihres Projekts aus, oder wählen Sie Event erstellen, um ein neues zu definieren, ohne das Popup zu verlassen – Pushwoosh richtet es mit den Attributen score, scale und slotKey ein, die der Block sendet. Die Punktzahl wird als dieses Event an Pushwoosh gesendet – verwenden Sie es in Segmenten oder Customer Journeys genauso wie jedes andere Event.

Das Erstellen eines Events hier ist dauerhaft

Ein Event, das Sie aus diesem Menü erstellen, ist ein echtes Event in Ihrem Projekt, kein Entwurf – um es später zu löschen, müssen Sie zur Event-Liste Ihres Projekts gehen, nicht nur das Popup ändern.

Wenn ein an den Block gebundenes Event später an anderer Stelle umbenannt oder gelöscht wird – oder in dieses Feld eingegeben wurde, bevor es zu einer Auswahl wurde – zeigt die Auswahl es als Fehlend: <Event-Name> an, anstatt es stillschweigend zu verwerfen oder auszutauschen. Wählen Sie ein anderes Event, um die Bindung zu korrigieren.

Die Skala konfigurieren

Noch in der Symbolleiste:

• Skala: NPS 0–10, Sterne (1 bis 5) oder Daumen (hoch oder runter).

Hinweis

Bei allen drei Skalen bedeutet eine höhere Punktzahl immer eine positivere Bewertung – Daumen sendet 1 für einen Daumen hoch und 0 für einen Daumen runter.

• Wann die Punktzahl gesendet wird: Bei Tippen sendet die Punktzahl in dem Moment, in dem ein Besucher einen Wert auswählt. Mit einer Schaltfläche wartet, bis er auch eine Senden-Schaltfläche klickt – legen Sie deren Beschriftung fest, sobald dies ausgewählt ist.
• Optionale Beschriftungen an den beiden Enden der Skala und die Nachricht nach dem Senden.

Mit mehreren Seiten arbeiten

Ein Web-Popup kann mehr als eine Seite haben, zum Beispiel um Besucher durch ein kurzes, mehrstufiges Angebot zu führen.

Eine Seite hinzufügen

Klicken Sie auf + Seite hinzufügen, um das Menü zum Hinzufügen von Seiten zu öffnen:

• Aktuelle Seite duplizieren: kopiert die aktive Seite, einschließlich aller von Ihnen vorgenommenen Änderungen, als neue Seite. Wenn die Quellseite ein Abonnementformular hat, wird die Kopie ohne dieses erstellt – ein Popup kann nur eines haben.
• Wählen Sie eines der einseitigen Layouts, um eine frische Seite mit dem Demo-Inhalt dieses Layouts hinzuzufügen. Die neue Seite ist unabhängig von den anderen, sodass sie ein anderes Layout verwenden kann. Modal + Abonnementformular ist eines dieser Layouts – es enthält bereits einen Abonnementformular-Block.

Hinweis

Ein Web-Popup kann nur ein Abonnementformular haben. Sobald eine Seite bereits eines hat, wird Modal + Abonnementformular aus diesem Menü entfernt.

Hinweis

Mehrseitige Beispiel-Layouts, wie Produkttour (mehrseitig), werden immer als vollständiger Satz von Seiten geliefert, daher sind sie nur in der Startgalerie verfügbar, nicht in diesem Menü.

Jeder Tab ist eine Seite. Klicken Sie auf einen Tab, um zu ihm zu wechseln.

Die Startseite festlegen

Der mit ★ markierte Tab ist die Startseite, die Seite, die Besucher zuerst sehen. Um sie zu ändern, öffnen Sie einen anderen Tab und klicken Sie auf ☆ auf diesem Tab.

Eine Seite löschen

Klicken Sie auf dem aktiven Tab auf ✕. Ein Bestätigungsdialog öffnet sich. Klicken Sie auf Löschen, um die Seite zu entfernen. Dies kann nicht rückgängig gemacht werden.

Hinweis

Jede Schaltfläche oder jeder Countdown mit einer Gehe zu Seite-Aktion, die auf die gelöschte Seite verweist, fällt auf die Startseite zurück.

Den Inhalt speichern

Überprüfen Sie den Inhalt, die Bilder und das Video sowie die Aktionen der Schaltflächen. Wenn Sie fertig sind, klicken Sie in der oberen Leiste auf Speichern.

Hinweis

Das Speichern von Inhalten zeigt das Web-Popup nicht auf Ihrer Website an. Der Inhalt erscheint auf der Website erst, nachdem Sie ihn in einer Web-Popup-Kampagne ausgewählt und die Kampagne gestartet haben.

Den Inhalt in einer Kampagne verwenden

Nach dem Speichern erscheint der Inhalt unter Content → Web popup content. Öffnen Sie ihn aus der Liste, um weiter zu bearbeiten.

Um ihn auf der Website anzuzeigen, gehen Sie zu Campaigns → Web popups, erstellen oder bearbeiten Sie eine Kampagne und wählen Sie diesen Inhalt im Schritt Content aus.

Konfigurieren Sie dann die Zielgruppe, die Anzeigeeinstellungen, die Häufigkeit und die Startoptionen. Den vollständigen Ablauf finden Sie unter Web-Popup-Kampagnen erstellen.