Zum Inhalt springen

Syntax für native In-App-Vorlagen

Native In-Apps werden direkt vom SDK gerendert. Es wird keine WebView verwendet. Anstelle einer index.html-Seite enthält die ZIP-Ressource eine native-config.json-Datei, die die Nachricht als strukturierte Daten beschreibt (Layout-Typ, Texte, Farben, Bilder, Schaltflächen). Das SDK liest diese Datei und zeichnet die entsprechende native Ansicht, was flüssigere Animationen und eine bessere Leistung als eine eingebettete Webseite bietet.

Dieser Leitfaden dokumentiert das native-config.json-Schema: Felder, Typen und Beispiele für jeden Anzeigetyp. Für das klassische HTML-basierte Format siehe Syntax für Rich-Media-Vorlagen.

Voraussetzungen

Anchor link to

Native In-Apps erfordern:

  • iOS: SDK 7.2.0 oder neuer (7.2.1+ für Banner, Karussell und Sheet)
  • Android: SDK 6.10.0 oder neuer (6.10.1+ für Banner, Karussell und Sheet)

Noch ist nicht jeder Anzeigetyp auf beiden Plattformen verfügbar. Überprüfen Sie die Plattformunterstützung, bevor Sie sich auf ein bestimmtes Format verlassen.

Plattformunterstützung

Anchor link to
Anzeigetyp
iOS
Android
modal✅ 7.2.0+✅ 6.10.0+
fullscreen✅ 7.2.0+✅ 6.10.0+
stories✅ 7.2.0+✅ 6.10.0+
banner✅ 7.2.1+✅ 6.10.1+
carousel✅ 7.2.1+✅ 6.10.1+
sheet✅ 7.2.1+✅ 6.10.1+
video✅✅ 6.11.0+
pip✅Noch nicht verfügbar
scratchcard✅Noch nicht verfügbar
spinwheel✅Noch nicht verfügbar

Vorlagenstruktur

Anchor link to

Eine native In-App-Vorlage ist ein ZIP-Archiv, genau wie eine reguläre Rich-Media-Vorlage, außer dass das Stammverzeichnis eine native-config.json-Datei anstelle von index.html enthält:

<template>.zip
├── native-config.json ← erforderlich, Layout und Inhalt
├── pushwoosh.json ← optional, Lokalisierung (siehe unten)

Bilder und Videos, auf die von native-config.json verwiesen wird (image, poster, fallback, url bei pip/video), müssen absolute HTTPS-URLs sein. Das SDK lädt sie über das Netzwerk. Es liest keine lokalen Dateien aus dem Archiv.

Die Konfiguration selbst ist ein einzelnes JSON-Objekt:

{ "displayType": "<type>", "<type>": { /* Inhaltsblock für diesen Typ */ } }

displayType wählt eines der zehn unten aufgeführten Formate aus. Das Objekt unter dem entsprechenden Schlüssel enthält den Inhalt dieses Formats. Eine Konfiguration mit einem unbekannten displayType, einem fehlenden Inhaltsblock oder einer leeren erforderlichen Liste (items für carousel/stories, segments für spinwheel) ist ungültig. Das SDK überspringt die Anzeige, anstatt ein fehlerhaftes Layout zu rendern.

Liefereinstellungen (Start-/Enddaten und Frequency Capping) sind nicht Teil von native-config.json. Sie werden genauso wie für jede andere In-App im Schritt Anzeigeeinstellungen der Kampagne konfiguriert.

Frequency Capping erfordert zusätzlich eine explizite SDK-seitige Aktivierung, um bei nativen In-Apps wirksam zu werden. Siehe SDK-Integration.

Jeder Farbwert ist ein CSS-Hex-String: #RGB, #RGBA, #RRGGBB oder #RRGGBBAA. Das führende # ist in allen vier Formen erforderlich.

Gemeinsame Bausteine

Anchor link to

Diese kleineren Objekte werden in mehreren Anzeigetypen wiederverwendet.

