Zum Inhalt springen

In-App-Nachrichten im integrierten Editor erstellen

Erstellen Sie eine In-App-Nachrichtenvorlage im integrierten Editor von Pushwoosh, ohne Code zu schreiben. Sie erhalten ein wiederverwendbares Layout mit Inhaltsblöcken, Bildern, Schaltflächen und personalisiertem Text, das Sie in einer Customer Journey, als einmalige In-App oder von einer Push-Benachrichtigung aus anzeigen können.

Eine neue In-App-Vorlage erstellen

Anchor link to

Eine In-App-Vorlage ist ein wiederverwendbares Design, das Sie einmal erstellen und dann den Benutzern in Kampagnen anzeigen. Sie können eine erstellen, indem Sie eine benutzerdefinierte HTML-ZIP-Datei hochladen oder sie im integrierten Editor erstellen. Dieser Artikel behandelt die Erstellung einer Vorlage von Grund auf im integrierten Editor. Befolgen Sie die gleichen Schritte, um eine bestehende Vorlage anzupassen.

  1. Gehen Sie zu InhaltIn-apps.
  2. Klicken Sie auf Vorlage hinzufügen.
Seite 'Inhalt > In-Apps' mit der Schaltfläche 'Vorlage hinzufügen' oben rechts in der Vorlagenliste
  1. Geben Sie einen Vorlagennamen ein.
  2. Wählen Sie, wie Sie die Vorlage erstellen möchten:
    • ZIP hochladen: laden Sie eine ZIP-Datei hoch mit Ihrer HTML-In-App-Nachricht.
    • Neue Vorlage erstellen: erstellen Sie eine Vorlage im integrierten Editor.
  3. Wählen Sie Neue Vorlage erstellen.
  4. Klicken Sie auf Vorlage hinzufügen.
Formular für neue Vorlage mit Namensfeld, Option 'ZIP hochladen' und ausgewählter Option 'Neue Vorlage erstellen'

Die Editor-Oberfläche erkunden

Anchor link to

Der integrierte Editor hat vier Bereiche. Jeder hat eine klare Aufgabe.

Obere Leiste

Verwenden Sie die obere Leiste, um die Vorlage umzubenennen, Fehler rückgängig zu machen, Ihre Arbeit zu speichern oder die In-App-Einstellungen zu öffnen, wenn Sie ändern müssen, wie die Nachricht auf dem Gerät erscheint. Siehe Konfigurieren, wie die In-App auf dem Gerät aussieht.

Obere Leiste des In-App-Editors mit Vorlagennamen, Rückgängig, Wiederholen, In-App-Einstellungen und Speichern

Canvas

Verwenden Sie den Canvas, um die Nachricht so zu sehen, wie die Benutzer sie sehen werden, und um Text, Bilder und Schaltflächen direkt im Layout zu bearbeiten. Eine leere Vorlage zeigt Mit einem Block beginnen. Über dem Canvas schaltet ein Telefon/Tablet-Umschalter die Vorschau-Breite um – er ändert nicht Ihr Layout, sondern nur, auf wie breitem Bildschirm Sie es in der Vorschau betrachten.

Leerer Canvas im In-App-Editor mit der Aufforderung 'Mit einem Block beginnen' in der Mitte

Ebenen

Das Ebenen-Panel listet jeden Block in Ihrer Vorlage als Baumstruktur in der gleichen Reihenfolge wie auf dem Canvas auf. Öffnen Sie es vom linken Rand, wenn Sie einen verschachtelten Block auswählen möchten (z. B. eine Schaltfläche innerhalb einer Gruppe) oder ziehen Sie Zeilen, um die Reihenfolge der Inhalte zu ändern.

Ebenen-Panel, das Karte, Bild, Überschrift, Text, Timer, Schaltflächen und Fußzeile in einer Baumstruktur auflistet

Rechtes Panel

Verwenden Sie Blöcke im rechten Panel, um Inhalte zur Nachricht hinzuzufügen, und Einstellungen, wenn Sie ein Styling wünschen, das auf die gesamte Vorlage gleichzeitig angewendet wird. Siehe Vorlagenweites Styling konfigurieren.

Registerkarte 'Blöcke' im rechten Panel mit Überschrift, Text, Schaltfläche, Bild und anderen Inhaltsblöcken

Mit dem Erstellen der Vorlage beginnen

Anchor link to

Nachdem Sie eine Vorlage erstellt haben, öffnet sich der Editor mit einem leeren Canvas und der Registerkarte Blöcke auf der rechten Seite.

  1. Ziehen Sie einen Block aus dem Blöcke-Panel auf den Canvas oder klicken Sie auf einen Block im Panel, um ihn hinzuzufügen.
  2. Fügen Sie auf die gleiche Weise weitere Blöcke hinzu, bis das Layout fertig ist.
  3. Öffnen Sie die Registerkarte Einstellungen, wenn Sie ein vorlagenweites Styling benötigen.
