In-App-Nachrichten im integrierten Editor erstellen

Youtube-Video: Erstellen Sie In-Apps ohne Programmierung in unserem einfach zu bedienenden Editor

Eine neue Vorlage hinzufügen

Um eine In-App-Vorlage zu erstellen, gehen Sie zu Inhalt → In-Apps und klicken Sie auf Vorlage hinzufügen:

Hier haben Sie zwei Möglichkeiten, eine Vorlage zu erstellen:

1. ZIP hochladen — laden Sie eine ZIP-Datei hoch mit Ihrer HTML-In-App-Nachricht.
2. Neue Vorlage erstellen — erstellen Sie eine Vorlage im visuellen Editor. Nach der Erstellung können Sie mit einer vorgefertigten Vorlage oder einer leeren Vorlage beginnen.

In diesem Artikel werden wir uns das Erstellen einer Vorlage von Grund auf ansehen. Befolgen Sie die gleichen Schritte, um Ihre bestehende Vorlage anzupassen.

Geben Sie einen Vorlagennamen ein, wählen Sie Neue Vorlage erstellen und klicken Sie auf Vorlage hinzufügen:

Sie können eine neue In-App-Nachrichtenseite basierend auf einer Standardvorlage erstellen oder von Grund auf neu beginnen, indem Sie eine leere Vorlage auswählen.

Allgemeine Vorlageneinstellungen

Bevor Sie Inhaltsblöcke hinzufügen, konfigurieren Sie die Vorlage im Tab Popup:

• Legen Sie die Position des Popups auf dem Bildschirm fest.
• Ändern Sie die Breite und Höhe des Popups.
• Passen Sie die Abrundung der Ränder an.
• Konfigurieren Sie die Inhaltseinstellungen für die gesamte Vorlage: Ausrichtung, Breite, Schriftarten und Farben.
• Legen Sie die Hintergrundfarbe fest oder fügen Sie ein Hintergrundbild hinzu.
• Passen Sie die Position und das Aussehen der Schließen-Schaltfläche an.

Vollbild- und Teilbild-In-Apps verwenden denselben Editor. Wählen Sie unten ein Format aus und stellen Sie die Breite und Höhe des Popups entsprechend ein.

Vollbild-In-App-Nachricht

Verwenden Sie Vollbild-In-Apps für Onboarding, Paywalls und Werbeaktionen wie Offerwalls.

Stellen Sie im Tab Popup eine Breite und Höhe ein, die der Bildschirmgröße des Zielgeräts nahekommt, sodass die Nachricht den größten Teil des Displays abdeckt.

Bildempfehlungen für Vollbild-In-Apps (Hochformat)

Bild und Text	Hohe Auflösung: 1200 x 1000 px Mindestgröße: 600 x 500 px Seitenverhältnis: 6:5
Nur Bild	Hohe Auflösung: 1200 x 2000 px Mindestgröße: 600 x 1000 px Seitenverhältnis: 3:5

Hinweis

Öffnen Sie für native iOS- und Android-Apps Einstellungen → In-App-Einstellungen und stellen Sie die Nachrichtenposition auf Vollbild.

Teilbild-In-App-Nachricht

Teilbild-In-Apps sind kompakte Overlay-Nachrichten, die einen Teil der App hinter dem Popup sichtbar lassen. Verwenden Sie sie für Opt-in-Aufforderungen, Ankündigungen und Werbeinhalte.

Stellen Sie im Tab Popup eine kleinere Breite und Höhe ein, damit das Popup nicht den gesamten Bildschirm bedeckt.

Hinweis

Öffnen Sie für native iOS- und Android-Apps Einstellungen → In-App-Einstellungen und wählen Sie Mitte, Oben oder Unten für die Nachrichtenposition.

Tipp

Informationen zur Automatisierung von Popups zur An- und Abmeldung für Push-Benachrichtigungen in Customer Journey finden Sie unter Opt-in- und Opt-out-Popups erstellen.

Inhalte hinzufügen

