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 Content → In-apps und klicken Sie auf Add template:

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

1. Upload ZIP — laden Sie eine ZIP-Datei mit Ihrer HTML-In-App-Nachricht hoch.
2. Create new template — 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 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 Create new template und klicken Sie auf Add template:

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 auf dem Tab Popup:

• Legen Sie die Popup-Position 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 Teilbildschirm-In-Apps verwenden denselben Editor. Wählen Sie unten ein Format und passen Sie die Breite und Höhe des Popups entsprechend an.

Vollbild-In-App-Nachricht

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

Stellen Sie auf dem 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 Settings → In-App Settings und stellen Sie die Nachrichtenposition auf Fullscreen ein.

Teilbildschirm-In-App-Nachricht

Teilbildschirm-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 auf dem Tab Popup eine kleinere Breite und Höhe ein, sodass das Popup nicht den gesamten Bildschirm bedeckt.

Hinweis

Öffnen Sie für native iOS- und Android-Apps Settings → In-App Settings und wählen Sie Center, Top oder Bottom für die Nachrichtenposition.

Tipp

Um Popups zur Wiederherstellung der Push-Berechtigung (Opt-in und Opt-out) in der Customer Journey zu automatisieren, lesen Sie 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, Texte, 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 Columns 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 Abstandseinstellungen 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 (Tab ‘Mobile’)

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

Querformat (Tab ‘Desktop’)

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.

Spalten in Querformat-Layouts

Wenn Sie Spalten zu Ihren In-App-Nachrichten im Querformat hinzufügen müssen, fügen Sie zuerst das Column-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 Einstellungsfeldes 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 bei der Anzeige auf mobilen Geräten beizubehalten. Er stellt sicher, dass die Spalten nebeneinander bleiben und nicht untereinander gestapelt werden.

Pushwoosh ermöglicht es Ihnen auch, Spaltenlayouts in Ihren In-App-Nachrichten zu mischen. 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 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 Get Suggestions:

Text

Texte sind auf die gleiche Weise anpassbar wie Überschriften (im Editor wird dieser Block als Paragraph bezeichnet). Sie können 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 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 Image URL angeben. Sie können auch die URL eines Bildes aus Ihrem Media Store in das Feld Image URL einfügen.

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 Generate Images:

Um Text direkt auf einem Bild zu platzieren, wählen Sie den Bildblock aus und klicken Sie auf Apply Effects. Klicken Sie auf Text, fügen Sie Ihren Inhalt ein und passen Sie dessen Parameter an:

Öffnen Sie im Abschnitt Action das Dropdown-Menü Action Type, um festzulegen, was beim Klicken auf das Bild geschieht: URL or Deeplink (eine Website oder einen Deep Link zu einer Seite in Ihrer App öffnen), Close Popup oder Custom Javascript (einen benutzerdefinierten JavaScript-Handler einfügen). Wenn keine Aktion erforderlich ist, lassen Sie Close Popup 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 or 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, 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, Schaltflächentexte zu finden. Klicken Sie einfach auf die Schaltfläche im Abschnitt Smart Buttons, geben Sie Schlüsselwörter ein und klicken Sie auf Get Suggestions:

Um die Aktion festzulegen, die nach dem Klicken auf die Schaltfläche ausgeführt werden soll, gehen Sie zum Abschnitt Action und öffnen Sie das Dropdown-Menü Action Type: URL or Deeplink (eine Website oder einen Deep Link öffnen), Close Popup oder Custom 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 or 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 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:

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

Um ein weiteres Feld hinzuzufügen, klicken Sie auf Add New Field 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.

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 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 Menu-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 Add New Item:

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 eine Trennlinie zwischen den Elementen hinzu:

Bilderkarussell

Das Carousel-Element zeigt mehrere Bilder in einem wischbaren Schieberegler 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 Carousel-Block ausgewählt ist, wechseln Sie oben im Panel zwischen Mobile und Desktop, um jede Ansicht zu konfigurieren.

2. Im Abschnitt Images verwenden Sie die Tabs Image 1, Image 2, Image 3 usw., um eine Folie auszuwählen. Klicken Sie auf +, um eine weitere Folie hinzuzufügen, oder auf das Löschsymbol, um die aktive Folie zu entfernen.

3. Für die ausgewählte Folie klicken Sie auf Upload Image oder wählen Sie eine Option aus More Images. Sie können auch einen gehosteten Link in Image URL einfügen, einschließlich eines Bildes aus Ihrem Media Store.

4. Geben Sie Alternate Text für die Folie ein. Um das Bild selbst anzupassen, klicken Sie neben der Miniaturvorschau auf Edit Image.

5. Klicken Sie unten im Panel auf Show More Options, 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, Blitzverkäufe 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 Mobile und Desktop, um jede Ansicht zu konfigurieren.

2. Im Abschnitt Countdown stellen Sie die End Time auf das Datum und die Uhrzeit ein, zu der der Countdown Null erreichen soll. Wählen Sie die Timezone und Language für die Timer-Beschriftungen.

3. Schalten Sie Labels ein, um Days, Hours, Minutes und Seconds unter den Ziffern anzuzeigen, oder aus, um nur die Countdown-Zahlen anzuzeigen.

4. Im Abschnitt Styling legen Sie Background, Digits Color und Labels Color fest. Wählen Sie Digits Font, Digits Font Size, Labels Font und Labels Font Size.

5. Konfigurieren Sie bei Bedarf weitere Optionen in Image, Action und General.

Tabelle

Das Table-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 Table-Block ausgewählt ist, wechseln Sie oben im Panel zwischen Mobile und Desktop, um jede Ansicht zu konfigurieren.

2. Im Abschnitt Layout stellen Sie Columns und Rows mit den Schaltflächen + und - ein.

3. Wählen Sie eine Background Color. Schalten Sie Border ein, um Stil, Dicke und Farbe festzulegen, oder verwenden Sie More Options für erweiterte Randeinstellungen. Schalten Sie Striped Rows ein, um die Hintergründe der Zeilen abzuwechseln.

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

5. In Header und Content passen Sie Schriftarten, Farben und Textausrichtung für Kopf- und Hauptzellen an.

6. Konfigurieren Sie bei Bedarf Links, General und Responsive 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 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 Editable language und bearbeiten Sie den Inhalt in jeder Sprache separat:

Wenn der Inhalt nicht lokalisiert ist, wird er in der Sprache angezeigt, die in den Language settings als default 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.

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

2. Im Einstellungsfenster wählen Sie 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: Fullscreen, Top, Center, Bottom

Eingangsanimation auswählen

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

Optionen umfassen: Up, Down, Left, Right

Ausgangsanimation auswählen

Wählen Sie, wie die Nachricht verschwindet. In den Einstellungen ist dies die Option Close Animation.

Optionen umfassen: Up, Down, Left, Right

Wischen zum Schließen aktivieren (optional)

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

Optionen umfassen: Left, Right, Up, Down

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

Vorlage speichern und verwenden

Klicken Sie auf Save, 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;
• Eine Push-Benachrichtigung senden, die beim Anklicken eine In-App öffnet;
• Eine einzelne In-App für Ihre Benutzer anzeigen.