Leerer In-App-Editor mit 'Mit einem Block beginnen' auf dem Canvas und geöffnetem Blöcke-Panel

Inhaltsblöcke hinzufügen

Anchor link to

Inhaltsblöcke sind die Bausteine einer In-App-Vorlage im integrierten Editor. Sie kombinieren Überschriften, Text, Bilder, Schaltflächen und andere Blöcke zu einem Layout.

Öffnen Sie die Registerkarte Blöcke und ziehen Sie einen Block auf den Canvas oder klicken Sie auf einen Block, um ihn hinzuzufügen. Verfügbare Blöcke:

  • Überschrift: Titel und kurze Schlagzeilen in der Nachricht
  • Text: Fließtext und längere Beschreibungen
  • Schaltfläche: eine anklickbare Handlungsaufforderung
  • Bild: Bilder aus dem Medienspeicher, per Upload oder URL
  • Trennlinie: eine Linie, die Abschnitte visuell trennt
  • 2 Spalten: zwei gleich große Spalten nebeneinander
  • 3 Spalten: drei gleich große Spalten nebeneinander
  • 4 Spalten: vier gleich große Spalten nebeneinander
  • 33 / 67: zwei Spalten, bei denen die linke etwa 33 % der Breite und die rechte etwa 67 % einnimmt
  • 67 / 33: zwei Spalten, bei denen die linke etwa 67 % der Breite und die rechte etwa 33 % einnimmt
  • Timer: ein Countdown für Angebote und Fristen
  • Menü: eine Reihe oder Spalte von Links, wie z. B. Navigation oder Kontakte
  • Soziale Netzwerke: Symbole, die auf Ihre sozialen Profile verlinken
  • HTML: benutzerdefiniertes HTML, wie z. B. ein Formular oder eingebettetes Video

Überschrift und Text

Anchor link to

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

Klicken Sie auf einen Überschrift- oder Text-Block, um dessen Text auf dem Canvas zu bearbeiten. Wählen Sie einen Text aus, um die Formatierungs-Symbolleiste aufzurufen: Fett, Kursiv, Unterstrichen, Ausrichtung, eine Link-Schaltfläche und ein Textstil-Dropdown-Menü.

Überschriftenblock auf dem Canvas ausgewählt, mit der Textformatierungs-Symbolleiste, die Stil- und Formatierungsoptionen anzeigt

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

Ein Bild-Block zeigt ein Bild in der In-App-Vorlage an. Wählen Sie ihn auf dem Canvas aus, um die Bild-Einstellungen im rechten Panel 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.
  • Alt-Text: beschreiben Sie das Bild für die Barrierefreiheit.
  • Link-URL: öffnet eine Webseite, wenn auf das Bild getippt wird.
  • Link-Ziel: öffnet den Link im selben oder einem neuen Tab.
  • Datei: nachdem Sie ein Bild hinzugefügt haben, wird der Pfad der verwendeten Datei angezeigt.

Aktivieren Sie unter Abstand die Option Innenabstand, um Platz um das Bild herum hinzuzufügen. Verwenden Sie Alle Seiten für den gleichen Abstand auf jeder Seite oder aktivieren Sie Weitere Optionen, um jede Seite separat einzustellen.

Leerer Bildblock auf dem Canvas mit Bildeinstellungen, die Bild hinzufügen, Bild-URL, Alt-Text, Link-URL und Abstand anzeigen

Schaltfläche

Anchor link to

Eine Schaltfläche ist eine anklickbare Handlungsaufforderung (Call-to-Action) in der In-App-Nachricht. Verwenden Sie sie, um eine URL zu öffnen, benutzerdefiniertes JavaScript auszuführen oder die Nachricht zu schließen.

Klicken Sie auf einen Schaltflächen-Block, um dessen Beschriftung auf dem Canvas zu bearbeiten. Verwenden Sie die Symbolleiste, um Schriftgröße, Textfarbe, Fett, Kursiv, Unterstrichen und Ausrichtung zu ändern.

Um festzulegen, was passiert, wenn der Benutzer auf die Schaltfläche tippt:

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

Eine Webseite öffnen

Anchor link to

Webseite öffnen öffnet einen Link, wenn der Benutzer auf die Schaltfläche tippt. Geben Sie die Adresse in URL ein. Was Sie eingeben können:

  • Eine Webseite: https://example.com
  • Ein App-Link, der einen Bildschirm in Ihrer App öffnet: myapp://promo
  • Die In-App ohne JavaScript schließen: pushwoosh://close
Dialog 'Link einfügen/bearbeiten' für eine Schaltfläche mit Aktionstyp 'Webseite öffnen' und einem URL-Feld