Inhaltsblöcke

Definieren Sie das Layout der Vorlage, indem Sie die erforderlichen Inhaltsblöcke per Drag & Drop in den Vorlagenkörper ziehen. Sie können Überschriften, Text, Bilder, Schaltflächen, Trennlinien, ausfüllbare Formulare, HTML-Blöcke, Menüs, Bilderkarussells, Countdown-Timer und Tabellen hinzufügen.

Wenn Sie mehr als ein Inhaltselement in einer Reihe platzieren möchten, fügen Sie das Element Spalten zur Vorlage hinzu. Wählen Sie den erforderlichen Blocktyp aus und fügen Sie Inhalte zu jeder Spalte hinzu:

Um die Hintergrundfarbe eines Layouts zu ändern, klicken Sie auf dessen äußere Ränder. Stellen Sie sicher, dass das gesamte Layout ausgewählt ist, und wählen Sie die Farbe aus:

Wenn das gesamte Layout ausgewählt ist, können Sie auch die Padding-Einstellungen bearbeiten und ein Hintergrundbild hochladen.

Hoch- und Querformat

Pushwoosh bietet die Flexibilität, In-App-Nachrichteninhalte sowohl im Hoch- als auch im Querformat zu erstellen. Dies stellt sicher, dass Ihre Kampagnen auf allen Geräten visuell ansprechend und effektiv sind.

Hochformat (Mobile-Tab)

Um In-App-Nachrichten zu erstellen, die für das Hochformat konzipiert sind, das typischerweise auf mobilen Geräten verwendet wird, navigieren Sie zum Mobile-Tab im Editor. Hier können Sie Ihre Inhalte so gestalten, dass sie in ein vertikales Layout passen, das für Smartphone-Bildschirme geeignet ist.

Querformat (Desktop-Tab)

Für querformatige In-App-Nachrichten, die im Allgemeinen für breitere Bildschirme bevorzugt werden, navigieren Sie zum Desktop-Tab im Editor. Hier können Sie Ihre In-App-Nachrichten so strukturieren, dass sie einen breiteren horizontalen Raum nutzen.

Spalten in Querformat-Layouts

Wenn Sie Spalten zu Ihren querformatigen In-App-Nachrichten hinzufügen müssen, fügen Sie zuerst das Spalten-Element hinzu. Definieren Sie die Anzahl und das Layout der benötigten Spalten.

Nachdem Sie Ihre querformatigen In-App-Nachrichten mit Spalten gestaltet haben, wechseln Sie zum Mobile-Tab. Scrollen Sie nach unten zum Abschnitt RESPONSIVES DESIGN, der sich am unteren Rand des Einstellungsfensters befindet, und aktivieren Sie die Option Nicht auf Mobilgeräten stapeln.

Hinweis

Dieser Schritt ist entscheidend, um das beabsichtigte Design Ihrer querformatigen In-App-Nachrichten bei der Anzeige auf mobilen Geräten beizubehalten. Er stellt sicher, dass die Spalten nebeneinander bleiben, anstatt sich zu stapeln.

Pushwoosh ermöglicht es Ihnen auch, Spaltenlayouts in Ihren In-App-Nachrichten zu mischen und anzupassen. Sie können bestimmte Spalten so konfigurieren, dass sie vertikal gestapelt werden, während andere horizontal bleiben. Passen Sie dazu jeden Spaltenblock nach Bedarf an.

Inhaltselemente

Überschrift

Sie können die Schriftart, Farbe, Textausrichtung, Zeilenhöhe und Padding-Parameter für Überschriften bearbeiten.

Hinweis

Wenn Sie die Überschrift für jeden Benutzer personalisieren möchten, fügen Sie Tags hinzu.

Sie können auch Zeit sparen, indem Sie die KI den Überschriftentext für Sie generieren lassen. Klicken Sie auf die Schaltfläche im Abschnitt Intelligente Überschriften, geben Sie einige Schlüsselwörter ein und klicken Sie auf Vorschläge erhalten:

