Referenz für In-App-Editor-Blöcke

Referenz für jeden Block, den Sie auf der Arbeitsfläche des integrierten Editors hinzufügen können.

Jeder Blocktyp dient einem anderen Zweck in der Nachricht:

• Überschrift: Titel und kurze Schlagzeilen
• Text: Fließtext und längere Beschreibungen
• Button: ein antippbarer Call-to-Action
• Bild: Bilder aus dem Medienspeicher, Upload oder von einer URL
• Video: ein antippbares Video-Thumbnail, das ein YouTube- oder Vimeo-Video öffnet
• Karte: ein Bild mit Überschrift, Text und Button in einem Layout
• Trennlinie: eine Linie, die Abschnitte trennt
• Spalten: nebeneinander liegende Layouts (2, 3 oder 4 gleiche Spalten oder 33/67- und 67/33-Aufteilungen)
• Timer: ein Countdown für Angebote und Fristen
• Menü: eine Zeile oder Spalte mit Navigations- oder Kontaktlinks
• Soziale Netzwerke: Symbole, die auf Ihre sozialen Profile verlinken
• HTML: benutzerdefiniertes HTML, wie z. B. ein Formular, eine Umfrage oder ein eingebettetes Video
• Produkte: ein Raster von Produktkarten aus Ihrem Produktkatalog oder dem abgebrochenen Warenkorb eines Benutzers

Wie man Editor-Blöcke konfiguriert

Ziehen Sie einen Block aus dem Tab Blöcke auf die Arbeitsfläche oder klicken Sie darauf, um ihn am Ende hinzuzufügen. Wählen Sie den Block aus, um seine Einstellungen im rechten Bereich zu öffnen und Inhalt, Links, Größe und Abstände zu konfigurieren.

Tipp

Jeder Block hat auch Einstellungen für Sichtbarkeit und Anzeigebedingung. Verwenden Sie diese, um einen Block auf dem Telefon oder Desktop auszublenden oder ihn nur bestimmten Benutzern anzuzeigen. Erfahren Sie mehr

Überschrift und Text

Die Blöcke Überschrift und Text enthalten den Text, den Benutzer in der In-App-Nachricht lesen. Bearbeiten Sie den Text auf der Arbeitsfläche und formatieren Sie ihn mit der Symbolleiste.

Klicken Sie auf einen Überschrift- oder Text-Block, um dessen Text auf der Arbeitsfläche zu bearbeiten. Wählen Sie einen Text aus, um die Formatierungssymbolleiste aufzurufen: Fett, Kursiv, Unterstrichen, Ausrichtung, eine Link-Schaltfläche und ein Dropdown-Menü für den Textstil.

Merge-Tags sind Platzhalter, die einen Tag-Wert aus dem Profil des Benutzers in die Nachricht einfügen, sodass jeder Abonnent personalisierten Text sieht. Um einen hinzuzufügen, wählen Sie den Text aus, klicken Sie in der Symbolleiste auf Merge-Tags und wählen Sie einen Tag aus Ihrem Konto. Erfahren Sie mehr über personalisierte In-App-Nachrichten

Bild

Ein Bild-Block zeigt ein Bild in der In-App-Vorlage an.

Wählen Sie ihn auf der Arbeitsfläche aus, um die Bild-Einstellungen im rechten Bereich zu öffnen.

• Bild hinzufügen / Bild ersetzen: Klicken Sie auf Bild hinzufügen, wenn der Block leer ist, oder auf Bild ersetzen, wenn bereits ein Bild festgelegt ist. Sie können eine Datei hochladen oder eine aus Ihrem Medienspeicher auswählen.
• Bild-URL: Fügen Sie einen gehosteten Link zum Bild ein.
• Alternativtext: Beschreiben Sie das Bild für die Barrierefreiheit.
• Prompt: Der KI-Generierungs-Prompt für ein Bild, das Sie mit Mit KI generieren erstellt haben.
• Breite (px) / Höhe (px): Legen Sie die Bildgröße in Pixeln fest. Lassen Sie ein Feld leer, damit die Größe automatisch angepasst wird.
• Eckenradius (px): Runden Sie die Ecken des Bildes ab.
• Ausrichtung: Links, zentriert oder rechts.

