Referenz für In-App-Editor-Blöcke

Referenz für jeden Block, den Sie auf der Arbeitsfläche des integrierten Editors hinzufügen können.

Jeder Blocktyp dient einem anderen Zweck in der Nachricht:

• Überschrift: Titel und kurze Schlagzeilen
• Text: Fließtext und längere Beschreibungen
• Schaltfläche: ein antippbarer Call-to-Action
• Bild: Bilder aus dem Medienspeicher, Upload oder von einer URL
• Video: ein antippbares Video-Thumbnail, das ein YouTube- oder Vimeo-Video öffnet
• Karte: ein Bild mit Überschrift, Text und Schaltfläche in einem Layout
• Trennlinie: eine Linie, die Abschnitte trennt
• Spalten: nebeneinander liegende Layouts (2, 3 oder 4 gleiche Spalten oder 33/67 und 67/33 Aufteilungen)
• Timer: ein Countdown für Angebote und Fristen
• Barcode: ein scannbarer Code 128, EAN-13, EAN-8, UPC-A oder QR-Code, der aus einem Personalisierungswert, wie z. B. einem Gutschein, generiert wird
• Menü: eine Zeile oder Spalte mit Navigations- oder Kontaktlinks
• Soziale Netzwerke: Symbole, die auf Ihre sozialen Profile verlinken
• HTML: benutzerdefiniertes HTML, wie z. B. ein Formular, eine Umfrage oder ein eingebettetes Video
• Produkte: ein Raster von Produktkarten aus Ihrem Produktkatalog oder dem abgebrochenen Warenkorb eines Benutzers

Wie man Editor-Blöcke konfiguriert

Ziehen Sie einen Block aus dem Tab Blöcke auf die Arbeitsfläche oder klicken Sie darauf, um ihn am Ende hinzuzufügen. Wählen Sie den Block aus, um seine Einstellungen im rechten Bereich zu öffnen und Inhalt, Links, Größe und Abstände zu konfigurieren.

Tipp

Jeder Block hat auch die Einstellungen Sichtbarkeit und Anzeigebedingung. Verwenden Sie diese, um einen Block auf dem Telefon oder Desktop auszublenden oder ihn nur bestimmten Benutzern anzuzeigen. Erfahren Sie mehr

Überschrift und Text

Die Blöcke Überschrift und Text enthalten den Text, den die Benutzer in der In-App-Nachricht lesen. Bearbeiten Sie den Text auf der Arbeitsfläche und formatieren Sie ihn mit der Symbolleiste.

Klicken Sie auf einen Überschrift- oder Text-Block, um dessen Text auf der Arbeitsfläche zu bearbeiten. Wählen Sie einen Text aus, um die Formatierungssymbolleiste aufzurufen: Fett, Kursiv, Unterstrichen, Ausrichtung, eine Link-Schaltfläche und ein Dropdown-Menü für den Textstil.

Merge-Tags sind Platzhalter, die einen Tag-Wert aus dem Profil des Benutzers in die Nachricht einfügen, sodass jeder Abonnent personalisierten Text sieht. Um einen hinzuzufügen, wählen Sie den Text aus, klicken Sie in der Symbolleiste auf Merge-Tags und wählen Sie einen Tag aus Ihrem Konto. Erfahren Sie mehr über personalisierte In-App-Nachrichten

Bild

Ein Bild-Block zeigt ein Bild in der In-App-Vorlage an.

Wählen Sie es auf der Arbeitsfläche aus, um die Bild-Einstellungen im rechten Bereich zu öffnen.

• Bild hinzufügen / Bild ersetzen: Klicken Sie auf Bild hinzufügen, wenn der Block leer ist, oder auf Bild ersetzen, wenn bereits ein Bild festgelegt ist. Sie können eine Datei hochladen oder eine aus Ihrem Medienspeicher auswählen.
• Bild-URL: Fügen Sie einen gehosteten Link zum Bild ein.
• Alt-Text: Beschreiben Sie das Bild für die Barrierefreiheit.
• Prompt: Der KI-Generierungsprompt für ein Bild, das Sie mit Mit KI generieren erstellt haben.
• Breite (px) / Höhe (px): Legen Sie die Bildgröße in Pixeln fest. Lassen Sie ein Feld leer, damit die Größe automatisch angepasst wird. Unter diesen Feldern zeigt ein Hinweis die Größe an, in der das Bild gerendert wird, und die Größe, die hochgeladen werden sollte: 2× die gerenderte Größe, damit das Bild auf Telefonbildschirmen scharf bleibt. Wenn die hochgeladene Datei auf einer der Achsen kleiner als die gerenderte Größe ist, warnt eine Meldung, dass sie hochskaliert wird und verpixelt aussieht.
• Eckenradius (px): Runden Sie die Ecken des Bildes ab.
• Ausrichtung: Links, zentriert oder rechts.