Benutzerdefiniertes JavaScript ausführen

Anchor link to

Benutzerdefiniertes Javascript führt Code aus, wenn der Benutzer auf die Schaltfläche tippt. 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 eine normale Schaltfläche. Sie sieht keine Tags oder Events. Sie entscheiden, was als Nächstes auf dem Bildschirm passiert: die Nachricht offen lassen oder sie im selben onClick schließen.

Dialog 'Link einfügen/bearbeiten' für eine Schaltfläche mit Aktionstyp 'Benutzerdefiniertes JavaScript' und onClick auf closeInApp gesetzt

Verfügbare Methoden in onClick

  • pushwoosh.closeInApp(): schließt die In-App-Nachricht. Lassen Sie es weg, um die Nachricht nach dem Tippen geöffnet zu lassen.
  • pushwoosh.sendTags({...}): speichert Werte als Geräte-Tags für spätere Kampagnen.
  • pushwoosh.postEvent(...): sendet ein benutzerdefiniertes Event, 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 der Push-Benachrichtigung übergeben wurden, die diese In-App geöffnet hat.
Beispiel: Benutzer ein Interesse auswählen und für spätere Kampagnen speichern lassen
Anchor link to
  1. Fügen Sie eine Frage in einem Text- oder Überschrift-Block hinzu, zum Beispiel: “Welchen Sport mögen Sie?”
  2. Fügen Sie eine Schaltfläche pro Option hinzu, zum Beispiel: Yoga und Fitnessstudio.
In-App-Vorlage mit Yoga- und Fitnessstudio-Schaltflächen und benutzerdefiniertem JavaScript onClick für die Yoga-Schaltfläche
  1. Setzen Sie den Aktionstyp für jede Schaltfläche auf Benutzerdefiniertes Javascript.
  2. Fügen Sie für die Yoga-Schaltfläche Folgendes in onClick ein:
pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();
  1. Fügen Sie für die Fitnessstudio-Schaltfläche 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.

Trennlinie

Anchor link to

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 Einstellungs-Panel.

Der HTML-Block ermöglicht es Ihnen, benutzerdefinierten HTML-Code 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 Formular-Block für In-App-Nachrichten gibt.

Die folgenden Beispiele zeigen gängige Anwendungsfälle für den HTML-Block in einer In-App-Vorlage: ein Lead-Formular, eine Umfrage und ein eingebettetes Video.

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

HTML-Lead-Formular im In-App-Editor mit Namens- und E-Mail-Feldern und einer Schaltfläche 'Code an mich senden'
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>

Der Menü-Block platziert mehrere klickbare Elemente in einer Reihe 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 die Benutzer sehen
  • URL: wohin das Element führt
  • Ziel: gleicher 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

Anchor link to

Der Social-Block zeigt eine Reihe von Social-Media-Symbolen an, die auf Ihre Profile verlinken. Verwenden Sie ihn, um Benutzer von der In-App-Nachricht aus 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.

Einstellungen des Social-Blocks mit TikTok-, Instagram- und Facebook-Links sowie Ausrichtung, Symbolgröße und Abstand

Countdown-Timer

Anchor link to

Der Timer-Block ist ein Countdown in der In-App-Nachricht. Verwenden Sie ihn für zeitlich begrenzte Angebote, Blitzverkäufe und Event-Erinnerungen.

So richten Sie ihn ein:

  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. Schalten Sie Beschriftungen ein, um “Tage / Stunden / Minuten / Sekunden”-Untertitel unter den Ziffern anzuzeigen, oder aus 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.
Einstellungen des Timer-Blocks mit Enddatum und -uhrzeit des Countdowns, Beschriftungen, Erscheinungsbild und Abstandsoptionen

Spalten teilen den Canvas in nebeneinander liegende Abschnitte auf, sodass Sie Inhalte in einer Reihe nebeneinander platzieren können.

Ziehen Sie einen dieser Blöcke auf den Canvas:

  • 2 Spalten: zwei gleich große Spalten
  • 3 Spalten: drei gleich große Spalten
  • 4 Spalten: vier gleich große Spalten
  • 33 / 67: linke Spalte etwa 33 % breit, rechte etwa 67 %
  • 67 / 33: linke Spalte etwa 67 % breit, rechte etwa 33 %

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

Vorlagenweites Styling konfigurieren

Anchor link to

Vorlageneinstellungen steuern das Styling für die gesamte In-App-Vorlage: Dokumentgröße und -hintergrund, Popup-Aussehen und Standardstile für Blöcke.

Öffnen Sie die Registerkarte Einstellungen im rechten Panel.

Registerkarte 'Einstellungen' mit Abschnitten für Dokument, Popup und Standardstile für Blöcke und Spalten