Text

Texte können auf die gleiche Weise wie Überschriften angepasst werden (im Editor wird dieser Block als Absatz bezeichnet). Sie können die Schriftart, Farbe, Textausrichtung, Zeilenhöhe und Padding-Parameter ändern.

Hinweis

Wenn Sie den Text für jeden Benutzer personalisieren möchten, fügen Sie Tags hinzu.

Sie können Ihren Text auch verbessern, indem Sie die Option Intelligenter Text verwenden:

Bild

Um ein Bild hinzuzufügen, klicken Sie auf den Bildblock und ziehen Sie Ihre Datei in das Editor-Panel:

Alternativ können Sie anstelle des Hochladens einer Datei die Bild-URL angeben. Sie können auch die URL eines Bildes aus Ihrem Medienspeicher in das Feld Bild-URL einfügen.

Sie können auch mit der KI-Bilderzeugung experimentieren. Klicken Sie dazu auf die Schaltfläche im Abschnitt Magisches Bild, beschreiben Sie das Bild, das Sie erstellen möchten, und klicken Sie auf Bilder generieren:

Um Text direkt über ein Bild zu legen, wählen Sie den Bildblock aus und klicken Sie auf Effekte anwenden. Klicken Sie auf Text, fügen Sie Ihren Inhalt ein und passen Sie dessen Parameter an:

Öffnen Sie im Abschnitt Aktion das Dropdown-Menü Aktionstyp, um festzulegen, was passiert, wenn auf das Bild geklickt wird: URL oder Deeplink (eine Website oder einen Deep-Link zu einer Seite in Ihrer App öffnen), Popup schließen oder Benutzerdefiniertes Javascript (einen benutzerdefinierten JavaScript-Handler einfügen). Wenn keine Aktion erforderlich ist, lassen Sie Popup schließen ausgewählt.

Hinweis

Wenn Sie beim Klicken auf das Bild eine Seite in Ihrer mobilen App öffnen möchten, wählen Sie die Option URL oder Deeplink und fügen Sie einen Deep-Link ein.

Schaltfläche

Sobald eine Schaltfläche zu Ihrer Vorlage hinzugefügt wurde, können Sie deren Text, Farbe, Padding und Ränder anpassen.

Hinweis

Wenn Sie den Schaltflächentext für jeden Benutzer personalisieren möchten, fügen Sie Tags hinzu.

KI kann Ihnen helfen, den Text für die Schaltfläche zu finden. Klicken Sie einfach auf die Schaltfläche im Abschnitt Intelligente Schaltflächen, geben Sie Schlüsselwörter ein und klicken Sie auf Vorschläge erhalten:

Um die Aktion festzulegen, die nach dem Klicken auf die Schaltfläche ausgeführt werden soll, gehen Sie zum Abschnitt Aktion und öffnen Sie das Dropdown-Menü Aktionstyp: URL oder Deeplink (eine Website oder einen Deep-Link öffnen), Popup schließen oder Benutzerdefiniertes Javascript (einen benutzerdefinierten JavaScript-Handler einfügen).

Hinweis

Wenn Sie beim Klicken auf die Schaltfläche eine Seite in Ihrer mobilen App öffnen möchten, wählen Sie die Option URL oder Deeplink und fügen Sie einen Deep-Link ein.

Trennlinie

Trennlinien sind Linien, die Sie zwischen Inhaltsblöcken platzieren können. Verwenden Sie sie, um Ihre Vorlage zu strukturieren und die wichtigsten Blöcke hervorzuheben. Sie können die Breite, den Linientyp, die Ausrichtung und die Padding-Einstellungen der Trennlinie ändern.

Formular

Hinweis

Um dieses Element zu konfigurieren, benötigen Sie die Hilfe eines Entwicklers.

Formulare ermöglichen es Ihnen, E-Mails, Telefonnummern, Präferenzen und andere Informationen von Benutzern zu sammeln, die für zukünftige Kommunikationen nützlich sein können. Dieses Element wird als Standard-HTML-Formular konfiguriert: Daten werden in einer GET- oder POST-Anfrage an die im Feld URL angegebene Adresse gesendet.

