Native In-App-Nachrichten erstellen

Native In-Apps verwenden vorgefertigte Layouts, die das Pushwoosh SDK direkt auf dem Gerät rendert, anstatt der HTML-Seite, die eine benutzerdefinierte In-App lädt. Dadurch laden sie schneller und animieren flüssiger, und Sie benötigen keine Design- oder Entwicklungsfähigkeiten, um eine zu erstellen.

Greifen Sie zu einer nativen In-App, wenn Sie schnell eine Werbeaktion, eine Erinnerung oder eine Funktionsankündigung starten möchten und ein vollständig benutzerdefiniertes Layout nicht erforderlich ist. Wenn Sie die volle Kontrolle über das Design benötigen, erstellen Sie stattdessen eine HTML-basierte In-App.

Voraussetzungen

Hilfe von Entwicklern erforderlich

Sie können eine native In-App-Vorlage im Control Panel ohne Code-Änderungen erstellen. Aber Benutzer sehen sie nur, wenn ihre App eine Pushwoosh SDK-Version ausführt, die neu genug ist, um sie zu rendern. Erkundigen Sie sich bei Ihrem Entwicklungsteam, bevor Sie sie starten.

Bevor Sie eine native In-App-Vorlage erstellen, stellen Sie sicher, dass:

• Das Pushwoosh SDK in Ihrer App integriert ist, damit In-App-Nachrichten erscheinen können. Erfahren Sie mehr
• Ihre App iOS SDK 7.2.0+ oder Android SDK 6.10.0+ für modal, fullscreen und stories ausführt. Sheet, carousel und banner benötigen iOS SDK 7.2.1+ oder Android SDK 6.10.1+. Video ist vorerst nur für iOS verfügbar.

Eine native In-App-Vorlage erstellen

1. Gehen Sie zu Inhalt → In-Apps.
2. Klicken Sie auf In-App erstellen.
3. Geben Sie einen Vorlagennamen ein.
4. Wählen Sie Natives Rich Media erstellen.
5. Wählen Sie unter ANZEIGETYP einen Anzeigetyp aus: modal, fullscreen, stories, sheet, carousel, banner oder video.
6. Klicken Sie auf In-App erstellen.

Der Editor öffnet sich mit einer Live-Vorschau auf der rechten Seite und den Vorlagenfeldern auf der linken Seite, gruppiert in Inhalt, Konfiguration und Aktionen. Was Sie in jeder Gruppe sehen, hängt vom gewählten Anzeigetyp ab.

Den Anzeigetyp konfigurieren

Vorsicht

Das Dropdown-Menü Anzeigetyp oben im Editor ermöglicht es Ihnen, den Typ jederzeit zu wechseln. Ein Wechsel setzt jedoch alle Felder für Inhalt, Konfiguration und Aktionen unten auf ihre Standardwerte für den neuen Typ zurück. Füllen Sie den Inhalt erst aus, nachdem Sie sich für einen Typ entschieden haben.

Modal

Eine zentrierte Karte, die optional über einem abgedunkelten Hintergrund angezeigt wird.

1. Fügen Sie unter Inhalt einen Titel und eine Nachricht hinzu, jeweils mit eigener Textfarbe, sowie ein optionales Bild. Siehe Ein Bild hinzufügen.
2. Legen Sie unter Konfiguration die Hintergrundfarbe der Karte fest. Diese füllt die Karte hinter Ihrem Text und Bild aus.
3. Aktivieren Sie Schließen-Schaltfläche, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer die In-App ohne Tippen auf eine Schaltfläche schließen können.
4. Aktivieren Sie Hintergrund abdunkeln, um den Bildschirm hinter der Karte abzudunkeln und den Fokus auf Ihre Nachricht zu lenken.
5. Fügen Sie unter Aktionen eine oder mehrere Schaltflächen hinzu. Siehe Schaltflächen konfigurieren.

Fullscreen

Ein randloses Titelbild mit Text und Schaltflächen darüber. Füllen Sie diese Felder im linken Bereich aus:

1. Fügen Sie unter Inhalt ein Titelbild sowie einen Titel und eine Nachricht hinzu, jeweils mit eigener Textfarbe. Siehe Ein Bild hinzufügen.
2. Legen Sie unter Konfiguration die Titelfarbe fest. Sie wird angezeigt, während das Titelbild lädt, oder allein, wenn Sie das Bild leer lassen.
3. Aktivieren Sie Schließen-Schaltfläche, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer die In-App ohne Tippen auf eine Schaltfläche schließen können.
4. Fügen Sie unter Aktionen eine oder mehrere Schaltflächen hinzu. Siehe Schaltflächen konfigurieren.

Stories

Eine Sequenz von Vollbild-Folien mit Fortschrittsbalken oben, ähnlich wie bei Social-Media-Stories. Jede Folie ist ein eigener Stories-Eintrag unter Inhalt.

1. Füllen Sie das Bild, den Titel und die Nachricht der ersten Folie aus (jeweils mit eigener Textfarbe). Siehe Ein Bild hinzufügen.
2. Stellen Sie Sekunden ein, wie lange die Folie auf dem Bildschirm bleibt, bevor sie weitergeht. Der Standardwert ist 5. Geben Sie einen Wert von 1 bis 30 ein. Werte außerhalb dieses Bereichs blockieren das Speichern mit einem Validierungsfehler.
3. Optional können Sie innerhalb der Folie auf Hinzufügen klicken, um ihr eine eigene CTA-Schaltfläche zu geben. Siehe Schaltflächen konfigurieren.

4. Klicken Sie unter der letzten Folie auf Hinzufügen, um eine weitere Folie hinzuzufügen, und wiederholen Sie die Schritte 1-3 dafür.
5. Aktivieren Sie unter Konfiguration die Option Schleife, wenn die Story nach dem Ende der letzten Folie wieder von der ersten Folie an beginnen soll.
6. Aktivieren Sie Schließen-Schaltfläche, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer die Story verlassen können, bevor alle Folien abgespielt wurden.

Beispiel, wie die fertige Story für den Benutzer aussieht

Sheet

Ein Bottom-Sheet, das vom unteren Bildschirmrand nach oben gleitet. Ein Griff oben ermöglicht es den Benutzern, es zum Schließen nach unten zu ziehen.

Füllen Sie diese Felder im linken Bereich aus:

1. Fügen Sie unter Inhalt einen Titel und eine Nachricht hinzu, jeweils mit eigener Textfarbe, sowie ein optionales Bild. Siehe Ein Bild hinzufügen.
2. Legen Sie unter Konfiguration die Hintergrundfarbe des Sheets fest. Diese füllt das Panel hinter Ihrem Text und Bild aus.
3. Aktivieren Sie Schließen-Schaltfläche, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer das Sheet ohne Tippen auf eine Schaltfläche schließen können.
4. Fügen Sie unter Aktionen eine oder mehrere Schaltflächen hinzu. Siehe Schaltflächen konfigurieren.

Carousel

Eine Vollbild-Nachricht mit mehreren Karten, durch die Benutzer wischen können. Punkte unten zeigen an, welche Karte aktiv ist. Unter Inhalt ist jede Karte ein separater Karten-Eintrag.

1. Füllen Sie das Bild, den Titel und die Nachricht der ersten Karte aus (jeweils mit eigener Textfarbe). Siehe Ein Bild hinzufügen.
2. Legen Sie die Aktion für die Karte fest. Wählen Sie schließen, um die In-App zu schließen, wenn der Benutzer auf die Karte tippt, oder url, um einen Link zu öffnen (dieselben Optionen wie bei Schaltflächen konfigurieren).
3. Klicken Sie unter der letzten Karte auf Hinzufügen, um eine weitere hinzuzufügen, und wiederholen Sie die Schritte 1-2 dafür.
4. Aktivieren Sie Schließen-Schaltfläche, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer das Karussell verlassen können, ohne auf eine Karte zu tippen.

Vorsicht

Wenn Sie die Schließen-Schaltfläche deaktivieren und die Aktion jeder Karte auf url setzen, hat der Benutzer keine Steuerung auf dem Bildschirm, um das Karussell zu schließen. Ein Tippen öffnet immer einen Link, anstatt es zu schließen.

Banner

Ein kompakter Balken, der am oberen oder unteren Bildschirmrand angeheftet ist, für Nachrichten, die nicht die gesamte Benutzeroberfläche blockieren sollten.

