In-App-Nachrichten im integrierten Editor erstellen

Eine neue Vorlage hinzufügen

Gehen Sie zu Inhalt → In-Apps und klicken Sie auf Vorlage hinzufügen:

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.

Inhalt hinzufügen

Layout

Definieren Sie das Vorlagenlayout, indem Sie die erforderlichen Inhaltsblöcke per Drag-and-Drop in den Vorlagenkörper ziehen. Sie können ein Bild, Text, eine Schaltfläche, einen Trenner, ein ausfüllbares Formular, einen HTML-Block und ein Menü hinzufügen.

Wenn Sie mehr als ein Inhaltselement in einer Reihe platzieren möchten, fügen Sie das Spalten-Element zur Vorlage hinzu. Wählen Sie den erforderlichen Blocktyp aus und fügen Sie jeder Spalte Inhalt 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.

Erstellen von In-App-Nachrichten im 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.

In-App-Nachrichten im Hochformat

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

In-App-Nachrichten im Querformat

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

Hinzufügen von Spalten zu In-App-Nachrichten im Querformat

Wenn Sie Spalten zu Ihren In-App-Nachrichten im Querformat 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 In-App-Nachrichten im Querformat mit Spalten gestaltet haben, wechseln Sie zum Mobile-Tab. Scrollen Sie nach unten zum Abschnitt RESPONSIVE DESIGN, der sich am unteren Rand des Einstellungsfensters befindet, und aktivieren Sie die Option Do Not Stack on Mobile.

Hinweis

Dieser Schritt ist entscheidend, um das beabsichtigte Design Ihrer In-App-Nachrichten im Querformat beizubehalten, wenn sie auf mobilen Geräten angezeigt werden. 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 den Überschriftentext von der KI generieren lassen. Klicken Sie auf die Schaltfläche im Abschnitt Smart Headings, geben Sie einige Schlüsselwörter ein und klicken Sie auf Vorschläge erhalten:

Text

Texte sind auf die gleiche Weise wie Überschriften anpassbar. 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 mit der Option Smart Text verbessern:

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 mit der KI-Bilderzeugung experimentieren. Klicken Sie dazu auf die Schaltfläche im Abschnitt Magic Image, beschreiben Sie das Bild, das Sie erstellen möchten, und klicken Sie auf Bilder generieren:

Im Abschnitt Aktion können Sie die Aktion festlegen, die beim Klicken auf das Bild ausgeführt werden soll. Sie können eine Website öffnen (oder einen Deep Link zu einer Seite in Ihrer App) oder das Popup schließen. Sie können auch ein benutzerdefiniertes JavaScript-Handler-Attribut einfügen, um die Klickaktion für das Bild festzulegen. Wenn keine Aktion erforderlich ist, ignorieren Sie diese Einstellung.

Hinweis

Wenn Sie beim Klicken auf das Bild eine Seite in Ihrer mobilen App öffnen möchten, wählen Sie die Option Website öffnen 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.

Die KI kann Ihnen helfen, einen Text für die Schaltfläche zu finden. Klicken Sie einfach auf die Schaltfläche im Abschnitt Smart Buttons, 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 wählen Sie die gewünschte Option aus. Sie können eine Website öffnen oder das Popup schließen. Sie können auch ein benutzerdefiniertes JavaScript-Handler-Attribut einfügen, um die Klickaktion für die Schaltfläche festzulegen.

Hinweis

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

Trenner

Trenner 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 des Trenners ä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;
• Feldbeschriftung: Text, der über dem Feld angezeigt wird;
• Platzhaltertext;
• Kontrollkästchen, das angibt, 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.

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

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

<!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 einen Menüpunkt 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 einen Trenner zwischen den Elementen hinzu:

Personalisierung des Inhalts

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 Tags zusammenführen 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 für jede Sprache separat:

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

Hinweis

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

Allgemeine Vorlageneinstellungen

Auf dem Popup-Tab können Sie allgemeine Vorlageneinstellungen konfigurieren:

• 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.

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 aus, wo die Nachricht erscheinen soll.

Optionen umfassen: Vollbild, Oben, Mitte, Unten

Eintrittsanimation auswählen

Wählen Sie aus, wie die Nachricht auf dem Bildschirm erscheint.

Optionen umfassen: Hoch, Runter, Links, Rechts

Austrittsanimation auswählen

Wählen Sie aus, wie die Nachricht verschwindet.

Optionen umfassen: Hoch, Runter, Links, Rechts

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 Einstellungen 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.

Jetzt können Sie Ihre In-App-Nachrichtenvorlage auf eine der folgenden Weisen 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.