Klicken Sie auf den Feldnamen, um dessen Parameter zu konfigurieren:

• Feldtyp: der Datentyp, der im Feld übertragen werden soll;
• Feldname: der Name des Parameters, in dem die Daten aus dem Feld übergeben werden;
• Feldbezeichnung: Text, der über dem Feld angezeigt wird;
• Platzhaltertext;
• Kontrollkästchen, das anzeigt, ob das Feld zum Absenden des Formulars erforderlich ist.

Um ein weiteres Feld hinzuzufügen, klicken Sie auf Neues Feld hinzufügen und wählen Sie den Datentyp aus:

Sie können Formularparameter wie Breite, Ausrichtung, Abstand zwischen den Feldern, Schaltflächentext, Farben und Schriftarten anpassen.

HTML

Der HTML-Block ermöglicht es Ihnen, Ihren eigenen benutzerdefinierten HTML-Code zu einer Vorlage hinzuzufügen.

Dies kann besonders nützlich sein, um Ihre In-App-Nachrichten mit interaktiven oder visuell ansprechenden Elementen zu verbessern. Wenn Sie beispielsweise benutzerdefinierte Formulare für Umfragen erstellen möchten, können Sie den HTML-Block verwenden, um Ihre eigenen entworfenen Formulare einzubinden.

Nach der Einrichtung des Formulars können Sie die Statistiken direkt in Pushwoosh verfolgen, was eine einfache Analyse der Ergebnisse und Benutzerinteraktionen ermöglicht. Um dies zu implementieren, benötigen Sie die Unterstützung Ihres Entwicklungsteams. Bitte teilen Sie diesen Link mit ihnen.

Es gibt eine vorgefertigte In-App-Nachrichtenvorlage mit einem benutzerdefinierten Umfrageformular in den Standardvorlagen. Sie können diese als Referenz oder Ausgangspunkt für Ihre eigenen Umfrageformulare verwenden.

Außerdem können Sie Ihre In-App-Nachrichten durch das Einbetten von Videos für ein ansprechenderes Benutzererlebnis verbessern. Hier ist ein Beispiel, wie man ein YouTube-Video mit HTML einbettet:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>In-App Video Example</h1>

<div class="video-container">
       <iframe src="https://www.youtube.com/embed/TN1uyD2mONs?autoplay=1&mute=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

Menü

Das Menü-Element ermöglicht es Ihnen, mehrere klickbare Elemente in einer Reihe oder Spalte zu platzieren. Sie können beispielsweise eine Navigationsleiste oder Firmenkontakte hinzufügen.

Um ein Menüelement hinzuzufügen, klicken Sie auf Neues Element hinzufügen:

Fügen Sie den Elementtext hinzu und legen Sie die Aktion fest, die beim Klicken auf das Element ausgeführt werden soll:

Wählen Sie den horizontalen oder vertikalen Menütyp und fügen Sie bei Bedarf ein Trennzeichen zwischen den Elementen hinzu:

Bilderkarussell

Das Karussell-Element zeigt mehrere Bilder in einem wischbaren Slider innerhalb einer einzigen In-App-Nachricht an. Verwenden Sie es, um mehrere Produkte, Screenshots oder Onboarding-Schritte zu präsentieren.

So richten Sie das Karussell ein:

1. Wenn der Karussell-Block ausgewählt ist, wechseln Sie oben im Panel zwischen Mobil und Desktop, um jede Ansicht zu konfigurieren.

2. Verwenden Sie im Abschnitt Bilder die Tabs Bild 1, Bild 2, Bild 3 usw., um eine Folie auszuwählen. Klicken Sie auf +, um eine weitere Folie hinzuzufügen, oder auf das Löschsymbol, um die aktive zu entfernen.

