Web-Inbox-Widget

Die Integration der Web Message Inbox in Ihre Website steigert die Konversionen drastisch. Ein gebrauchsfertiges Web-Inbox-Widget ist standardmäßig für alle Methoden abonniert, die zur Kommunikation mit den Benutzern erforderlich sind. Integrieren Sie einfach das Widget in Ihre Website und passen Sie sein Erscheinungsbild an Ihre Marke an.

Die Einstellung inboxWidget.enable: true registriert das Gerät eines Besuchers für die Inbox-Zustellung, auch wenn der Besucher keine Berechtigung für Push-Benachrichtigungen erteilt hat. So können auch Besucher erreicht werden, die nie Push-Benachrichtigungen abonniert haben.

Voraussetzungen

Um die Message Inbox für Websites zu integrieren, folgen Sie bitte der Anleitung.

Fügen Sie beim Initialisieren des Pushwoosh WebSDK den Parameter inboxWidget hinzu:

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);

Trigger

Um das Widget zu rendern, müssen Sie ein Trigger-Element für das Widget angeben. Jedes DOM-Element auf der Seite kann der Trigger sein. Geben Sie seine ID als „pwInbox“ an oder weisen Sie dem Parameter triggerId bei der Initialisierung des SDK eine beliebige benutzerdefinierte ID zu. Wenn das WebSDK initialisiert ist, wird das Abzeichen für ungelesene Nachrichten auf dem Trigger-Element angezeigt. Sobald auf das Trigger-Element getippt wird, erscheint das Widget auf der Seite.

Positionierung

Standardmäßig befindet sich das Widget in der entgegengesetzten Richtung zum Bildschirmrand, der dem Trigger-Element am nächsten liegt. Sie können die Position des Widgets über Konfigurationsparameter festlegen:

Pushwoosh.push(['init', {

  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    position: 'top'
  }
}]);

Standardmäßig sollte das inboxWidget vor dem schließenden </body>-Tag platziert werden. Rendern Sie das Widget an einer beliebigen Stelle auf der Seite, wie im folgenden Beispiel gezeigt:

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

    enable: true,
    triggerId: 'pwInbox',
    appendTo: '.widget-parent-element-class'
  }
}]);

Die Suche nach einem übergeordneten Element erfolgt über querySelector, daher ist eine klare Angabe einer Klasse, ID oder eines Elements erforderlich.

Texte anpassen

Um den Widget-Text anzupassen, fügen Sie die Parameter emptyInboxTitle und emptyInboxText hinzu:

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // Widget-Titel
    emptyInboxTitle: 'You\'re all caught up',       // Titel für leere Inbox
    emptyInboxText: 'There are no new messages. Stay tuned!'    // Text für leere Inbox
  }
}]);

Das Ergebnis sieht so aus:

Erscheinungsbild anpassen

Um das Erscheinungsbild des Widgets anzupassen, verwenden Sie die folgenden Parameter:

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // Widget-Hintergrund
    borderColor: 'transparent', // Widget-Rahmenfarbe
    borderRadius: 4,            // Widget-Rahmenradius (px)
    widgetWidth: 350,           // Widget-Breite (px)
    zIndex: 100                 // z-index
  }
}]);

Das Abzeichen für die Anzahl ungelesener Nachrichten kann wie folgt angepasst werden:

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // Abzeichenfarbe
    badgeTextColor: '#ffffff'   // Textfarbe des Abzeichens
  }
}]);

Um die Texteigenschaften anzupassen, fügen Sie den folgenden Code hinzu:

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // Textfarbe
    fontFamily: 'Helvetica, Arial, sans-serif', // Schriftart
    messageTitleColor: '#7a7a7a',               // Titelfarbe der Nachrichten
    timeTextColor: '#c4c4c4',                   // Textfarbe des Zeitstempels
    emptyInboxTitleColor: '#333333',            // Titelfarbe für leere Inbox
    emptyInboxTextColor: '#7a7a7a'              // Textfarbe für leere Inbox
  }
}]);

Zuletzt können Sie das Symbol für die leere Inbox angeben:

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // URL-Pfad zu einem Symbol
  }
}]);

Zellenlayouts anpassen

Das Widget stellt eine Nachricht in einem von vier Zellenlayouts dar – classic, banner, captioned oder carousel – dieselben Layouts, die auch die Kampagnenvorschau im Control Panel anzeigt. Ein Layout, das mit dem Inhalt der Nachricht nicht gerendert werden kann, wird auf classic zurückgestuft: banner benötigt ein Hero-Image, captioned benötigt ein Hero-Image sowie einen Titel und einen Text, und carousel benötigt mindestens eine Folie sowie einen Titel und einen Text.

Um das Erscheinungsbild der Layouts anzupassen, verwenden Sie die folgenden Parameter:

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // Punkt für ungelesene Nachrichten auf dem klassischen Avatar
    avatarBgColor: '#e6e6e6',     // Hintergrund des klassischen Avatars
    avatarTextColor: '#333333',   // Initialfarbe des klassischen Avatars
    avatarSize: 52,               // Größe des klassischen Avatars (px)
    mediaRadius: 8,               // Eckenradius der Medien von banner/captioned/carousel (px)
    slideCaptionColor: '#ffffff', // Textfarbe der Karussell-Folienüberschrift
    slideScrimColor: '#000000',  // Hintergrund-Scrim der Karussell-Folienüberschrift
    pagerDotActiveColor: '#ff4c00', // Aktiver Seitenpunkt des Karussells
    pagerDotColor: '#c4c4c4'      // Inaktive Seitenpunkte des Karussells
  }
}]);

