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 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 im Control Panel eine native In-App-Vorlage ohne Codeänderungen erstellen. Benutzer sehen sie jedoch nur, wenn ihre App eine Pushwoosh SDK-Version ausführt, 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 führt iOS SDK 7.2.0+ oder Android SDK 6.10.0+ für modal, fullscreen und stories aus. Sheet, carousel und banner benötigen iOS SDK 7.2.1+ oder Android SDK 6.10.1+. Video benötigt iOS SDK 7.2.0+ oder Android SDK 6.11.0+.

Cross-Platform-Frameworks

Das native In-App-Modul wird je nach Ihrem Stack unterschiedlich ausgeliefert:

• Flutter bündelt das native In-App-Modul automatisch. Es ist keine zusätzliche Einrichtung über das Pushwoosh Flutter-Plugin hinaus erforderlich.
• React Native, Cordova, Capacitor, Unity und Expo bündeln das native In-App-Modul nicht. Fügen Sie es selbst zum zugrunde liegenden Android/iOS-Projekt Ihrer App hinzu: pushwoosh-inapp-ui unter Android, PushwooshInApp unter iOS. Informationen zum Hinzufügen nativer Module zu Ihrem Projekt finden Sie im Integrationsleitfaden Ihres Frameworks.
• Web wird nicht unterstützt. Native In-Apps werden über die Android- und iOS-SDKs gerendert, und das Web-SDK verfügt über kein natives In-App-Modul.

Eine native In-App-Vorlage erstellen

1. Gehen Sie zu Inhalt → In-Apps.
2. Klicken Sie auf den Pfeil neben In-App erstellen und wählen Sie Native In-App. Der native Editor öffnet sich direkt.
3. Geben Sie einen Vorlagennamen ein.
4. Wählen Sie oben im Editor unter Anzeigetyp einen Anzeigetyp aus: modal, fullscreen, stories, sheet, carousel, banner oder video. Was jeder Typ benötigt, finden Sie unter Den Anzeigetyp konfigurieren.

Der Editor zeigt eine Live-Vorschau für Mobilgeräte auf der rechten Seite und die Vorlagenfelder 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

Mit dem 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 hinzu, jeweils mit eigener Textfarbe, sowie ein optionales Bild. Siehe 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 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 hinzu, jeweils mit eigener Textfarbe. Siehe 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 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). Siehe 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. 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 auf Hinzufügen unter der letzten Folie, 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 hinzu, jeweils mit eigener Textfarbe, sowie ein optionales Bild. Siehe 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 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 Vollbild-Nachricht 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). Siehe 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 unter Schaltflächen konfigurieren).
3. Klicken Sie auf Hinzufügen unter der letzten Karte, 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 Karussell 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 Steuerung auf dem Bildschirm, um das Karussell 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 hinzu, jeweils mit eigener Textfarbe, sowie ein optionales kleines Bild. Siehe Bild hinzufügen.
2. Legen Sie unter Konfiguration die Position auf oben oder unten fest, um das Banner am gewünschten Bildschirmrand anzuheften.
3. Stellen Sie Automatisch 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 auf eine beliebige Stelle des Banners 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 Automatisch 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.

Video

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

Hinweis

Video benötigt iOS SDK 7.2.0+ oder Android SDK 6.11.0+. Auf einem älteren Android SDK wird eine Vorlage, die diesen Anzeigetyp verwendet, nicht gerendert. Details finden Sie unter Plattformunterstützung.

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 Stumm, um die Wiedergabe ohne Ton zu starten.
5. 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 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 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.

Dynamischen Inhalt 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 Dynamischer Inhalt.

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 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 nur ein einfaches Tag verwenden.

Schaltflächen konfigurieren

Modal, Vollbild, 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 Schaltfläche zum Schließen deaktivieren und auch keine Schaltfläche hinzufügen, hat der Benutzer keine Steuerung auf dem Bildschirm, um die In-App zu schließen.

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.

Einen Barcode hinzufügen

Klicken Sie neben Aus Medienspeicher auswählen auf Barcode erstellen, um eine Schublade zu öffnen, die einen scannbaren Code 128, EAN-13, EAN-8, UPC-A oder QR-Code generiert und die resultierende URL in das Feld schreibt:

• Code. Der zu kodierende Wert: entweder ein fester Code wie SAVE20 oder ein Geräte-Tag wie {Coupon|String|} oder {LoyaltyCardNumber|String|}, damit jeder Empfänger seinen eigenen Code sieht. Ein Geräte-Tag wird direkt auf dem Gerät des Empfängers mit dessen realem Wert ausgefüllt, kurz bevor die In-App erscheint. Standardmäßig {Coupon|String|}.

• Symbologie. Wählen Sie das Barcode-Format: Code 128, EAN-13, EAN-8 und UPC-A sind Standard-Einzelhandelsbarcodes, die von Handscannern gelesen werden, und QR ist ein quadratischer Code, den jede Handykamera scannen kann.
• Fehlerkorrektur. Erscheint nur, nachdem Sie die Symbologie auf QR eingestellt haben. Echte QR-Codes können zerkratzt, unscharf oder teilweise von einem Logo verdeckt werden, und die Fehlerkorrektur ist eine zusätzliche Information, die in den Code integriert ist, damit er trotz dieser Beschädigung noch gescannt werden kann. Wählen Sie, wie viel Schaden er tolerieren kann: L, M, Q oder H, von am wenigsten bis am robustesten. Höhere Stufen tolerieren mehr Schaden, erzeugen aber einen dichteren, unruhiger aussehenden Code. Standardmäßig M.

• Code in Ziffern drucken. Zeigt den Wert unter dem Code an.

Wenn Code ein Geräte-Tag ist, ersetzt die Vorschau einen Beispielwert, da sie das Tag eines echten Empfängers nicht auflösen kann. Ein fester Code wie SAVE20 wird genau wie eingegeben in der Vorschau angezeigt.

Klicken Sie auf In das Bildfeld einfügen, um die generierte URL in das obige Bild-Feld zu kopieren.

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 sowie Frequency Capping funktionieren genauso wie bei jeder anderen In-App und sind nicht Teil dieses Editors.