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 toEine 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.
- Gehen Sie zu Inhalt → In-apps.
- Klicken Sie auf Vorlage hinzufügen.

- Geben Sie einen Vorlagennamen ein.
- 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.
- Wählen Sie Neue Vorlage erstellen.
- Klicken Sie auf Vorlage hinzufügen.

Die Editor-Oberfläche erkunden
Anchor link toDer 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.

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.

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.

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.

Mit dem Erstellen der Vorlage beginnen
Anchor link toNachdem Sie eine Vorlage erstellt haben, öffnet sich der Editor mit einem leeren Canvas und der Registerkarte Blöcke auf der rechten Seite.
- Ziehen Sie einen Block aus dem Blöcke-Panel auf den Canvas oder klicken Sie auf einen Block im Panel, um ihn hinzuzufügen.
- Fügen Sie auf die gleiche Weise weitere Blöcke hinzu, bis das Layout fertig ist.
- Öffnen Sie die Registerkarte Einstellungen, wenn Sie ein vorlagenweites Styling benötigen.

Inhaltsblöcke hinzufügen
Anchor link toInhaltsblö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ü.

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
Anchor link toEin 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.

Schaltfläche
Anchor link toEine 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:
- Klicken Sie auf das Link-Symbol in der Symbolleiste, um Link einfügen/bearbeiten zu öffnen.
- Wählen Sie einen Aktionstyp.
- Füllen Sie die Felder für diese Aktion aus (siehe unten).
- Klicken Sie auf Speichern.
Eine Webseite öffnen
Anchor link toWebseite ö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

Benutzerdefiniertes JavaScript ausführen
Anchor link toBenutzerdefiniertes 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.

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- Fügen Sie eine Frage in einem Text- oder Überschrift-Block hinzu, zum Beispiel: “Welchen Sport mögen Sie?”
- Fügen Sie eine Schaltfläche pro Option hinzu, zum Beispiel: Yoga und Fitnessstudio.

- Setzen Sie den Aktionstyp für jede Schaltfläche auf Benutzerdefiniertes Javascript.
- Fügen Sie für die Yoga-Schaltfläche Folgendes in onClick ein:
pushwoosh.sendTags({ interest: "yoga" });pushwoosh.closeInApp();- 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 toEine 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.
HTML
Anchor link toDer 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.
Beispiele
Anchor link toDie 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-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>Diese Umfrage speichert die ausgewählte Trainingszeit als Tag, sendet ein schedule_survey_completed-Event, 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>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ü
Anchor link toDer 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 toDer 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.

Countdown-Timer
Anchor link toDer 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:
- 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.
- Schalten Sie Beschriftungen ein, um “Tage / Stunden / Minuten / Sekunden”-Untertitel unter den Ziffern anzuzeigen, oder aus für nur Zahlen.
- Legen Sie unter Erscheinungsbild den Hintergrund, die Ziffernfarbe, die Beschriftungsfarbe und die Schriftgröße für Ziffern (Standard 40px) und Beschriftungen (Standard 16px) fest.
- Passen Sie den Abstand (Innenabstand) nach Bedarf an.

Spalten
Anchor link toSpalten 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 Einstellungen → Spalten-Standardeinstellungen und passen Sie den äußeren Abstand, den Spaltenabstand und den Abstand zwischen den Spalten an.
Vorlagenweites Styling konfigurieren
Anchor link toVorlageneinstellungen 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.

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 toEine 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 toIn-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.

Klicken Sie auf Anwenden, um Ihre Auswahl zu speichern, oder auf Abbrechen, um sie zu verwerfen.
Die Vorlage speichern
Anchor link toKlicken 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 toNachdem 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.