FeldTypErforderlichBeschreibung
textstringjaDer Textinhalt
colorstringjaTextfarbe
{ "text": "Spin for a garage perk", "color": "#FFFFFFFF" }
FeldTypErforderlichBeschreibung
colorstringjaRandfarbe
radiusnumberjaEckenradius in Punkten
{ "color": "#0E72E5FF", "radius": 12 }

Ein optionales Bild über einer Hintergrundfarbe. Wird von fullscreen und scratchcard verwendet.

FeldTypErforderlichBeschreibung
imagestringneinURL des Cover-Bildes
backgroundstringjaHintergrundfarbe, die unter (oder anstelle von) dem Bild angezeigt wird
{ "image": "https://example.com/cover.jpg", "background": "#1A1A1EFF" }

Eine diskriminierte Union auf type:

VarianteFelderBeschreibung
{ "type": "close" }KeineSchließt die In-App
{ "type": "url", "url": string }url erforderlichÖffnet eine URL oder einen Deep Link
{ "type": "url", "url": "pushwoosh://sale" }

Schaltfläche

Anchor link to
FeldTypErforderlichBeschreibung
textTextjaBeschriftung der Schaltfläche
backgroundstringjaFüllfarbe der Schaltfläche
borderBorderjaRand der Schaltfläche
actionActionjaAktion, die beim Tippen ausgelöst wird

spinButton (spinwheel) und revealButton (scratchcard) verwenden die gleiche Form ohne action. Ihr Verhalten (das Rad drehen, die Karte aufdecken) ist fest eingebaut.

