Web-Inbox-Widget

Die Integration der Web Message Inbox in Ihre Website steigert die Conversions drastisch. Ein sofort einsatzbereites 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 dessen Erscheinungsbild an Ihre Marke an.

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'
  }
}]);

Auslöser

Um das Widget zu rendern, müssen Sie ein Auslöseelement für das Widget angeben. Jedes DOM-Element auf der Seite kann der Auslöser sein. Geben Sie dessen 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 Badge für ungelesene Nachrichten auf dem Auslöseelement angezeigt. Sobald das Auslöseelement angetippt wird, erscheint das Widget auf der Seite.

Positionierung

Standardmäßig befindet sich das Widget in der entgegengesetzten Richtung zum Bildschirmrand, der dem Auslöseelement 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 des leeren Inbox-Widgets
    emptyInboxText: 'There are no new messages. Stay tuned!'    // Text des leeren Inbox-Widgets
  }
}]);

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 Badge für die Anzahl ungelesener Nachrichten kann wie folgt angepasst werden:

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

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 der leeren Inbox
    emptyInboxTextColor: '#7a7a7a'              // Textfarbe der leeren 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
  }
}]);

API

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

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