Unter Link legen Sie einen Aktionstyp (z. B. Website öffnen oder URL oder Deeplink) und dessen URL fest, um etwas zu öffnen, wenn auf das Bild getippt wird, und ein Linkziel, um es im selben oder einem neuen Tab zu öffnen.

Unter Abstand aktivieren Sie Innenabstand, um Platz um das Bild hinzuzufügen. Verwenden Sie Alle Seiten für den gleichen Innenabstand auf jeder Seite oder aktivieren Sie Weitere Optionen, um jede Seite separat einzustellen.

Empfohlene Bildgrößen

Laden Sie ein Bild in der 2-fachen Größe hoch, die der Hinweis unter Breite (px) / Höhe (px) für diesen Block anzeigt. Das ist die Zahl, die Sie überprüfen sollten, da sie Ihre eigenen Breite/Höhe- und Zuschneideeinstellungen widerspiegelt. Wenn Sie noch keinen Block festgelegt haben, verwenden Sie diese gängigen Slot-Breiten als Ausgangspunkt:

Wo das Bild platziert ist	Rendert bei	Mindestens hochladen
Bild in voller Breite im Standard-Popup	bis zu 600 px breit	1200 px breit
Telefonvorschau	360–430 px breit, je nach Gerät	bis zu 860 px breit
Tablet-/Desktop-Vorschau	768 px breit	1536 px breit

Das Seitenverhältnis liegt bei Ihnen. Das Layout ist responsiv, sodass die Höhe der von Ihnen eingestellten Höhe (px) oder dem Zuschnitt folgt. Siehe Dokument- und Popup-Größe, um die Standard-Popup-Breite zu ändern.

Hinweis

Diese Tabelle bezieht sich auf Bildblöcke im integrierten Editor. Native In-Apps (modal, Vollbild, Stories, Sheet, Karussell, Banner, Video) haben noch keine empfohlene Cover-Größe.

Video

Ein Video-Block fügt ein YouTube- oder Vimeo-Video als antippbares Thumbnail zur Nachricht hinzu. Die Nachricht zeigt ein Standbild mit einem ▶-Overlay. Ein Tippen darauf öffnet das Video in der YouTube- oder Vimeo-App oder im Browser.

Wählen Sie den Block auf der Arbeitsfläche aus, um seine Einstellungen zu öffnen:

• Video-URL: Fügen Sie einen YouTube- oder Vimeo-Link ein. Der Editor ruft automatisch ein Thumbnail ab.
• Alt-Text: Beschreiben Sie das Video für die Barrierefreiheit.
• Thumbnail-URL: Behalten Sie das automatisch abgerufene Thumbnail bei oder klicken Sie auf Thumbnail hinzufügen / Thumbnail ersetzen, um eines aus dem Medienspeicher auszuwählen, oder fügen Sie direkt einen gehosteten Link ein.
• Wiedergabeschaltflächen-Overlay: Standardmäßig aktiviert. Deaktivieren Sie es, um das einfache Thumbnail ohne das ▶-Overlay anzuzeigen.
• Breite (px), Eckenradius (px) und Ausrichtung: Steuern Sie, wie das Thumbnail aussieht und wo es im Layout platziert ist.

Karte

Ein Karten-Block kombiniert ein Bild mit einer Überschrift, einem Text und einer Schaltfläche in einem einzigen vorgefertigten Layout, sodass Sie nicht vier separate Blöcke von Hand platzieren und ausrichten müssen.

• Layout: Wählen Sie, auf welcher Seite das Bild im Verhältnis zum Inhalt platziert wird, oder aktivieren Sie Text um Bild fließen lassen.
• Bild: Fügen Sie das Bild hinzu oder ersetzen Sie es, legen Sie einen Alt-Text fest, bearbeiten Sie den KI-Generierungs-Prompt, fügen Sie Innenabstand hinzu und legen Sie den Eckenradius (px) fest.
• Größe & Passform: Legen Sie die Breite, Höhe, den Zuschnitt (Original oder ein festes Verhältnis) und die Passform (Cover oder ein Fokuspunkt) des Bildes fest. Die genauen Felder hängen vom gewählten Layout ab.
• Link: Sorgen Sie dafür, dass die gesamte Karte beim Antippen eine URL öffnet.