Unter Link legen Sie einen Aktionstyp (z. B. Website öffnen oder URL oder Deeplink) und dessen URL fest, um etwas zu öffnen, wenn das Bild angetippt wird, und ein Link-Ziel, um es im selben oder einem neuen Tab zu öffnen.

Unter Abstand aktivieren Sie Innenabstand, um Platz um das Bild hinzuzufügen. Verwenden Sie Alle Seiten für den gleichen Abstand auf jeder Seite oder aktivieren Sie Weitere Optionen, um jede Seite separat festzulegen.

Video

Ein Video-Block fügt ein YouTube- oder Vimeo-Video als antippbares Thumbnail zur Nachricht hinzu. Die Nachricht zeigt ein Standbild mit einem ▶-Overlay. Durch Antippen wird das Video in der YouTube- oder Vimeo-App oder im Browser geöffnet.

Wählen Sie den Block auf der Arbeitsfläche aus, um seine Einstellungen zu öffnen:

• Video-URL: Fügen Sie einen YouTube- oder Vimeo-Link ein. Der Editor ruft automatisch ein Thumbnail ab.
• Alternativtext: Beschreiben Sie das Video für die Barrierefreiheit.
• Thumbnail-URL: Behalten Sie das automatisch abgerufene Thumbnail bei oder klicken Sie auf Thumbnail hinzufügen / Thumbnail ersetzen, um eines aus dem Medienspeicher auszuwählen oder einen gehosteten Link direkt einzufügen.
• Play-Button-Overlay: Standardmäßig aktiviert. Deaktivieren Sie es, um das einfache Thumbnail ohne das ▶-Overlay anzuzeigen.
• Breite (px), Eckenradius (px) und Ausrichtung: Steuern Sie, wie das Thumbnail aussieht und wo es im Layout platziert ist.

Karte

Ein Karten-Block kombiniert ein Bild mit einer Überschrift, einem Text und einem Button in einem einzigen vorgefertigten Layout, sodass Sie nicht vier separate Blöcke von Hand platzieren und ausrichten müssen.

• Layout: Wählen Sie, auf welcher Seite das Bild im Verhältnis zum Inhalt platziert wird, oder aktivieren Sie Text um Bild wickeln.
• Bild: Fügen Sie das Bild hinzu oder ersetzen Sie es, legen Sie den Alternativtext fest, bearbeiten Sie den KI-Generierungs-Prompt, fügen Sie Innenabstand hinzu und legen Sie den Eckenradius (px) fest.
• Größe & Passform: Legen Sie die Breite, Höhe, den Zuschnitt (Original oder ein festes Verhältnis) und die Anpassung (Abdecken oder ein Fokuspunkt) des Bildes fest. Die genauen Felder hängen vom gewählten Layout ab.
• Link: Sorgen Sie dafür, dass die gesamte Karte beim Antippen eine URL öffnet.

Bearbeiten Sie die Überschrift, den Text und den Button der Karte genauso wie die eigenständigen Blöcke Überschrift, Text und Button.

Button

Ein Button ist ein antippbarer Call-to-Action in der In-App-Nachricht. Verwenden Sie ihn, um eine URL zu öffnen, benutzerdefiniertes JavaScript auszuführen oder die Nachricht zu schließen.

Klicken Sie auf einen Button-Block, um dessen Beschriftung auf der Arbeitsfläche zu bearbeiten. Verwenden Sie die Symbolleiste, um Schriftgröße, Textfarbe, Fett, Kursiv, Unterstrichen und Ausrichtung zu ändern.

Um festzulegen, was passiert, wenn der Benutzer den Button antippt:

1. Klicken Sie auf das Link-Symbol in der Symbolleiste, um Link einfügen/bearbeiten zu öffnen.
2. Wählen Sie einen Aktionstyp: Website öffnen, URL oder Deeplink oder Benutzerdefiniertes JavaScript.
3. Füllen Sie die Felder für diese Aktion aus (siehe unten).
4. Klicken Sie auf Speichern.

Website öffnen

