In-App-Nachrichten im integrierten Editor erstellen

YouTube-Video: In-Apps ohne Programmierung in unserem benutzerfreundlichen Editor erstellen

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 drei Möglichkeiten:

1. Laden Sie eine ZIP-Datei hoch mit Ihrer HTML-In-App-Nachricht.
2. Wählen Sie eine der vorgefertigten Vorlagen aus und passen Sie sie an.
3. Erstellen Sie Ihre eigene Vorlage von Grund auf neu.

In diesem Artikel befassen wir uns mit der Erstellung einer Vorlage von Grund auf. 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.

Inhalte hinzufügen

Layout

Definieren Sie das Vorlagenlayout, indem Sie die erforderlichen Inhaltsblöcke per Drag & Drop in den Vorlagenkörper ziehen. Sie können ein Bild, Text, eine Schaltfläche, eine Trennlinie, 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 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:

Wenn das gesamte Layout ausgewählt ist, können Sie auch die Abstandseinstellungen 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 optisch ansprechend und effektiv sind.

In-App-Nachrichten im Hochformat

Um In-App-Nachrichten für die Hochformatausrichtung zu erstellen, die 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.

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 RESPONSIVES DESIGN, der sich am unteren Rand des Einstellungsfeldes befindet, und aktivieren Sie die Option Nicht auf Mobilgeräten stapeln.

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 Abstandsparameter 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 Smart Headings, 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. Sie können die Schriftart, Farbe, Textausrichtung, Zeilenhöhe und Abstandsparameter ä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 Smart 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 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, Abstände 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 Schaltflächentext 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. 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.

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 Abstandseinstellungen 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;
• Feldbeschriftung: 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 vordefinierte In-App-Nachrichtenvorlage mit einem benutzerdefinierten Umfrageformular in den Standardvorlagen. 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 können:

<!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:

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 den Tag aus, den 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 zur 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.

Allgemeine Vorlageneinstellungen

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

• Legen Sie die Popup-Position auf dem Bildschirm fest;
• Ändern Sie die Breite und Höhe des Popups;
• Passen Sie die Randrundung 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:

Position der Nachricht auf dem Bildschirm festlegen

Wählen Sie, wo die Nachricht erscheinen soll.

Optionen umfassen: Vollbild, Oben, Mitte, Unten

Eingangs-Animation auswählen

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

Optionen umfassen: Nach oben, Nach unten, Nach links, Nach rechts

Ausgangs-Animation auswählen

Wählen Sie, wie die Nachricht verschwindet.

Optionen umfassen: Nach oben, Nach unten, Nach links, Nach 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, Oben, Unten

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:

• Zeigen Sie eine In-App als Teil einer Customer Journey an;
• Senden Sie einen Push, der beim Anklicken eine In-App öffnet;
• Zeigen Sie Ihren Nutzern eine einzelne In-App an.