3. Klicken Sie für die ausgewählte Folie auf Bild hochladen oder wählen Sie eine Option aus Weitere Bilder. Sie können auch einen gehosteten Link in die Bild-URL einfügen, einschließlich eines Bildes aus Ihrem Medienspeicher.

4. Geben Sie Alternativtext für die Folie ein. Um das Bild selbst anzupassen, klicken Sie neben der Miniaturansicht auf Bild bearbeiten.

5. Klicken Sie unten im Panel auf Weitere Optionen anzeigen, wenn Sie zusätzliche Folieneinstellungen benötigen.

Countdown-Timer

Das Timer-Element fügt einen Countdown zu Ihrer In-App-Nachricht hinzu. Verwenden Sie es für zeitlich begrenzte Angebote, Flash-Sales und Veranstaltungserinnerungen. Legen Sie das Zieldatum und die Zielzeit fest und passen Sie dann das Erscheinungsbild des Timers an.

So richten Sie den Timer ein:

1. Wenn der Timer-Block ausgewählt ist, wechseln Sie oben im Panel zwischen Mobil und Desktop, um jede Ansicht zu konfigurieren.

2. Stellen Sie im Abschnitt Countdown die Endzeit auf das Datum und die Uhrzeit ein, zu der der Countdown Null erreichen soll. Wählen Sie die Zeitzone und Sprache für die Timer-Beschriftungen.

3. Schalten Sie Beschriftungen ein, um Tage, Stunden, Minuten und Sekunden unter den Ziffern anzuzeigen, oder aus, um nur die Countdown-Zahlen anzuzeigen.

4. Stellen Sie im Abschnitt Styling Hintergrund, Ziffernfarbe und Beschriftungsfarbe ein. Wählen Sie Ziffernschriftart, Ziffernschriftgröße, Beschriftungsschriftart und Beschriftungsschriftgröße.

5. Konfigurieren Sie bei Bedarf weitere Optionen in Bild, Aktion und Allgemein.

Tabelle

Das Tabellen-Element ermöglicht es Ihnen, strukturierte Inhalte in Zeilen und Spalten darzustellen, wie z. B. Planvergleiche, Preislisten oder Funktionslisten. Fügen Sie Zeilen und Spalten hinzu oder entfernen Sie sie und passen Sie Ränder, Abstände und Textstile an.

So richten Sie die Tabelle ein:

1. Wenn der Tabellen-Block ausgewählt ist, wechseln Sie oben im Panel zwischen Mobil und Desktop, um jede Ansicht zu konfigurieren.

2. Stellen Sie im Abschnitt Layout die Spalten und Zeilen mit den Schaltflächen + und - ein.

3. Wählen Sie die Hintergrundfarbe. Schalten Sie Rahmen ein, um Stil, Dicke und Farbe festzulegen, oder verwenden Sie Weitere Optionen für erweiterte Rahmeneinstellungen. Schalten Sie Gestreifte Zeilen ein, um die Hintergründe der Zeilen abzuwechseln.

4. Klicken Sie auf eine Zelle in der Vorschau, um Kopf- oder Haupttext einzugeben.

5. Passen Sie in Kopfzeile und Inhalt Schriftarten, Farben und Textausrichtung für Kopf- und Hauptzellen an.

6. Konfigurieren Sie bei Bedarf Links, Allgemein und Responsives Design.

Personalisierung von Inhalten

Personalisieren Sie den Haupttext, die Überschrift oder den Schaltflächentext, um Ihre Inhalte relevanter und ansprechender zu gestalten. Sie können Benutzer beispielsweise mit Namen ansprechen oder ihre Vorlieben erwähnen.

Zuerst müssen Sie Tags einrichten und die Datenerfassung von Benutzern konfigurieren (z. B. über ein Feedback-Formular). Wählen Sie beim Erstellen von In-App-Nachrichten den erforderlichen Inhaltsblock aus, klicken Sie auf Merge-Tags und wählen Sie das Tag aus, das Sie verwenden möchten:

Mehrsprachige Vorlagen