Website öffnen öffnet eine Webseite, wenn der Benutzer den Button antippt. Geben Sie die Adresse in URL ein, zum Beispiel https://example.com.

URL oder Deeplink

URL oder Deeplink öffnet einen Link oder Deeplink, wenn der Benutzer den Button antippt. Geben Sie die Adresse in URL ein, zum Beispiel einen App-Bildschirm: myapp://screen.

Benutzerdefiniertes JavaScript ausführen

Benutzerdefiniertes JavaScript führt Code aus, wenn der Benutzer den Button antippt. Geben Sie den Code in das Feld onClick ein.

Verwenden Sie dies, wenn ein Tippen etwas in Pushwoosh bewirken soll, nicht nur einen Link öffnen. Die Person in der App sieht immer noch einen normalen Button. Sie sieht keine Tags oder Ereignisse. Sie entscheiden, was als Nächstes auf dem Bildschirm passiert: Lassen Sie die Nachricht offen oder schließen Sie sie im selben onClick.

Verfügbare Methoden in onClick

• pushwoosh.closeInApp(): Schließt die In-App-Nachricht. Lassen Sie es weg, um die Nachricht nach dem Tippen offen zu halten.
• pushwoosh.sendTags({...}): Speichert Werte als Geräte-Tags für spätere Kampagnen.
• pushwoosh.postEvent(...): Sendet ein benutzerdefiniertes Ereignis, zum Beispiel um eine Customer Journey zu starten.
• pushwoosh.getTags(...): Liest aktuelle Tags. Nützlich in benutzerdefiniertem HTML, um zu ändern, was die Nachricht anzeigt.
• pushwoosh.getCustomData(): Liest benutzerdefinierte Daten, die von dem Push übergeben wurden, der diese In-App geöffnet hat.

Beispiel: Benutzer ein Interesse auswählen und für spätere Kampagnen speichern lassen

1. Fügen Sie eine Frage in einem Text- oder Überschrift-Block hinzu, zum Beispiel: „Welchen Sport magst du?“
2. Fügen Sie einen Button pro Option hinzu, zum Beispiel: Yoga und Fitnessstudio.

3. Setzen Sie den Aktionstyp für jeden Button auf Benutzerdefiniertes JavaScript.
4. Fügen Sie für den Yoga-Button Folgendes in onClick ein:

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. Fügen Sie für den Fitnessstudio-Button Folgendes in onClick ein:

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

Wenn der Benutzer auf Yoga tippt, schreibt Pushwoosh den interest-Tag auf sein Gerät und schließt die In-App. Sie können diesen Benutzer dann in einem Segment oder einer Customer Journey ansprechen.

Erfahren Sie mehr darüber, wie Sie In-Apps mit JavaScript erstellen

Trennlinie

Eine Trennlinie ist eine horizontale Linie zwischen Inhaltsblöcken. Verwenden Sie sie, um Abschnitte in der Vorlage visuell zu trennen.

Konfigurieren Sie Linienstil (Durchgezogen, Gestrichelt, Gepunktet), Farbe, Dicke und Breite im Einstellungsbereich.

HTML

Der HTML-Block ermöglicht es Ihnen, benutzerdefiniertes HTML in eine In-App-Vorlage einzufügen. Verwenden Sie ihn für ein benutzerdefiniertes Formular, eine Umfrage oder ein eingebettetes Video, wenn es keinen dedizierten Formularblock für In-App-Nachrichten gibt.

Beispiele

Die folgenden Beispiele zeigen gängige Möglichkeiten, den HTML-Block in einer In-App-Vorlage zu verwenden: ein Lead-Formular, eine Umfrage und ein eingebettetes Video.

Hinweis

Die Formular- und Umfragebeispiele speichern Geräte-Tags und senden Ereignisse über Pushwoosh. Erstellen Sie die benutzerdefinierten Ereignisse in Ihrem Konto, bevor Sie sie in Kampagnen verwenden.

Lead-Formular

Dieses Lead-Formular schreibt Name und E-Mail als Tags, sendet ein promo_requested-Ereignis, zeigt eine Dankesnachricht an und schließt dann die In-App.

HTML-Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email. We'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>

Umfrage

