# Web-Inbox-Widget

Die Integration der [Web Message Inbox](/de/developer/guides/message-inbox/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](/de/developer/guides/message-inbox/web-message-inbox/).

## Widget integrieren

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

```txt title="Beispiel"
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.

<img src="/web-push-notifications-web-inbox-widget-1.webp" alt=""/>

### 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:

```txt title="Beispiel"
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:

```txt title="Beispiel"
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.

## Widget anpassen

### Texte anpassen

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

```txt title="Beispiel"
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:

<img src="/web-push-notifications-web-inbox-widget-2.webp" alt=""/>

### Erscheinungsbild anpassen

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

```txt title="Beispiel"
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:

```txt title="Beispiel"
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:

```txt title="Beispiel"
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:

```txt title="Beispiel"
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:

```txt title="Beispiel"
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
```