Sie können die Texte Ihrer In-App-Nachrichtenvorlage für jede Sprache lokalisieren, die Ihre Benutzer sprechen. Wechseln Sie dazu zwischen den Sprachen in der Liste Bearbeitbare Sprache und bearbeiten Sie den Inhalt in jeder Sprache separat:

Wenn der Inhalt nicht lokalisiert ist, wird er in der Sprache angezeigt, die in den Spracheinstellungen als Standard angegeben ist.

Hinweis

Jedes Element, das Sie der Vorlage hinzufügen, erscheint mit demselben Inhalt für alle Sprachen. Denken Sie daran, die hinzugefügten Texte (einschließlich Schaltflächentexte) für alle Sprachen zu lokalisieren, die Sie in Ihrer Vorlage verwenden.

Erscheinungsbild und Verhalten von In-App-Nachrichten anpassen (iOS und Android Native)

Verwenden Sie die In-App-Einstellungen, um zu steuern, wie Ihre In-App-Nachrichten in nativen iOS- und Android-Apps aussehen und sich verhalten. Sie können die Bildschirmposition anpassen, Animationen auswählen und Wischgesten zum Schließen aktivieren.

So konfigurieren Sie die In-App-Einstellungen:

1. Klicken Sie oben auf dem Bildschirm auf Einstellungen.

2. Wählen Sie im Einstellungsfenster aus, wie Ihre In-App-Nachricht aussehen und sich verhalten soll, indem Sie die verfügbaren Optionen anpassen:

Nachrichtenposition auf dem Bildschirm festlegen

Wählen Sie, wo die Nachricht erscheinen soll.

Optionen umfassen: Vollbild, Oben, Mitte, Unten

Eingabeanimation auswählen

Wählen Sie, wie die Nachricht auf dem Bildschirm erscheint. In den Einstellungen ist dies die Option Präsentationsanimation.

• Hoch
• Runter
• Links
• Rechts
• Fade: die Nachricht blendet sich ein.
• Keine: die Nachricht erscheint sofort, ohne Animation.
• Standard: verwendet die in Ihrem App-Code definierte Animation (der SDK-Standard).

Ausgabeanimation auswählen

Wählen Sie, wie die Nachricht verschwindet. In den Einstellungen ist dies die Option Schließanimation.

• Hoch
• Runter
• Links
• Rechts
• Fade: die Nachricht blendet sich aus.
• Keine: die Nachricht verschwindet sofort, ohne Animation.
• Standard: verwendet die in Ihrem App-Code definierte Animation (der SDK-Standard).

Hinweis

Fade und Keine funktionieren derzeit auf Android. Auf iOS erscheint oder verschwindet das Modal sofort (Anpassung folgt in Kürze).

Wischen zum Schließen aktivieren (optional)

Ermöglichen Sie Benutzern, die Nachricht durch Wischen in eine oder mehrere Richtungen zu schließen.

Optionen umfassen: Links, Rechts, Hoch, Runter

3. Nachdem Sie Ihre Präferenzen ausgewählt haben, klicken Sie auf Anwenden, um die Änderungen zu speichern, oder auf Abbrechen, um sie zu verwerfen.

Vorlage speichern und verwenden

Klicken Sie auf Speichern, um die Änderungen zu übernehmen.

Hinweis

Der Editor speichert nicht gespeicherte Änderungen als Entwurf in Ihrem Browser. Wenn Sie dieselbe Vorlage erneut öffnen, klicken Sie im Dialogfeld Nicht gespeicherte Änderungen wiederherstellen? auf Wiederherstellen, um mit dem Entwurf fortzufahren, oder auf Verwerfen, um die zuletzt gespeicherte Version zu öffnen.

Jetzt können Sie Ihre In-App-Nachrichtenvorlage auf eine der folgenden Arten verwenden:

• Eine In-App als Teil einer Customer Journey anzeigen;
• Einen Push senden, der beim Anklicken eine In-App öffnet;
• Eine einzelne In-App für Ihre Benutzer anzeigen.