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 einem Push aus anzeigen können.

Hinweis

Bevor Sie beginnen, integrieren Sie das Pushwoosh SDK, damit In-App-Nachrichten in Ihrer App erscheinen können. Erfahren Sie mehr

Eine neue In-App-Vorlage erstellen

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

1. Gehen Sie zu Inhalt → In-Apps.
2. Klicken Sie auf In-App erstellen.

3. Geben Sie einen Vorlagennamen ein.
4. Wählen Sie, wie die Vorlage erstellt werden soll:
   • Neue Vorlage erstellen: Erstellen Sie eine Vorlage im integrierten Editor.
   • ZIP hochladen: Laden Sie eine ZIP-Datei hoch mit Ihrer HTML-In-App-Nachricht.
   • Natives Rich Media erstellen: Erstellen Sie eine vom SDK gerenderte native In-App. Erfahren Sie mehr
5. Wählen Sie Neue Vorlage erstellen.
6. Klicken Sie auf In-App erstellen.

Das Editor-Layout erkunden

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

Obere Leiste

In der oberen Leiste verwalten Sie die Vorlage als Ganzes: ihren Namen, den Rückgängig-Verlauf, den Speicherstatus, wie sie auf dem Gerät aussieht (In-App-Einstellungen), Sprachen (Automatisch übersetzen und der Sprachumschalter), die Vorschau-Breite für Telefon oder Desktop (Telefon bietet 360, 390, 393 oder 430 px, passend zu gängigen Gerätebreiten) und einen Umschalter für helle/dunkle Arbeitsfläche (Sonne/Mond-Symbol). Siehe Konfigurieren, wie die In-App auf dem Gerät aussieht und Die Vorlage lokalisieren.

Öffnen Sie das ⋮-Menü in der oberen Leiste für weitere Aktionen:

Vorschau

Vorschau lässt Sie die Nachricht ausprobieren, bevor Sie sie speichern: Tippen Sie auf Schaltflächen, navigieren Sie durch mehrseitige Abläufe und überprüfen Sie das Layout auf dem Telefon oder Desktop.

Was in der Vorschau funktioniert:

• Schaltflächen und mehrseitige Abläufe werden real ausgeführt.
• Links und Deep Links werden gemeldet, aber nicht geöffnet.
• SDK-Aufrufe und Öffnungs-/Klickstatistiken bleiben deaktiviert.
• Die Sprache entspricht dem Sprachumschalter. Merge-Tags bleiben als Platzhalter erhalten.

Im Vorschau-Header können Sie zwischen Telefon und Desktop sowie zwischen hell und dunkel wechseln, um alle resultierenden Layouts zu sehen. Klicken Sie auf Neustart, um die Nachricht von Anfang an erneut anzuzeigen. Um die Vorschau zu verlassen, drücken Sie Esc oder klicken Sie außerhalb des Fensters.

Überprüfen

Überprüfen öffnet Smart Check und scannt die Vorlage auf häufige Probleme.

Smart Check sucht nach:

• Schaltflächen, Menüpunkten und Bildlinks ohne URL oder mit einer URL, die keine http(s)-, mailto:-, tel:- oder Deep-Link-Adresse (z. B. myapp://promo) ist
• Unfertigen KI-Platzhalterblöcken
• Leeren Bild- oder Videoslots und fehlendem Alternativtext
• Produktkarten mit einem fehlenden oder ungültigen Link
• Textkontrast, der WCAG AA nicht erfüllt
• Unübersetztem Inhalt
• Einem Countdown-Timer, dessen Enddatum bereits vergangen ist
• Einer Anzeigebedingung mit einer fehlerhaften oder leeren Regel, einem Zweig, der den Block verloren hat, an den er gekettet ist, oder einer Bedingung, die nicht angewendet wird, weil dynamischer Inhalt für das Konto deaktiviert ist

Klicken Sie auf einen Befund, um direkt zum betroffenen Element auf der Arbeitsfläche zu springen. Wenn alles in Ordnung ist, zeigt das Panel Alle Prüfungen bestanden – der Inhalt scheint bereit zum Speichern zu sein.

Markenbuch

• Markenbuch: Öffnen Sie das Markenbuch dieser Anwendung.
• Markenbuch-Stile anwenden: Gestalten Sie die Vorlage neu, damit sie zu Ihrem Markenbuch passt (sobald Sie eines eingerichtet haben).
• Benutzerdefinierte Stile zurücksetzen: Entfernen Sie Stilüberschreibungen in der Vorlage und kehren Sie zu den Standardeinstellungen zurück.

.zip herunterladen

.zip herunterladen speichert die Vorlage als ZIP-Datei. Es wird die zuletzt gespeicherte Version heruntergeladen, also speichern Sie zuerst Ihre Änderungen. Der Menüpunkt erscheint erst, nachdem die Vorlage mindestens einmal gespeichert wurde – neue, ungespeicherte Vorlagen zeigen ihn nicht an.

Arbeitsfläche

Bearbeiten Sie die Nachricht auf der Arbeitsfläche: Klicken Sie auf Texte, Bilder und Schaltflächen, um sie zu ändern. Verwenden Sie den Telefon/Desktop-Umschalter in der oberen Leiste, um zu prüfen, wie das Layout bei jeder Breite aussieht. Der Umschalter ändert nur die Vorschau, nicht das Layout selbst.

Verwenden Sie das Sonne/Mond-Symbol in der oberen Leiste, um die Arbeitsfläche weiter zu bearbeiten, während sie in hell oder dunkel gerendert wird. Es funktioniert auch ohne eine eingerichtete Dunkelmodus-Variante – dunkle Farben werden automatisch abgeleitet, bis Sie Ihre eigenen festlegen. Dies ist eine Live-Bearbeitungsansicht, nicht das schreibgeschützte Vorschau-Panel.

Ebenen

Das Ebenen-Panel listet jeden Block in Ihrer Vorlage als Baumstruktur auf, in der gleichen Reihenfolge wie auf der Arbeitsfläche. Öffnen Sie es vom linken Rand, um einen verschachtelten Block auszuwählen (z. B. eine Schaltfläche innerhalb einer Gruppe) oder ziehen Sie Zeilen, um den Inhalt neu anzuordnen.

Rechtes Bedienfeld

Wechseln Sie zwischen drei Registerkarten:

• Blöcke: Fügen Sie der Nachricht Inhalte hinzu. Siehe Referenz zu den Blöcken des In-App-Editors.
• Einstellungen: Wenden Sie Stile auf die gesamte Vorlage auf einmal an. Siehe In-App-Vorlageneinstellungen konfigurieren.
• KI: Chatten Sie mit dem KI-Assistenten, um Inhalte aus einer Eingabeaufforderung zu generieren oder zu bearbeiten.

Inhaltsblöcke hinzufügen

1. Öffnen Sie die Registerkarte Blöcke im rechten Bedienfeld.
2. Ziehen Sie einen Block auf die Arbeitsfläche oder klicken Sie auf einen Block, um ihn am Ende der Vorlage hinzuzufügen.
3. Fügen Sie weitere Blöcke hinzu, bis das Layout fertig ist.

Jeder Blocktyp dient einem anderen Zweck in der Nachricht:

• Überschrift: Titel und kurze Schlagzeilen
• Text: Fließtext und längere Beschreibungen
• Schaltfläche: ein antippbarer Call-to-Action
• Bild: Bilder aus dem Medienspeicher, Upload oder URL
• Video: ein antippbares Video-Thumbnail, das ein YouTube- oder Vimeo-Video öffnet
• Karte: ein Bild mit Überschrift, Text und Schaltfläche 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
• Sozial: Symbole, die zu Ihren sozialen Profilen verlinken
• HTML: benutzerdefiniertes HTML, wie ein Formular, eine Umfrage oder ein eingebettetes Video
• Produkte: ein Raster von Produktkarten aus Ihrem Produktkatalog oder dem verlassenen Warenkorb eines Benutzers

Siehe die Referenz zu den Blöcken des In-App-Editors für die Einstellungen jedes Blocks und wie man Blöcke speichert und wiederverwendet.

Blöcke für bestimmte Benutzer anzeigen

Nicht jeder Benutzer muss die gleichen Blöcke sehen. Legen Sie eine Anzeigebedingung für einen Block fest, damit er basierend auf den Tags des Benutzers angezeigt oder ausgeblendet wird. Sie senden immer noch eine Vorlage, aber jede Person sieht nur die Teile, die für sie relevant sind.

Wählen Sie den Block auf der Arbeitsfläche aus, öffnen Sie Anzeigebedingung im rechten Bedienfeld und aktivieren Sie Diesen Block bedingt anzeigen. Erfahren Sie mehr

Die Vorlage lokalisieren

Eine mehrsprachige Vorlage speichert lokalisierte Texte für jede Sprache in einem In-App-Design. Informationen zur Funktionsweise mehrsprachiger Nachrichten über verschiedene Kanäle finden Sie unter Mehrsprachige Nachrichten.

Hinweis

Der Sprachwähler hier zählt nur Geräte auf Plattformen, die In-App-Inhalte rendern. Sprachwerte, die über Tags auf Benutzerebene festgelegt werden, sind nicht an eine Geräteplattform gebunden und werden hier daher nicht angezeigt.

So richten Sie mehrsprachige Inhalte ein:

1. Klicken Sie auf den Sprachumschalter in der oberen Leiste, um die Sprachliste zu öffnen.
2. Wählen Sie die Sprachen aus, die Sie hinzufügen möchten, und klicken Sie dann auf Anwenden.
3. Verwenden Sie den Sprachumschalter, um zwischen den Sprachen zu wechseln und den Inhalt jedes Blocks für die ausgewählte Sprache zu bearbeiten.
4. Klicken Sie auf Automatisch übersetzen, um fehlende Übersetzungen automatisch auszufüllen – überprüfen Sie den von der KI generierten Text vor dem Speichern.

Hinweis

Jeder Block, den Sie hinzufügen, erscheint mit dem gleichen Inhalt für jede Sprache. Denken Sie daran, neuen Text und Schaltflächenbeschriftungen für jede Sprache zu übersetzen, die Sie in Ihrer Vorlage verwenden.

Vorlageneinstellungen konfigurieren

Verwenden Sie zwei Stellen, um die Nachricht zu gestalten und zu platzieren:

• Registerkarte Einstellungen (rechtes Bedienfeld): Dokumentgröße, Farben, Typografie und Standardstile für Blöcke.
• In-App-Einstellungen (obere Leiste): Position auf dem Bildschirm, Animationen und die Schließen-Schaltfläche.

Erfahren Sie mehr

Die Vorlage speichern

Klicken Sie in der oberen Leiste auf Speichern, um Ihre Änderungen zu speichern. Verwenden Sie Rückgängig/Wiederherstellen in der oberen Leiste, um Ihre Bearbeitungen schrittweise zurück- und vorwärts zu gehen.

Hinweis

Beim Speichern wird Ihre In-App-Vorlage unter Inhalt → In-Apps abgelegt. Von dort aus können Sie Vorlagen in der Vorschau ansehen, bearbeiten und verwalten. Erfahren Sie mehr

Übersetzungen aus Ihren eigenen Systemen aktualisieren

Ihr Entwicklungsteam kann die Übersetzungen einer gespeicherten Vorlage über die Pushwoosh-API oder einen mit dem ManyMoney AI MCP-Server verbundenen KI-Client aktualisieren, ohne das HTML oder Design der Vorlage erneut zu senden.

Dies funktioniert nur bei einer Vorlage, die bereits einmal gespeichert wurde (siehe Die Vorlage speichern oben). Eine Vorlage ohne gespeicherten Inhalt hat nichts, womit Übersetzungen zusammengeführt werden könnten.

Das Update führt nur die Sprachen und Textschlüssel zusammen, die im localization-Feld gesendet werden. Jede andere Sprache, jeder andere Schlüssel und das visuelle Design bleiben wie gespeichert.

• Das Senden eines Schlüssels ohne Wert entfernt diesen Schlüssel aus seiner Sprache.
• Das Senden einer Sprache ohne Wert entfernt die gesamte Sprache aus der Vorlage.
• Die Standardsprache kann nach dem Update auf jede in der Vorlage verbleibende Sprache umgestellt werden.
• Das Update wird abgelehnt, wenn es jede Sprache aus der Vorlage entfernen würde oder wenn die angeforderte Standardsprache nicht eine der nach dem Zusammenführen verbleibenden Sprachen ist.

Hierfür benötigen Sie die Unterstützung Ihres Entwicklungsteams.