1. Fügen Sie unter Inhalt einen Titel und eine Nachricht hinzu, jeweils mit eigener Textfarbe, sowie ein optionales kleines Bild. Siehe Ein Bild hinzufügen.
2. Legen Sie unter Konfiguration die Position auf oben oder unten fest, um den Banner am gewünschten Bildschirmrand anzuheften.
3. Stellen Sie Automatisch schließen, Sek. ein, um den Banner nach so vielen Sekunden automatisch zu schließen. Lassen Sie es leer, um den Banner beizubehalten, bis der Benutzer ihn schließt.
4. Legen Sie die Hintergrundfarbe für den Balken fest.
5. Aktivieren Sie Schließen-Schaltfläche, wenn Sie ein ✕-Steuerelement auf dem Banner wünschen.
6. Legen Sie unter Aktionen die Aktion auf schließen oder url fest. Banner haben keine separaten Schaltflächen. Ein Tippen irgendwo auf den Banner führt diese Aktion aus. Siehe Schaltflächen konfigurieren für das Verhalten von schließen und url.

Vorsicht

Wenn Sie die Schließen-Schaltfläche deaktivieren, die Aktion auf url setzen und Automatisch schließen leer lassen, bleibt der Banner ohne Möglichkeit zum Schließen auf dem Bildschirm. Ein Tippen öffnet immer den Link, anstatt ihn zu schließen.

Video

Ein Vollbild-Player für einen HLS-Streaming-Link (.m3u8) oder eine direkte .mp4-Datei, mit optionalen Titel, Nachricht und Schaltflächen darüber.

Hinweis

Video ist vorerst nur auf iOS verfügbar. Auf Android wird eine Vorlage, die diesen Anzeigetyp verwendet, nicht gerendert. Siehe Plattformunterstützung für Details.

1. Legen Sie unter Inhalt die Video-URL (erforderlich) auf einen absoluten HTTPS-Link zu einer .m3u8- oder .mp4-Datei fest. Fügen Sie optional ein Poster-Bild hinzu, das vor Beginn der Wiedergabe angezeigt wird, und ein Fallback-Bild, das angezeigt wird, wenn das Video nicht abgespielt werden kann.
2. Fügen Sie einen Titel und eine Nachricht hinzu, jeweils mit eigener Textfarbe.
3. Aktivieren Sie unter Konfiguration die Option Schleife, um das Video nach dem Ende neu zu starten.
4. Aktivieren Sie Stummgeschaltet, um die Wiedergabe ohne Ton zu starten.
5. Aktivieren Sie Schließen-Schaltfläche, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer die In-App schließen können, ohne auf das Ende des Videos zu warten.
6. Fügen Sie unter Aktionen eine oder mehrere Schaltflächen hinzu. Siehe Schaltflächen konfigurieren.

Textfelder konfigurieren

Textfelder unterstützen keinen mehrzeiligen Text. Wenn Sie die Eingabetaste drücken, zeigt der Editor möglicherweise einen Zeilenumbruch an, aber Pushwoosh speichert stattdessen ein Leerzeichen. Auf dem Gerät erscheint der Text als eine Zeile.

Um ein Emoji hinzuzufügen, klicken Sie neben der Feld-Symbolleiste auf Emoji. Emojis werden in denselben Textfeldern wie einfacher Text unterstützt. Überprüfen Sie die Live-Vorschau, um zu sehen, wie sie im Layout aussehen.

Dynamischen Inhalt hinzufügen

Jedes Textfeld unterstützt die Personalisierung mit Tags und der User ID.

1. Klicken Sie neben der Feld-Symbolleiste auf Personalisierung.
2. Wählen Sie unter Tag ein Tag oder die User ID aus.
3. Wählen Sie einen Formatmodifikator (z. B. CapitalizeFirst oder regular).
4. Geben Sie optional einen Standard-Tag-Wert ein.
5. Klicken Sie auf Einfügen.

Das eingefügte Tag wird als Chip im Feld angezeigt. Sie können das Tag, den Modifikator und den Standardwert ändern, bevor Sie auf Einfügen klicken. Die Personalisierung verwendet dieselben Tags, Modifikatoren und Standardwerte wie Dynamischer Inhalt.

Tipp