{
"text": { "text": "Book a test drive", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://sale" }
}

Das Preisfeld, das von scratchcard und spinwheel angezeigt wird. Eine gültige Belohnung hat einen title oder einen code.

FeldTypErforderlichBeschreibung
titleTextneinÜberschrift der Belohnung
messageTextneinBeschreibung der Belohnung
codestringneinPromo-Code, der mit einer Kopierschaltfläche gerendert wird
buttonButtonneinBestätigungsschaltfläche mit eigener Aktion
{
"title": { "text": "20% off detailing", "color": "#111111FF" },
"message": { "text": "Valid for any full-detail booking this month.", "color": "#555555FF" },
"code": "APEX20",
"button": {
"text": { "text": "Book detailing", "color": "#FFFFFFFF" },
"background": "#B3227CFF",
"border": { "color": "#B3227CFF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://detailing" }
}
}

Anzeigetypen

Anchor link to

Eine kompakte Leiste, die am oberen oder unteren Bildschirmrand angedockt ist.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
positiontop | bottomjaBildschirmrand
backgroundstringjaHintergrundfarbe der Leiste
imagestringneinMiniaturbild auf der linken Seite
titleTextneinEinzeiliger Titel, mit Ellipse gekürzt
messageTextneinHaupttext, bis zu 2 Zeilen
actionActionjaWird ausgelöst, wenn die Leiste selbst angetippt wird
autoDismissnumberneinAutomatisches Schließen nach dieser Anzahl von Sekunden. Weglassen, um es bis zum Schließen beizubehalten
{
"displayType": "banner",
"banner": {
"showClose": true,
"position": "bottom",
"background": "#4B5057FF",
"image": "https://example.com/thumb.jpg",
"title": { "text": "Alpine A110 just dropped", "color": "#FFFFFFFF" },
"message": { "text": "The featherweight icon — tap to see the build", "color": "#FFFFFFFF" },
"action": { "type": "url", "url": "pushwoosh://product/x6f" },
"autoDismiss": 6
}
}

Ein bildschirmfüllender, wischbarer Satz von Karten mit Seitenanzeigepunkten.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
itemsItem[]jaKarten (mindestens 1)

Karussell-Element:

FeldTypErforderlichBeschreibung
titleTextneinKartentitel
messageTextneinKartenuntertitel
imagestringneinKartenbild
actionActionneinWird ausgelöst, wenn die Karte angetippt wird
{
"displayType": "carousel",
"carousel": {
"showClose": true,
"items": [
{
"image": "https://example.com/card-1.jpg",
"title": { "text": "AMG GT R", "color": "#FFFFFFFF" },
"message": { "text": "585 hp biturbo V8 — just landed", "color": "#FFFFFFFF" },
"action": { "type": "url", "url": "pushwoosh://product/n6fx" }
},
{
"image": "https://example.com/card-2.jpg",
"title": { "text": "Alpine A110", "color": "#FFFFFFFF" },
"message": { "text": "Featherweight icon — limited allocation", "color": "#FFFFFFFF" },
"action": { "type": "url", "url": "pushwoosh://product/x6f" }
}
]
}
}

fullscreen

Anchor link to

Ein randloses Cover-Bild mit Text und Schaltflächen darüber.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
coverCoverjaHintergrundbild und -farbe
titleTextneinTitel
messageTextneinHaupttext
buttonsButton[]jaSchaltflächen am unteren Rand (kann leer sein)
{
"displayType": "fullscreen",
"fullscreen": {
"showClose": true,
"cover": { "image": "https://example.com/hero.jpg", "background": "#1A1A1EFF" },
"title": { "text": "Pure Maranello", "color": "#FFFFFFFF" },
"message": { "text": "The prancing horse, reimagined.", "color": "#EBEBEBFF" },
"buttons": [
{
"text": { "text": "Reserve now", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 8 },
"action": { "type": "url", "url": "pushwoosh://sale" }
},
{
"text": { "text": "Not now", "color": "#FFFFFFFF" },
"background": "#00000000",
"border": { "color": "#FFFFFF99", "radius": 8 },
"action": { "type": "close" }
}
]
}
}

Eine zentrierte Karte.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
dimBackgroundbooleanjaDen Bildschirm hinter der Karte abdunkeln
backgroundstringjaHintergrundfarbe der Karte
imagestringneinCover-Bild
titleTextneinTitel
messageTextneinHaupttext
buttonsButton[]jaSchaltflächen unter dem Text (kann leer sein)
{
"displayType": "modal",
"modal": {
"showClose": true,
"dimBackground": true,
"background": "#FFFFFFFF",
"image": "https://example.com/cover.jpg",
"title": { "text": "The GT R has landed", "color": "#4B5057FF" },
"message": { "text": "585 hp — now in the showroom.", "color": "#4B5057FF" },
"buttons": [
{
"text": { "text": "Book a test drive", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://sale" }
},
{
"text": { "text": "Not now", "color": "#4B5057FF" },
"background": "#FFFFFFFF",
"border": { "color": "#4B5057FF", "radius": 12 },
"action": { "type": "close" }
}
]
}
}

Ein schwebendes Bild-in-Bild-Videofenster, das an einer Bildschirmecke angedockt ist.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
positionbottom-right | bottom-left | top-right | top-leftjaBildschirmecke
loopbooleanjaWiedergabe in Schleife
mutedbooleanjaStummgeschaltet starten
urlstringjaVideo-URL
posterstringneinPoster, das vor Beginn der Wiedergabe angezeigt wird
fallbackstringneinBild, das angezeigt wird, wenn das Video nicht abgespielt werden kann
widthnumberjaFensterbreite als Prozentsatz der Bildschirmbreite, begrenzt auf 15–70
aspectRationumberjaVerhältnis von Höhe zu Breite des Fensters
borderRadiusnumberneinEckenradius des Fensters in Punkten
actionActionneinWird ausgelöst, wenn das Fenster selbst angetippt wird

Es gibt keine konfigurierbaren Schaltflächen auf pip. Fenstersteuerelemente (auf Vollbild erweitern, stummschalten, schließen) werden vom System bereitgestellt.

{
"displayType": "pip",
"pip": {
"showClose": true,
"position": "bottom-right",
"loop": true,
"muted": true,
"url": "https://example.com/teaser.mp4",
"poster": "https://example.com/poster.jpg",
"width": 40,
"aspectRatio": 0.5625,
"action": { "type": "url", "url": "pushwoosh://product/x6f" }
}
}

scratchcard

Anchor link to

Eine Karte, bei der die Belohnung unter einer freirubbelbaren Folienschicht verborgen ist.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
backgroundstring | string[]jaHintergrundfarbe der Karte oder Farbverlaufsstopps
revealThresholdnumberjaAnteil der Folie, der freigerubbelt werden muss (0–1), bevor die Belohnung aufgedeckt wird
coverCoverjaDie Folienschicht. Ohne ein image wird ein „Hier rubbeln“-Hinweis auf der Hintergrundfarbe angezeigt
revealButtonButton (no action)neinSchaltfläche „Sofort aufdecken“
titleTextneinTitel
messageTextneinHaupttext
rewardRewardjaDer unter der Folie versteckte Preis
{
"displayType": "scratchcard",
"scratchcard": {
"showClose": true,
"background": ["#3A1C71FF", "#B3227CFF", "#E0503AFF"],
"revealThreshold": 0.55,
"cover": { "background": "#C9CDD6FF" },
"revealButton": {
"text": { "text": "Reveal without scratching", "color": "#3A1C71FF" },
"background": "#F2DFF5FF",
"border": { "color": "#F2DFF5FF", "radius": 10 }
},
"title": { "text": "Your loyalty reward", "color": "#FFFFFFFF" },
"message": { "text": "Scratch the foil to reveal this week's garage perk.", "color": "#F2DFF5FF" },
"reward": {
"title": { "text": "20% off detailing", "color": "#111111FF" },
"message": { "text": "Valid for any full-detail booking this month.", "color": "#555555FF" },
"code": "APEX20",
"button": {
"text": { "text": "Book detailing", "color": "#FFFFFFFF" },
"background": "#B3227CFF",
"border": { "color": "#B3227CFF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://detailing" }
}
}
}
}

Eine Karte, die am unteren Rand angeheftet ist, mit einem Ziehgriff.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
dimBackgroundbooleanjaDen Bildschirm hinter dem Sheet abdunkeln
backgroundstringjaHintergrundfarbe des Sheets
imagestringneinCover-Bild
titleTextneinTitel
messageTextneinHaupttext
buttonsButton[]jaSchaltflächen unter dem Text (kann leer sein)
{
"displayType": "sheet",
"sheet": {
"showClose": true,
"dimBackground": true,
"background": "#FFFFFFFF",
"image": "https://example.com/cover.jpg",
"title": { "text": "Your quote is ready", "color": "#000000FF" },
"message": { "text": "Guaranteed buyout for your A110: $68,500.", "color": "#000000FF" },
"buttons": [
{
"text": { "text": "Get guaranteed quote", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://sale" }
}
]
}
}

Ein Glücksrad mit gewichteten Segmenten und einer zentralen Nabenschaltfläche.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
backgroundstring | string[]jaHintergrundfarbe der Karte oder Farbverlaufsstopps
winIndexnumberjaIndex (0-basiert) des gewinnenden Segments
spinButtonButton (no action)jaZentrale Nabenschaltfläche
titleTextneinTitel
messageTextneinHaupttext
rewardRewardjaBelohnung für den gewinnenden Dreh (Fallback für Segmente ohne eigene)
loseTitleTextneinÜberschrift, die bei einem Verlust angezeigt wird
segmentsSegment[]jaRadsegmente (SDK erwartet 2–12)

Segment:

FeldTypErforderlichBeschreibung
messageTextjaSegmentbeschriftung
colorstringneinSegmentfarbe. Weglassen für eine Fallback-Palette, die um das Rad herum angewendet wird
weightnumberjaRelative Segmentgröße
rewardRewardneinSegmentspezifische Belohnung
{
"displayType": "spinwheel",
"spinwheel": {
"showClose": true,
"background": ["#1B1B46FF", "#5B2B8FFF", "#B0338AFF"],
"winIndex": 1,
"spinButton": {
"text": { "text": "SPIN", "color": "#1B1B46FF" },
"background": "#F2C94CFF",
"border": { "color": "#D9A02BFF", "radius": 36 }
},
"title": { "text": "Spin for a garage perk", "color": "#FFFFFFFF" },
"message": { "text": "One spin — every slice wins this week.", "color": "#E3D9F2FF" },
"reward": {
"title": { "text": "You won a garage perk!", "color": "#FFFFFFFF" },
"code": "APEXPERK",
"button": {
"text": { "text": "Claim", "color": "#FFFFFFFF" },
"background": "#5B2B8FFF",
"border": { "color": "#5B2B8FFF", "radius": 12 },
"action": { "type": "close" }
}
},
"segments": [
{ "message": { "text": "5% off", "color": "#FFFFFFFF" }, "color": "#5856D6FF", "weight": 1 },
{
"message": { "text": "20% off", "color": "#FFFFFFFF" },
"color": "#30B0C7FF",
"weight": 1,
"reward": {
"title": { "text": "20% off your next service", "color": "#FFFFFFFF" },
"code": "SPIN20",
"button": {
"text": { "text": "Claim service deal", "color": "#FFFFFFFF" },
"background": "#30B0C7FF",
"border": { "color": "#30B0C7FF", "radius": 12 },
"action": { "type": "url", "url": "pushwoosh://service" }
}
}
},
{ "message": { "text": "Free wash", "color": "#FFFFFFFF" }, "color": "#FF2D55FF", "weight": 1 }
]
}
}

Bildschirmfüllende Folien mit Fortschrittsbalken am oberen Rand, ähnlich wie bei Social-Media-Stories.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
loopbooleanjaNach der letzten Folie von der ersten Folie neu starten
itemsItem[]jaFolien (mindestens 1)

Stories-Element:

FeldTypErforderlichBeschreibung
titleTextneinTitel
messageTextneinUntertitel
imagestringneinHintergrundbild der Folie
buttonsButton[]jaCTA-Schaltflächen am unteren Rand (kann leer sein)
durationnumberjaFoliendauer in Sekunden
{
"displayType": "stories",
"stories": {
"showClose": true,
"loop": false,
"items": [
{
"image": "https://example.com/slide-1.jpg",
"title": { "text": "AMG GT R", "color": "#FFFFFFFF" },
"message": { "text": "The Green Hell special", "color": "#FFFFFFFF" },
"buttons": [
{
"text": { "text": "Configure yours", "color": "#FFFFFFFF" },
"background": "#0F0F0FFF",
"border": { "color": "#0F0F0FFF", "radius": 26 },
"action": { "type": "url", "url": "pushwoosh://product/n6fx" }
}
],
"duration": 4
},
{
"image": "https://example.com/slide-2.jpg",
"title": { "text": "Alpine A110", "color": "#FFFFFFFF" },
"message": { "text": "The featherweight legend, reborn", "color": "#FFFFFFFF" },
"buttons": [],
"duration": 4
}
]
}
}

Bildschirmfüllendes Video mit Text und Schaltflächen darüber.

FeldTypErforderlichBeschreibung
showClosebooleanjaEine Schließen-Schaltfläche (✕) anzeigen
loopbooleanjaWiedergabe in Schleife
mutedbooleanjaStummgeschaltet starten
urlstringjaVideo-URL (HLS oder MP4)
posterstringneinPoster, das vor Beginn der Wiedergabe angezeigt wird
fallbackstringneinBild, das angezeigt wird, wenn das Video nicht abgespielt werden kann
titleTextneinTitel
messageTextneinHaupttext
buttonsButton[]jaCTA-Schaltflächen am unteren Rand (kann leer sein)
{
"displayType": "video",
"video": {
"showClose": true,
"loop": true,
"muted": true,
"url": "https://example.com/reveal.mp4",
"poster": "https://example.com/poster.jpg",
"title": { "text": "The reveal", "color": "#FFFFFFFF" },
"message": { "text": "Watch it move before anyone else.", "color": "#EBEBEBFF" },
"buttons": [
{
"text": { "text": "Shop the lineup", "color": "#FFFFFFFF" },
"background": "#0E72E5FF",
"border": { "color": "#0E72E5FF", "radius": 14 },
"action": { "type": "url", "url": "pushwoosh://sale" }
}
]
}
}

Lokalisierung

Anchor link to

Native In-Apps verwenden denselben Lokalisierungsmechanismus wie HTML-Rich-Media: Zeichenfolgenwerte in native-config.json können {{key|type|default}}-Platzhalter enthalten, und Übersetzungen befinden sich in einer pushwoosh.json-Datei daneben, im selben Format, das in pushwoosh.json hinzufügen beschrieben ist. Ein Platzhalter kann in jedem Zeichenfolgenfeld auf jeder Tiefe erscheinen (ein Titel, eine Schaltflächenbeschriftung, eine Bild-URL, eine Aktions-URL).

Dynamischer Inhalt

Anchor link to

Textfelder – title, message, Schaltflächen-text, reward.title/reward.message und Element-/Segment-message – akzeptieren auch Dynamischen Inhalt und Liquid-Syntax: dieselben {Tag|modifier|default}-Kurzschreibweisen und {% %}/{{ }}-Liquid-Tags, die in Push- und E-Mail-Inhalten verwendet werden. Pushwoosh löst diese pro Empfänger auf, bevor die Nachricht gesendet wird, genauso wie bei Push und E-Mail.

Beim Erstellen einer Vorlage im Control Panel Editor für native In-Apps werden eingefügte Token als Chips in der Live-Vorschau gerendert, und Speichern wird blockiert, wenn das Liquid eines Textfeldes nicht geparst werden kann.

SDK-Integration

Anchor link to

Sobald Sie das native In-App-SDK-Modul zu Ihrer App hinzufügen, werden Nachrichten automatisch angezeigt. Es ist kein zusätzlicher Code erforderlich, um Nachrichten anzuzeigen, die durch einen Push, eine Customer Journey, postEvent oder den Posteingang ausgelöst werden.

Das SDK stellt auch eine kleine API für die manuelle Steuerung zur Verfügung:

  • iOS: Pushwoosh.inApp (Modul PushwooshInApp)
  • Android: PushwooshInAppUi (Modul pushwoosh-inapp-ui)
FähigkeitiOSAndroid
Eine Konfiguration direkt anzeigen (Testen/manuelle Verwendung)Pushwoosh.inApp.present(config)PushwooshInAppUi.present(configJson)
Lebenszyklus und Klicks beobachtendelegate (PWInAppMessageDelegate)delegate (InAppMessageDelegate)
Prüfen, ob etwas auf dem Bildschirm istisPresentingisPresenting
Alles, was gerade angezeigt wird, schließendismiss()dismiss()
Anzeige anhalten / fortsetzenisPausedisPaused
maxDisplays / cooldown-Begrenzung erzwingensetFrequencyCapEnabled(_:)setFrequencyCapEnabled(...)

Delegate-Callbacks (alle werden im Hauptthread ausgelöst): shouldDisplay (geben Sie false zurück, um eine Nachricht zu unterdrücken, bevor sie angezeigt wird, z. B. auf einem Checkout-Bildschirm), willPresent, didPresent, didClose und clickedAction (wird ausgelöst, wenn der Benutzer eine url-Aktion antippt, bevor die URL geöffnet wird).

iOS meldet zusätzlich rewardRevealed und rewardClaimed für die gamifizierten scratchcard- und spinwheel-Vorlagen.

// iOS
Pushwoosh.inApp.delegate = self
Pushwoosh.inApp.setFrequencyCapEnabled(true)
// Android
PushwooshInAppUi.delegate = this
PushwooshInAppUi.setFrequencyCapEnabled(true)