Verwaltung im Control Panel

Die Website lädt das Web SDK vom Pushwoosh-CDN, wie auf der Karte angegeben. Die Karte funktioniert unabhängig von der Settings source, dem Init-Snippet auf Ihrer Website oder dieser Seite (siehe Web Push SDK 3.0), aber die benötigte SDK-Version hängt von dieser Quelle ab:
- Init-Snippet auf Ihrer Website: Web SDK 3.93.1 oder höher. Ein älteres SDK ignoriert die Karte und liest inboxWidget ausschließlich aus dem Snippet.
- Diese Seite: Web SDK 3.92 oder höher für die Werte der Karte und 3.93.0 oder höher für das unten beschriebene Abschalten bei npm.
Die Seite enthält das Element, das die Inbox öffnet, standardmäßig #pwInbox. Fehlt es, öffnet sich die Inbox nicht, und die Browserkonsole zeigt den Fehler Error during Pushwoosh initialization, der das fehlende Element nennt und angibt, wo Sie seine ID ändern können.
Auf einer Website, die das SDK über npm installiert, kann die Karte das Widget aus-, aber nicht einschalten, da die Website das Widget selbst erstellt.

So richten Sie das Widget im Control Panel ein:

Gehen Sie zu Settings → Configure platforms → Web.
Klicken Sie auf der Karte Inbox widget auf Configure.
Schalten Sie Show the inbox on the site ein.
Füllen Sie die Felder aus, die Sie über das Panel verwalten möchten, und lassen Sie die übrigen leer. Ein leeres Feld wird nicht gespeichert, daher gilt weiterhin der Wert aus dem Snippet oder der SDK-Standardwert. Lassen Sie ID of the element that opens the inbox und Insert into (CSS selector) leer, um triggerId und appendTo im Snippet neben dem Markup zu belassen, auf das sie verweisen.
Prüfen Sie das Ergebnis in der Vorschau. Wechseln Sie zwischen With messages und No messages, um beide Zustände zu sehen.
Speichern Sie das Formular. Width, px akzeptiert eine ganze Zahl von 200 bis 1200, Corner radius, px von 0 bis 64. Jeder andere Wert erzeugt eine Fehlermeldung unter dem Feld und wird nicht gespeichert.

Wie die Karte mit dem Snippet zusammenwirkt

Die in der Karte gespeicherten Werte überschreiben die gleichnamigen inboxWidget-Schlüssel im Init-Snippet, Schlüssel für Schlüssel. Jedes Feld legt einen Schlüssel fest:

Abschnitt	Feld	`inboxWidget`-Schlüssel
Placement	ID of the element that opens the inbox	`triggerId`
Placement	Opens	`position`
Placement	Insert into (CSS selector)	`appendTo`
Texts	Widget title	`title`
Texts	Title when there are no messages	`emptyInboxTitle`
Texts	Text when there are no messages	`emptyInboxText`
Texts	Image when there are no messages (URL)	`emptyInboxIconUrl`
Appearance	Width, px (200–1200)	`widgetWidth`
Appearance	Corner radius, px (0–64)	`borderRadius`
Appearance	Font	`fontFamily`
Appearance	Background, Text, Border	`bgColor`, `textColor`, `borderColor`
Appearance	Counter background, Counter text, Unread mark	`badgeBgColor`, `badgeTextColor`, `unreadDotColor`

Schlüssel, die die Karte nicht enthält, etwa die Parameter für das Zellenlayout und legacyClassicCell, werden immer aus dem Snippet gelesen.

Der Schalter Show the inbox on the site funktioniert genauso. Solange er im Panel nicht gespeichert ist, zeigt das Badge der Karte Set in the snippet, und enable im Snippet entscheidet, ob das Widget angezeigt wird. Sobald Sie den Schalter speichern, zeigt das Badge On oder Off, und die Karte überschreibt das Snippet:

Off blendet das Widget aus, auch wenn das Snippet enable: true setzt.
On zeigt das Widget an, selbst wenn das Snippet gar keinen inboxWidget enthält. Wie enable: true registriert es Besucher ohne Push-Berechtigung für die Inbox-Zustellung.

Gespeicherte Änderungen erreichen die Website innerhalb einer Minute, beim nächsten Laden der Seite.

Um das Widget wieder dem Snippet zu überlassen, klicken Sie auf der Karte auf Return to snippet und bestätigen Sie. Die Schaltfläche erscheint, sobald etwas in der Karte gespeichert ist. Sie löscht alle im Panel gespeicherten Inbox-Einstellungen, und die Website verwendet wieder die inboxWidget-Einstellungen ihres Snippets.

API

Um das Widget zu öffnen oder zu schließen, verwenden Sie die folgende API-Methode:

Pushwoosh.pwinboxWidget.toggle(open?: boolean);

Das Öffnen des Widgets aktualisiert es vom Server, höchstens einmal alle 30 Sekunden – eine eigenständige App-Inbox-Nachricht wird über einen Kanal ohne Push übertragen, sodass nichts anderes eine Nachricht zwischen den Seitenladevorgängen ankündigt.