Für bedingte Logik (z. B. diesen Text nur anzeigen, wenn ein Tag einem bestimmten Wert entspricht) geben Sie die Liquid-Syntax direkt in das Feld ein.

Wenn Sie auf Speichern klicken, überprüft Pushwoosh den dynamischen Inhalt und Liquid in jedem Textfeld. Wenn ein Feld nicht geparst werden kann (z. B. ein nicht geschlossenes {% if %}-Tag), wird das Speichern blockiert und eine Toast-Benachrichtigung Dynamischer Inhalt enthält Fehler nennt das fehlerhafte Feld und die Sprache. Korrigieren Sie es dort und klicken Sie dann erneut auf Speichern.

Hinweis

Die Liquid-Prüfung beim Speichern fängt Syntaxfehler wie ein nicht geschlossenes Tag ab. Es können jedoch immer noch unvollständige Ausdrücke durchgehen, die erst beim Senden der Nachricht fehlschlagen. Senden Sie sich selbst einen Test, wenn Sie mehr als ein einfaches Tag verwenden.

Schaltflächen konfigurieren

Modal, Fullscreen, jede Stories-Folie, Sheet und Video verwenden dieselben Schaltflächenfelder:

• Schaltflächentext und seine Farbe.
• Hintergrund, Rahmenfarbe und Rahmenradius.
• Aktion: Wählen Sie, was passiert, wenn der Benutzer auf die Schaltfläche tippt:
  • schließen: schließt die In-App.
  • url: öffnet den Link, den Sie in das erscheinende Feld eingeben. Verwenden Sie eine Webadresse (z. B. https://example.com) oder einen Deep Link in Ihre App (z. B. myapp://product/123).

Klicken Sie auf Hinzufügen, um eine weitere Schaltfläche hinzuzufügen, oder auf das × auf einer Schaltfläche, um sie zu entfernen.

Vorsicht

Wenn Sie die Schließen-Schaltfläche deaktivieren und auch keine Schaltfläche hinzufügen, hat der Benutzer keine Steuerung auf dem Bildschirm, um die In-App zu schließen.

Ein Bild hinzufügen

Jedes Bildfeld (Bild, Titelbild und das Bild jeder Karte oder Folie) funktioniert auf die gleiche Weise. Fügen Sie eine gehostete Bild-URL direkt in das Feld ein oder klicken Sie daneben auf Aus Medienspeicher auswählen, um den Medienspeicher zu öffnen und ein bereits hochgeladenes Bild auszuwählen. Die Auswahl eines Bildes aus dem Medienspeicher ersetzt die aktuell im Feld befindliche URL.

Lokalisierungen hinzufügen

Standardmäßig hat eine native In-App eine Sprache. Um weitere hinzuzufügen:

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.

1. Klicken Sie auf + neben dem Sprachwähler in der oberen Leiste.
2. Wählen Sie die hinzuzufügenden Sprachen aus und klicken Sie auf Anwenden.

3. Verwenden Sie den Sprachwähler in der oberen Leiste, um zwischen den Sprachen zu wechseln und die Textfelder für jede Sprache auszufüllen.

Hinweis

Wenn Sie eine Sprache hinzufügen, kopiert Pushwoosh den Inhalt der Standardsprache hinein: Text, Bilder und Schaltflächenbeschriftungen. Wechseln Sie zu dieser Sprache und bearbeiten Sie jedes dieser Felder unabhängig voneinander.

Die Vorlage speichern

Klicken Sie oben rechts auf Speichern, um Ihre Änderungen zu übernehmen.

Die Vorlage erscheint dann unter Inhalt → In-Apps neben Ihren anderen In-App-Vorlagen.

In einer Kampagne verwenden

Eine native In-App-Vorlage erscheint im Vorlagenwähler zusammen mit Ihren anderen In-App-Vorlagen.

Sie können sie verwenden, um:

• Eine sofortige In-App zu senden
• Einen In-App-Schritt zu einer Customer Journey hinzuzufügen
• Eine In-App zu öffnen, wenn der Benutzer auf eine Push-Benachrichtigung tippt

Hinweis

Zustellungseinstellungen wie Start- und Enddaten und Frequency Capping funktionieren genauso wie bei jeder anderen In-App und sind nicht Teil dieses Editors.