Verfügbare Abschnitte:

  • Dokument: Größe und Aussehen des gesamten Nachrichtenbereichs: Breite, Innenabstand, Hintergrundfarbe oder -bild, Textfarbe, Schriftfamilie und der Abstand zwischen den Blöcken.
  • Popup: wie die Nachricht auf dem abgedunkelten Hintergrund sitzt: Eckenradius sowie Overlay-Farbe und -Deckkraft.
  • Block-Standardeinstellungen: gemeinsame Anfangsstile für Blöcke, die Sie später hinzufügen, damit neue Inhalte zur Vorlage passen, bis Sie einen Block auf dem Canvas überschreiben.
  • Spalten-Standardeinstellungen: Abstand für jedes Spaltenlayout: äußerer Abstand, Abstand innerhalb jeder Spalte und der Abstand zwischen den Spalten.
  • Karten-Standardeinstellungen: anfängliches Aussehen für Karten-Container, die Inhalte im Layout gruppieren, angewendet, bis Sie eine Karte individuell gestalten.
  • Schaltflächengruppen-Standardeinstellungen: Abstand und Ausrichtung, wenn mehrere Schaltflächen als Gruppe zusammen sitzen.
  • Schaltflächen-Standardeinstellungen: anfängliches Aussehen für neue Schaltflächen-Blöcke, damit CTAs in der gesamten Vorlage konsistent bleiben, bis Sie eine separat gestalten.
  • Trennlinien-Standardeinstellungen: anfänglicher Linienstil, Farbe, Dicke und Breite für neue Trennlinien-Blöcke.

Standardeinstellungen gelten überall dort, wo ein einzelner Block sie nicht überschreibt.

Die Vorlage lokalisieren

Anchor link to

Eine mehrsprachige Vorlage speichert lokalisierte Texte für jede Sprache in einem einzigen In-App-Design. Verwenden Sie den Sprachumschalter über dem Canvas, um Sprachen hinzuzufügen und Inhalte pro Sprache zu bearbeiten. Informationen zur Funktionsweise von mehrsprachigen Nachrichten über alle Kanäle hinweg finden Sie unter Mehrsprachige Nachrichten.

Inhalte, die Sie für die aktuelle Sprache noch nicht übersetzt haben, werden abgedunkelt angezeigt. Beginnen Sie zu tippen, um die Übersetzung zu erstellen. Die Standardsprache wird weiterhin angezeigt, bis Sie dies tun.

Konfigurieren, wie die In-App auf dem Gerät aussieht

Anchor link to

In-App-Einstellungen steuern, wie die Nachricht auf dem Gerät erscheint und sich verhält: Position, Animationen, Wischgesten und die Schließen-Schaltfläche. Diese Einstellungen gelten nur für iOS und Android Native.

Klicken Sie auf In-App-Einstellungen in der oberen Leiste:

  • Position auf dem Bildschirm: Vollbild, Oben, Mitte oder Unten.
  • Präsentationsanimation / Schließanimation: Keine, Einblenden, Links, Rechts, Oben oder Unten, oder Standard, um den SDK-Standard Ihrer App zu verwenden.
  • Animationsdauer (MS): 100 bis 3000 Millisekunden. Lassen Sie das Feld leer, um das Standard-Timing des SDK zu verwenden.
  • Wischen zum Schließen: aktivieren Sie eine beliebige Kombination aus Links, Rechts, Oben und Unten.
  • Schließen-Schaltfläche anzeigen: schalten Sie das Schließen-Steuerelement ein oder aus. Wenn eingeschaltet, legen Sie Position (Oben rechts, Oben links, Unten rechts, Unten links), Hintergrund (eine Farbe oder Transparent) und Symbolfarbe fest. Im Gegensatz zu den anderen Einstellungen in diesem Modal wird das Aussehen der Schließen-Schaltfläche in die Nachricht selbst gerendert und auf jeder Plattform angezeigt, nicht nur auf iOS und Android Native.
Modal 'In-App-Einstellungen' mit Optionen für Position, Animationen, Wischen zum Schließen und Schließen-Schaltfläche

Klicken Sie auf Anwenden, um Ihre Auswahl zu speichern, oder auf Abbrechen, um sie zu verwerfen.

Die Vorlage speichern

Anchor link to

Klicken Sie auf Speichern in der oberen Leiste, um Ihre Änderungen zu speichern. Verwenden Sie Rückgängig/Wiederholen in der oberen Leiste, um durch Ihre Bearbeitungen vor- und zurückzugehen.

Die gespeicherte Vorlage verwenden

Anchor link to

Nachdem Sie eine In-App-Vorlage gespeichert haben, können Sie sie Benutzern in einer Customer Journey, als einmalige In-App oder wenn ein Benutzer auf eine Push-Benachrichtigung tippt, anzeigen.