Diese Umfrage speichert die ausgewählte Trainingszeit als Tag, sendet ein schedule_survey_completed-Ereignis, zeigt eine Dankesnachricht an und schließt dann die In-App.

HTML-Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

Video

Dieses Beispiel bettet ein YouTube-Video in die In-App-Nachricht ein.

HTML-Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

Menü

Der Menü-Block platziert mehrere klickbare Elemente in einer Zeile oder Spalte. Verwenden Sie ihn für eine Navigationsleiste oder eine Liste von Unternehmenskontakten.

Für jedes Menüelement legen Sie fest:

• Beschriftung: der Text, den Benutzer sehen
• URL: wohin das Element führt
• Ziel: derselbe Tab oder ein neuer Tab

In den Blockeinstellungen können Sie auch Folgendes festlegen:

• Richtung: Horizontal oder Vertikal
• Ausrichtung: Links, Zentriert oder Rechts
• Trennzeichen: ein optionales Trennzeichen zwischen den Elementen
• Schriftart, Größe, Gewicht, Buchstabenabstand und Link-/Textfarben

Soziale Netzwerke

Der Soziale Netzwerke-Block zeigt eine Reihe von Social-Media-Symbolen an, die auf Ihre Profile verlinken. Verwenden Sie ihn, um Benutzer von der In-App-Nachricht zu Facebook, Instagram, X und anderen Plattformen zu leiten.

Fügen Sie Plattform-Einträge hinzu und legen Sie dann die Ausrichtung, die Symbolgröße und den Abstand zwischen den Symbolen fest.

Countdown-Timer

Der Timer-Block ist ein Countdown in der In-App-Nachricht. Verwenden Sie ihn für zeitlich begrenzte Angebote, Flash-Sales und Veranstaltungserinnerungen.

Um ihn einzurichten:

1. Legen Sie unter Countdown das Enddatum und die Endzeit fest und wählen Sie dann die Zeitzone und die Sprache für die Timer-Beschriftungen.
2. Aktivieren Sie Beschriftungen, um „Tage / Stunden / Minuten / Sekunden“-Beschriftungen unter den Ziffern anzuzeigen, oder deaktivieren Sie sie für nur Zahlen.
3. Legen Sie unter Erscheinungsbild den Hintergrund, die Ziffernfarbe, die Beschriftungsfarbe und die Schriftgröße für Ziffern (Standard 40px) und Beschriftungen (Standard 16px) fest.
4. Passen Sie den Abstand (Innenabstand) nach Bedarf an.

Spalten

Spalten teilen die Arbeitsfläche in nebeneinander liegende Abschnitte auf, sodass Sie Inhalte in einer Reihe nebeneinander platzieren können.

Ziehen Sie einen dieser Blöcke auf die Arbeitsfläche:

• 2 Spalten: zwei gleiche Spalten
• 3 Spalten: drei gleiche Spalten
• 4 Spalten: vier gleiche Spalten
• 33 / 67: linke Spalte ca. 33 % breit, rechte ca. 67 %
• 67 / 33: linke Spalte ca. 67 % breit, rechte ca. 33 %

Fügen Sie dann Inhalte zu jeder Spalte hinzu. Um den Abstand für alle Spalten in der Vorlage zu ändern, öffnen Sie Einstellungen → Spalten-Standardeinstellungen und passen Sie den äußeren Innenabstand, den Spalten-Innenabstand und den Abstand zwischen den Spalten an.

Produkte

Ein Produkte-Block zeigt ein Raster von Produktkarten aus einer gemeinsamen Vorlage an. Jede Karte kann ein Bild, einen Titel, eine Beschreibung, einen Preis und einen Kaufen-Button enthalten. Die Vorlage wiederholt sich für jedes Produkt.

Wählen Sie im Einstellungsbereich unter Quelle aus, woher die Produkte stammen:

• Manuell: Geben Sie Produkte von Hand ein oder klicken Sie auf Aus Katalog auswählen…, um bestimmte Artikel aus Ihrem Produktkatalog nach ID auszuwählen. Sie können beides im selben Block mischen.
• Katalogregel: Ziehen Sie Produkte automatisch nach Kategorie und Sortierreihenfolge, die frisch aus dem Katalog aufgelöst werden, wenn die Nachricht angezeigt wird.
• Warenkorb: Zeigen Sie die Artikel aus dem aktuellen abgebrochenen Warenkorb jedes Benutzers an. Wie man eine Kampagne für abgebrochene Warenkörbe einrichtet

