In-App-Nachrichten mit dem No-Code-Editor erstellen

Um eine In-App-Vorlage (auch Rich Media genannt) zu erstellen, gehen Sie zu Inhalt → In-Apps (Rich Media) und klicken Sie auf Vorlage hinzufügen:

Screenshot, der die Schaltfläche „Vorlage hinzufügen“ im Bereich „Rich Media“ des Pushwoosh Control Panels zeigt

Hier haben Sie drei Möglichkeiten:

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

In diesem Artikel befassen wir uns mit der Erstellung einer Vorlage von Grund auf neu. Befolgen Sie die gleichen Schritte, um Ihre bestehende Vorlage anzupassen.

Layout definieren

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, eine Trennlinie, ein ausfüllbares Formular, einen HTML-Block und ein Menü hinzufügen.

Wenn Sie mehr als ein Inhaltselement in einer Zeile 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.

Erstellen von Rich Media im Hoch- und Querformat

Pushwoosh bietet die Flexibilität, Rich-Media-Inhalte sowohl im Hoch- als auch im Querformat zu erstellen, um sicherzustellen, dass Ihre Kampagnen auf allen Geräten visuell ansprechend und effektiv sind.

Rich Media im Hochformat

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

Rich Media im Querformat

Für Rich Media im Querformat, die typischerweise auf breiteren Bildschirmen wie Tablets oder in horizontal ausgerichteten Apps wie Spielen oder Musik-Playern angezeigt wird, navigieren Sie zum Tab Desktop im Editor. Hier können Sie Ihre Rich Media so strukturieren, dass sie einen breiteren horizontalen Raum nutzen.

Screenshot, der die Tabs „Mobil“ und „Desktop“ zum Umschalten zwischen Hoch- und Querformat zeigt

Hinzufügen von Spalten zu Rich Media im Querformat

Wenn Sie Spalten zu Ihrer Rich Media im Querformat hinzufügen müssen, fügen Sie zuerst das Element Spalte hinzu und definieren Sie die Anzahl und das Layout der benötigten Spalten.

Nachdem Sie Ihre Rich Media im Querformat mit Spalten entworfen haben, wechseln Sie zum Tab Mobil.

Scrollen Sie nach unten zum Abschnitt RESPONSIVE DESIGN, der sich am unteren Rand des Einstellungsfensters befindet, und aktivieren Sie die Option Nicht auf Mobilgeräten stapeln.

Pushwoosh ermöglicht es Ihnen auch, Spaltenlayouts in Ihren Rich Media 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.

Screenshot, der gemischte Spaltenlayout-Konfigurationen zeigt, bei denen einige vertikal und andere horizontal gestapelt sind

Inhaltselemente

Überschrift

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

Sie können auch Zeit sparen, indem Sie den Überschriftentext von der KI 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 sind auf die gleiche Weise wie Überschriften anpassbar: Sie können die Schriftart, Farbe, Textausrichtung, Zeilenhöhe und Padding-Parameter ändern.

Sie können auch den Pushwoosh KI-Editor verwenden, um Ihren Text in einem anderen Tonfall umzuschreiben, seine Zeichenlänge zu ändern und die Grammatik zu überprüfen. Klicken Sie dazu auf den Textblock → Intelligenter Text und wählen Sie eines der integrierten Textformate:

Bild

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

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 Magisches Bild, 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: 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.

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.

Die KI kann Ihnen helfen, einen 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 anzugeben, 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: 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.

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 Padding-Einstellungen der Trennlinie ändern.

Formular

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.

Screenshot, der das Formular-Konfigurationspanel mit URL-Feld und Einstellungen für die Anforderungsmethode zeigt

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

Feldtyp: der Datentyp, der im Feld übertragen werden soll;
Feldname: der Name des Parameters, an den 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.

Screenshot, der die Konfigurationsoptionen für Formularfelder zeigt, einschließlich Feldtyp, Name, Beschriftung und Platzhalter

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

Screenshot, der die Schaltfläche „Neues Feld hinzufügen“ und das Dropdown-Menü mit den verfügbaren Felddatentypen zeigt

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

HTML

Fügen Sie den HTML-Block hinzu, wenn Sie Ihren eigenen HTML-Code in die Vorlage einfügen möchten.

Menü

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

Um einen Menüpunkt hinzuzufügen, klicken Sie auf Neuen Punkt hinzufügen:

Screenshot, der die Schaltfläche „Neuen Punkt hinzufügen“ zum Hinzufügen von Menüpunkten zur Vorlage zeigt

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

Screenshot, der die Konfiguration von Menüpunkten mit Textfeld und Aktionseinstellungen zeigt

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

Screenshot, der die Menü-Layout-Optionen mit horizontalen und vertikalen Ausrichtungseinstellungen zeigt

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 Rich Media den gewünschten 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 Texte in Ihrer Rich-Media-Vorlage 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:

Screenshot, der das Dropdown-Menü „Bearbeitbare Sprache“ zur Auswahl und Lokalisierung von Vorlageninhalten zeigt

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

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.

Allgemeine Vorlageneinstellungen

Auf dem Tab Popup 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 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.

Speichern und Verwenden der Vorlage

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

Screenshot, der die Schaltfläche „Speichern“ zum Speichern der Änderungen an der In-App-Nachrichtenvorlage hervorhebt

Jetzt können Sie Ihre Rich-Media-Vorlage verwenden, um Ihre In-App-Nachrichten zu senden. Bitte folgen Sie dieser Anleitung, um dies zu tun >