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 Entwicklerkenntnisse, um eine zu erstellen.

Greifen Sie auf eine native In-App zurück, 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. Benutzer sehen sie jedoch nur, wenn auf ihrer App eine Pushwoosh SDK-Version läuft, die neu genug ist, um sie zu rendern. Erkundigen Sie sich vor dem Start bei Ihrem Entwicklungsteam.

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

• Das Pushwoosh SDK ist in Ihre App integriert, damit In-App-Nachrichten angezeigt werden können. Erfahren Sie mehr
• Ihre App läuft mit iOS SDK 7.2.0+ oder Android SDK 6.10.0+ für Modal, Fullscreen und Stories. Sheet, Carousel und Banner benötigen iOS SDK 7.2.1+ oder Android SDK 6.10.1+.

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 Native Rich Media erstellen.
5. Wählen Sie unter ANZEIGETYP einen Anzeigetyp aus: Modal, Fullscreen, Stories, Sheet, Carousel oder Banner.
6. Klicken Sie auf In-App erstellen.

Der Editor öffnet sich mit einer Live-Vorschau für Mobilgeräte 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

Über das Dropdown-Menü Anzeigetyp oben im Editor können Sie jederzeit den Typ wechseln. Ein Wechsel setzt jedoch alle Felder für Inhalt, Konfiguration und Aktionen darunter auf die 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 mit jeweils eigener Textfarbe sowie ein optionales Bild hinzu.
2. Legen Sie unter Konfiguration die Hintergrundfarbe der Karte fest. Diese füllt die Karte hinter Ihrem Text und Bild aus.
3. Aktivieren Sie die Schaltfläche zum Schließen, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer die In-App schließen können, ohne auf eine Schaltfläche zu tippen.
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 randabfallendes 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 mit jeweils eigener Textfarbe hinzu.
2. Legen Sie unter Konfiguration die Titelfarbe fest. Sie wird angezeigt, während das Titelbild geladen wird, oder allein, wenn Sie das Bild leer lassen.
3. Aktivieren Sie die Schaltfläche zum Schließen, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer die In-App schließen können, ohne auf eine Schaltfläche zu tippen.
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).
2. Stellen Sie Sekunden ein, wie lange die Folie auf dem Bildschirm bleibt, bevor sie weitergeht. Der Standardwert ist 5. Geben Sie einen Wert zwischen 1 und 30 ein. Werte außerhalb dieses Bereichs blockieren das Speichern mit einem Validierungsfehler.
3. Klicken Sie optional auf Hinzufügen innerhalb der Folie, 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 dann 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 die Schaltfläche zum Schließen, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer die Story verlassen können, bevor alle Folien durchgelaufen sind.

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 mit jeweils eigener Textfarbe sowie ein optionales Bild hinzu.
2. Legen Sie unter Konfiguration die Hintergrundfarbe des Sheets fest. Diese füllt den Bereich hinter Ihrem Text und Bild aus.
3. Aktivieren Sie die Schaltfläche zum Schließen, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer das Sheet schließen können, ohne auf eine Schaltfläche zu tippen.
4. Fügen Sie unter Aktionen eine oder mehrere Schaltflächen hinzu. Siehe Schaltflächen konfigurieren.

Carousel

Eine Vollbildnachricht mit mehreren Karten, durch die Benutzer wischen können. Punkte am unteren Rand 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).
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 unter Schaltflächen konfigurieren).
3. Klicken Sie unter der letzten Karte auf Hinzufügen, um eine weitere hinzuzufügen, und wiederholen Sie dann die Schritte 1-2 dafür.
4. Aktivieren Sie die Schaltfläche zum Schließen, wenn Sie ein ✕-Steuerelement wünschen, damit Benutzer das Carousel verlassen können, ohne auf eine Karte zu tippen.

Vorsicht

Wenn Sie die Schaltfläche zum Schließen deaktivieren und die Aktion jeder Karte auf URL setzen, hat der Benutzer keine Bildschirmsteuerung, um das Carousel zu schließen. Ein Tippen öffnet immer einen Link, anstatt es zu schließen.

Banner

Eine kompakte Leiste, die am oberen oder unteren Bildschirmrand angeheftet ist, für Nachrichten, die nicht die gesamte Benutzeroberfläche blockieren sollen.

1. Fügen Sie unter Inhalt einen Titel und eine Nachricht mit jeweils eigener Textfarbe sowie ein optionales kleines Bild hinzu.
2. Legen Sie unter Konfiguration die Position auf oben oder unten fest, um das Banner am gewünschten Bildschirmrand anzuheften.
3. Stellen Sie Automatisches Schließen, Sek. ein, um das Banner nach so vielen Sekunden automatisch zu schließen. Lassen Sie es leer, um das Banner beizubehalten, bis der Benutzer es schließt.
4. Legen Sie die Hintergrundfarbe für die Leiste fest.
5. Aktivieren Sie die Schaltfläche zum Schließen, 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 das Banner führt diese Aktion aus. Siehe Schaltflächen konfigurieren für das Verhalten von Schließen und URL.

Vorsicht

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

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 auf Emoji neben der Feld-Symbolleiste. Emojis werden in denselben Textfeldern wie einfacher Text unterstützt. Überprüfen Sie die Live-Vorschau, um zu sehen, wie sie im Layout aussehen.

Dynamische Inhalte hinzufügen

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

1. Klicken Sie auf Personalisierung neben der Feld-Symbolleiste.
2. Wählen Sie unter Tag ein Tag oder eine User ID.
3. Wählen Sie einen Formatmodifikator (zum Beispiel 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 Dynamische Inhalte.

Tipp

Für bedingte Logik (zum Beispiel, 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 Dynamischer Inhalt enthält Fehler-Toastnachricht 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 nur ein einfaches Tag verwenden.

Schaltflächen konfigurieren

Modal, Fullscreen, jede Stories-Folie und Sheet 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 Schaltfläche zum Schließen deaktivieren und auch keine Schaltfläche hinzufügen, hat der Benutzer keine Bildschirmsteuerung, um die In-App zu schließen.

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 senden
• Einen In-App-Schritt zu einer Customer Journey hinzufügen
• Eine In-App ö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.