Hinweis

Katalogregel und Warenkorb erfordern Inhaltsvorlagen in Ihrem Plan und ein API-Zugriffstoken (Einstellungen → API-Zugriff). Wenn der Quelle-Selektor nicht auf eine davon umschaltet oder der Block keine Produkte rendert, wenden Sie sich an den Support oder Ihren Account Manager, oder erstellen Sie ein Token und wählen Sie die Quelle erneut aus.

Sobald Sie eine Quelle ausgewählt haben, steuern diese Einstellungen, wie das Raster und seine Karten aussehen:

• Anzahl der Produkte (oder Max. angezeigte Produkte für Warenkorb): wie viele Karten angezeigt werden sollen.
• Spalten: 1, 2 oder 3 Karten pro Zeile.
• Abstand: der Raum zwischen den Karten.
• Beschreibungslimit: das Zeichenlimit, auf das der Beschreibungstext gekürzt wird, damit die Karten eine einheitliche Größe behalten.
• Kartenvorlage: Wählen Sie ein Layout und legen Sie dann den Kartenhintergrund, den Karten-Eckenradius und den Inhalts-Innenabstand für jede Karte fest.

Blöcke speichern und wiederverwenden

Speichern Sie einen Block, um ihn in dieser oder anderen In-App-Vorlagen wiederzuverwenden, anstatt ihn jedes Mal neu zu erstellen.

1. Wählen Sie den Block auf der Arbeitsfläche aus.
2. Klicken Sie auf das Lesezeichen-Symbol (Block zur Wiederverwendung speichern) in der Symbolleiste des Blocks und geben Sie ihm einen Namen.

Gespeicherte Blöcke erscheinen unter Gespeicherte Blöcke am unteren Rand des Blöcke-Tabs.

• Ziehen Sie einen gespeicherten Block auf die Arbeitsfläche oder klicken Sie darauf, um ihn am Ende der Vorlage hinzuzufügen.
• Klicken Sie auf das × auf der Kachel eines gespeicherten Blocks, um ihn zu löschen.

Kopien synchron halten

Wenn Sie einen Block speichern, aktivieren Sie Kopien synchron halten, um jede eingefügte Kopie mit derselben Quelle zu verknüpfen. Bearbeiten Sie die Quelle einmal, und die Änderung wird überall dort angewendet, wo dieser Block verwendet wird.

Eine synchronisierte Kopie ist auf der Arbeitsfläche gesperrt. Sie können sie nicht direkt bearbeiten. Wählen Sie die Kopie aus, um ihre Einstellungen zu öffnen:

• Synchronisierten Block bearbeiten: Entsperren Sie diese Kopie, damit Sie sie ändern können. Oben erscheint ein Banner. Klicken Sie auf Auf alle anwenden, um Ihre Änderungen in der Quelle und jeder anderen Kopie zu speichern, oder auf Abbrechen, um sie zu verwerfen. Sie können immer nur einen synchronisierten Block entsperren.
• Aus Quelle aktualisieren: Ersetzen Sie diese Kopie durch die neueste Version aus der Quelle.
• Von Quelle trennen: Heben Sie die Verknüpfung dieser Kopie von der Quelle auf, damit Sie sie eigenständig bearbeiten können.

Hinweis

Jedes Mal, wenn Sie eine In-App-Vorlage öffnen, überprüft Pushwoosh deren synchronisierte Kopien und aktualisiert alle, die veraltet sind. Ein Toast zeigt an, wie viele aktualisiert wurden. Wenn die Quelle neueren Inhalt hat, zeigen die Einstellungen der Kopie eine Warnung an, bis Sie die Vorlage erneut öffnen oder auf Aus Quelle aktualisieren klicken. Wenn die Quelle gelöscht wurde, behält die Kopie ihren letzten Inhalt und Sie können sie nur Von Quelle trennen.