Web-Inbox-Widget

Die Integration der Web Message Inbox in Ihre Website steigert die Konversionen 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 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 wird mit querySelector durchgeführt, 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
  }
}]);

API

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

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