Bearbeiten Sie die Überschrift, den Text und die Schaltfläche der Karte auf die gleiche Weise wie die eigenständigen Blöcke Überschrift, Text und Schaltfläche.

Schaltfläche

Eine Schaltfläche ist ein antippbarer Call-to-Action in der In-App-Nachricht. Verwenden Sie sie, um eine URL zu öffnen, benutzerdefiniertes JavaScript auszuführen oder die Nachricht zu schließen.

Klicken Sie auf einen Schaltflächen-Block, um dessen Beschriftung auf der Arbeitsfläche zu bearbeiten. Verwenden Sie die Symbolleiste, um Schriftgröße, Textfarbe, Fett, Kursiv, Unterstrichen und Ausrichtung zu ändern.

Um festzulegen, was passiert, wenn der Benutzer auf die Schaltfläche tippt:

1. Klicken Sie auf das Link-Symbol in der Symbolleiste, um Link einfügen/bearbeiten zu öffnen.
2. Wählen Sie einen Aktionstyp: Website öffnen, URL oder Deeplink oder Benutzerdefiniertes Javascript.
3. Füllen Sie die Felder für diese Aktion aus (siehe unten).
4. Klicken Sie auf Speichern.

Website öffnen

Website öffnen öffnet eine Webseite, wenn der Benutzer auf die Schaltfläche tippt. Geben Sie die Adresse in URL ein, zum Beispiel https://example.com.

URL oder Deeplink

URL oder Deeplink öffnet einen Link oder Deeplink, wenn der Benutzer auf die Schaltfläche tippt. Geben Sie die Adresse in URL ein, zum Beispiel einen App-Bildschirm: myapp://screen.

Benutzerdefiniertes JavaScript ausführen

Benutzerdefiniertes Javascript führt Code aus, wenn der Benutzer auf die Schaltfläche tippt. Geben Sie den Code in das Feld onClick ein.

Verwenden Sie dies, wenn ein Tippen etwas in Pushwoosh bewirken soll, nicht nur einen Link öffnen. Die Person in der App sieht immer noch eine normale Schaltfläche. Sie sieht keine Tags oder Ereignisse. Sie entscheiden, was als Nächstes auf dem Bildschirm passiert: die Nachricht offen lassen oder sie im selben onClick schließen.

Verfügbare Methoden in onClick

• pushwoosh.closeInApp(): Schließt die In-App-Nachricht. Lassen Sie es weg, um die Nachricht nach dem Tippen offen zu halten.
• pushwoosh.sendTags({...}): Speichert Werte als Geräte-Tags für spätere Kampagnen.
• pushwoosh.postEvent(...): Sendet ein benutzerdefiniertes Ereignis, zum Beispiel um eine Customer Journey zu starten.
• pushwoosh.getTags(...): Liest aktuelle Tags. Nützlich in benutzerdefiniertem HTML, um zu ändern, was die Nachricht anzeigt.
• pushwoosh.getCustomData(): Liest benutzerdefinierte Daten, die von der Push-Benachrichtigung übergeben wurden, die diese In-App geöffnet hat.
• pushwoosh.registerForPushNotifications(): Löst den nativen Push-Berechtigungsdialog der Plattform aus, zum Beispiel von einer Vorab-Berechtigungs-In-App.

Beispiel: Benutzer ein Interesse auswählen und für spätere Kampagnen speichern lassen

1. Fügen Sie eine Frage in einem Text- oder Überschrift-Block hinzu, zum Beispiel: „Welchen Sport mögen Sie?“
2. Fügen Sie eine Schaltfläche pro Option hinzu, zum Beispiel: Yoga und Fitnessstudio.

3. Setzen Sie den Aktionstyp für jede Schaltfläche auf Benutzerdefiniertes Javascript.
4. Fügen Sie für die Yoga-Schaltfläche dies in onClick ein:

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. Fügen Sie für die Fitnessstudio-Schaltfläche dies in onClick ein:

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

Wenn der Benutzer auf Yoga tippt, schreibt Pushwoosh den interest-Tag auf sein Gerät und schließt die In-App. Sie können diesen Benutzer dann in einem Segment oder einer Customer Journey ansprechen.

Erfahren Sie mehr darüber, wie Sie In-Apps mit JavaScript erstellen

Trennlinie

Eine Trennlinie ist eine horizontale Linie zwischen Inhaltsblöcken. Verwenden Sie sie, um Abschnitte in der Vorlage visuell zu trennen.

Konfigurieren Sie den Linienstil (Durchgezogen, Gestrichelt, Gepunktet), die Farbe, die Dicke und die Breite im Einstellungsbereich.

HTML

Der HTML-Block ermöglicht es Ihnen, benutzerdefiniertes HTML in eine In-App-Vorlage einzufügen. Verwenden Sie ihn für ein benutzerdefiniertes Formular, eine Umfrage oder ein eingebettetes Video, wenn es keinen dedizierten Formularblock für In-App-Nachrichten gibt.

Beispiele

Die folgenden Beispiele zeigen gängige Möglichkeiten, den HTML-Block in einer In-App-Vorlage zu verwenden: ein Lead-Formular, eine Umfrage und ein eingebettetes Video.

Hinweis

Die Formular- und Umfragebeispiele speichern Geräte-Tags und senden Ereignisse über Pushwoosh. Erstellen Sie die benutzerdefinierten Ereignisse in Ihrem Konto, bevor Sie sie in Kampagnen verwenden.

Lead-Formular

Dieses Lead-Formular schreibt Namen und E-Mail als Tags, sendet ein promo_requested-Ereignis, zeigt eine Dankesnachricht an und schließt dann die In-App.

HTML-Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email. We'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>

Umfrage

Diese Umfrage speichert die ausgewählte Trainingszeit als Tag, sendet ein schedule_survey_completed-Ereignis, zeigt eine Dankesnachricht an und schließt dann die In-App.

HTML-Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

Video

Dieses Beispiel bettet ein YouTube-Video in die In-App-Nachricht ein.

HTML-Code

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

Der Menü-Block platziert mehrere klickbare Elemente in einer Zeile oder Spalte. Verwenden Sie ihn für eine Navigationsleiste oder eine Liste von Unternehmenskontakten.

Für jedes Menüelement legen Sie fest:

• Beschriftung: der Text, den die Benutzer sehen
• URL: wohin das Element führt
• Ziel: gleicher Tab oder ein neuer Tab

In den Blockeinstellungen können Sie auch festlegen:

• Richtung: Horizontal oder Vertikal
• Ausrichtung: Links, Zentriert oder Rechts
• Trennzeichen: ein optionales Trennzeichen zwischen den Elementen
• Schriftart, Größe, Gewicht, Buchstabenabstand und Link-/Textfarben

Soziale Netzwerke

Der Soziale Netzwerke-Block zeigt eine Reihe von Social-Media-Symbolen an, die auf Ihre Profile verlinken. Verwenden Sie ihn, um Benutzer von der In-App-Nachricht zu Facebook, Instagram, X und anderen Plattformen zu leiten.

Fügen Sie Plattform-Einträge hinzu und legen Sie dann die Ausrichtung, die Symbolgröße und den Abstand zwischen den Symbolen fest.

Countdown-Timer

Der Timer-Block ist ein Countdown in der In-App-Nachricht. Verwenden Sie ihn für zeitlich begrenzte Angebote, Blitzverkäufe und Veranstaltungserinnerungen.

So richten Sie ihn ein:

1. Unter Countdown legen Sie Enddatum und Endzeit fest und wählen dann die Zeitzone und Sprache für die Timer-Beschriftungen.
2. Aktivieren Sie Beschriftungen, um die Beschriftungen „Tage / Stunden / Minuten / Sekunden“ unter den Ziffern anzuzeigen, oder deaktivieren Sie sie für nur Zahlen.
3. Unter Erscheinungsbild legen Sie Hintergrund, Ziffernfarbe, Beschriftungsfarbe und die Schriftgröße für Ziffern (Standard 40px) und Beschriftungen (Standard 16px) fest.
4. Passen Sie den Abstand (Innenabstand) nach Bedarf an.

Barcode

Der Barcode-Block rendert einen scannbaren Barcode oder QR-Code aus einem Personalisierungswert, meistens einem Gutschein.

So richten Sie ihn ein:

1. Behalten Sie unter Code den Geräte-Tag {Coupon|String|} bei oder klicken Sie auf Merge-Tag und wählen Sie einen anderen Geräte-Tag, der den Code jedes Empfängers speichert. In-Apps werten Liquid nicht aus. Das SDK füllt den Tag auf dem Gerät aus, bevor die In-App angezeigt wird. Dies unterscheidet sich vom E-Mail-Barcode-Block, der {{voucher}} verwendet.

2. Wählen Sie die Symbologie:
   • QR: ein quadratischer 2D-Code, den Telefone scannen können. Akzeptiert jeden Text, einschließlich alphanumerischer Codes wie WELCOME2025-A1
   • Code 128: ein linearer Barcode für jeden Text, einschließlich derselben alphanumerischen Codes
   • EAN-13: der gängige Einzelhandels-Barcode in Europa und vielen anderen Regionen. Nur Ziffern, 12–13 Zeichen
   • EAN-8: ein kürzerer Einzelhandels-Barcode für kleine Verpackungen. Nur Ziffern, 7–8 Zeichen
   • UPC-A: der gängige Einzelhandels-Barcode in Nordamerika. Nur Ziffern, 11–12 Zeichen
3. Wenn Sie QR gewählt haben, stellen Sie die Fehlerkorrektur ein. Dies fügt zusätzliche Daten hinzu, sodass der Code auch dann noch gescannt werden kann, wenn ein Teil davon verdeckt, abgenutzt oder schwer zu erkennen ist. Wählen Sie L, M, Q oder H (Standard M). Höhere Stufen überstehen mehr Schaden, machen aber das Muster dichter, was bei kleinen Größen schwerer zu lesen sein kann. Überspringen Sie dieses Feld für andere Symbologien.
4. Aktivieren Sie optional Code in Ziffern drucken, um den Wert unter dem Code anzuzeigen.

5. Stellen Sie unter Erscheinungsbild die Balkenfarbe dunkler als den Hintergrund ein – die meisten Scanner können helle Balken auf dunklem Hintergrund nicht lesen. Stellen Sie Breite (px) und Höhe (px) auf mindestens 600×200 ein, damit der Code im typischen Handy-Kamera-Bereich scannbar bleibt. Lassen Sie Ruhezone, Module auf Auto für den Standardrand.

Hinweis

Auf der Arbeitsfläche zeigt der Block einen Beispiel-Barcode an, nicht den echten Empfängercode. Ein Geräte-Tag wie {Coupon|String|} wird nur auf dem Gerät ausgefüllt, daher kann die Vorschau das echte Bild ebenfalls nicht erstellen. Überprüfen Sie den Barcode auf einem echten Gerät, bevor Sie ihn veröffentlichen. Verwenden Sie EAN-13, EAN-8 oder UPC-A nur für einen Tag-Wert, der nur aus Ziffern besteht und die jeweils erwartete Länge hat. Für alphanumerische Codes wie WELCOME2025-A1 verwenden Sie stattdessen Code 128 oder QR.

Spalten

Spalten teilen die Arbeitsfläche in nebeneinander liegende Abschnitte auf, sodass Sie Inhalte in einer Reihe nebeneinander platzieren können.

Ziehen Sie einen dieser Blöcke auf die Arbeitsfläche:

• 2 Spalten: zwei gleiche Spalten
• 3 Spalten: drei gleiche Spalten
• 4 Spalten: vier gleiche Spalten
• 33 / 67: linke Spalte etwa 33 % breit, rechte etwa 67 %
• 67 / 33: linke Spalte etwa 67 % breit, rechte etwa 33 %

Fügen Sie dann Inhalte zu jeder Spalte hinzu. Um den Abstand für alle Spalten in der Vorlage zu ändern, öffnen Sie Einstellungen → Spalten-Standardwerte und passen Sie den äußeren Innenabstand, den Spalten-Innenabstand und den Abstand zwischen den Spalten an.

Produkte

Ein Produkte-Block zeigt ein Raster von Produktkarten aus einer gemeinsamen Vorlage an. Jede Karte kann ein Bild, einen Titel, eine Beschreibung, einen Preis und eine Kaufen-Schaltfläche enthalten. Die Vorlage wiederholt sich für jedes Produkt.

Wählen Sie im Einstellungsbereich unter Quelle aus, woher die Produkte stammen:

• Manuell: Geben Sie Produkte von Hand ein oder klicken Sie auf Aus Katalog auswählen…, um bestimmte Artikel aus Ihrem Produktkatalog nach ID auszuwählen. Sie können beides im selben Block mischen.
• Katalogregel: Ziehen Sie Produkte automatisch nach Kategorie und Sortierreihenfolge, die frisch aus dem Katalog abgerufen werden, wenn die Nachricht angezeigt wird.
• Warenkorb: Zeigen Sie die Artikel aus dem aktuellen abgebrochenen Warenkorb jedes Benutzers an. So richten Sie eine Kampagne für abgebrochene Warenkörbe ein

Hinweis

Katalogregel und Warenkorb erfordern Inhaltsvorlagen in Ihrem Plan und ein API-Zugriffstoken (Einstellungen → API-Zugriff). Wenn der Quelle-Selektor nicht zu einem von ihnen wechselt oder der Block keine Produkte rendert, wenden Sie sich an den Support oder Ihren Kundenbetreuer oder erstellen Sie ein Token und wählen Sie die Quelle erneut aus.

Sobald Sie eine Quelle ausgewählt haben, steuern diese Einstellungen, wie das Raster und seine Karten aussehen:

• Anzahl der Produkte (oder Max. angezeigte Produkte für Warenkorb): wie viele Karten angezeigt werden sollen.
• Spalten: 1, 2 oder 3 Karten pro Reihe.
• Abstand: der Raum zwischen den Karten.
• Beschreibungslimit: das Zeichenlimit, auf das der Beschreibungstext gekürzt wird, damit die Karten eine einheitliche Größe behalten.
• Kartenvorlage: Wählen Sie ein Layout und legen Sie dann Kartenhintergrund, Karten-Eckenradius und Inhalts-Innenabstand für jede Karte fest.

Blöcke speichern und wiederverwenden

Speichern Sie einen Block, um ihn in dieser oder anderen In-App-Vorlagen wiederzuverwenden, anstatt ihn jedes Mal neu zu erstellen.

1. Wählen Sie den Block auf der Arbeitsfläche aus.
2. Klicken Sie auf das Lesezeichen-Symbol (Block zur Wiederverwendung speichern) in der Symbolleiste des Blocks und geben Sie ihm einen Namen.

Gespeicherte Blöcke erscheinen unter Gespeicherte Blöcke am unteren Rand des Blöcke-Tabs.

• Ziehen Sie einen gespeicherten Block auf die Arbeitsfläche oder klicken Sie darauf, um ihn am Ende der Vorlage hinzuzufügen.
• Klicken Sie auf das × auf der Kachel eines gespeicherten Blocks, um ihn zu löschen.

Kopien synchron halten

Wenn Sie einen Block speichern, aktivieren Sie Kopien synchron halten, um jede eingefügte Kopie mit derselben Quelle zu verknüpfen. Bearbeiten Sie die Quelle einmal, und die Änderung wird überall dort angewendet, wo dieser Block verwendet wird.

Eine synchronisierte Kopie ist auf der Arbeitsfläche gesperrt. Sie können sie nicht direkt bearbeiten. Wählen Sie die Kopie aus, um ihre Einstellungen zu öffnen:

• Synchronisierten Block bearbeiten: Entsperren Sie diese Kopie, damit Sie sie ändern können. Oben erscheint ein Banner. Klicken Sie auf Auf alle anwenden, um Ihre Änderungen in der Quelle und allen anderen Kopien zu speichern, oder auf Abbrechen, um sie zu verwerfen. Sie können jeweils nur einen synchronisierten Block entsperren.
• Von Quelle aktualisieren: Ersetzen Sie diese Kopie durch die neueste Version aus der Quelle.
• Von Quelle trennen: Trennen Sie diese Kopie von der Quelle, damit Sie sie eigenständig bearbeiten können.

Hinweis

Jedes Mal, wenn Sie eine In-App-Vorlage öffnen, überprüft Pushwoosh ihre synchronisierten Kopien und aktualisiert alle, die veraltet sind. Ein Toast zeigt an, wie viele aktualisiert wurden. Wenn die Quelle neueren Inhalt hat, zeigen die Einstellungen der Kopie eine Warnung an, bis Sie die Vorlage erneut öffnen oder auf Von Quelle aktualisieren klicken. Wenn die Quelle gelöscht wurde, behält die Kopie ihren letzten Inhalt und Sie können sie nur Von Quelle trennen.