# Виджет Web Inbox

Интеграция [Web Message Inbox](/ru/developer/guides/message-inbox/web-message-inbox/) на ваш сайт значительно увеличивает конверсию. Готовый к использованию **виджет Web Inbox** по умолчанию подписан на все методы, необходимые для общения с пользователями. Просто интегрируйте виджет на свой сайт и настройте его внешний вид в соответствии с вашим брендом.

## Предварительные условия

Чтобы интегрировать Message Inbox для сайтов, следуйте [руководству](/ru/developer/guides/message-inbox/web-message-inbox/).

## Интеграция виджета

При инициализации Pushwoosh WebSDK добавьте параметр `inboxWidget`:

```txt title="Пример"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox'
  }
}]);
```

### Триггер

Для отображения виджета необходимо указать **элемент-триггер**. Триггером может быть любой DOM-элемент на странице. Укажите его ID как «pwInbox» или присвойте любой пользовательский ID параметру `triggerId` при инициализации SDK.\
После инициализации WebSDK на элементе-триггере отобразится значок с количеством непрочитанных сообщений. Когда пользователь нажимает на элемент-триггер, на странице появляется виджет.

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

### Позиционирование

По умолчанию виджет располагается с противоположной стороны от границы экрана, ближайшей к элементу-триггеру.\
Вы можете задать положение виджета с помощью параметров конфигурации:

```txt title="Пример"
Pushwoosh.push(['init', {

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

По умолчанию `inboxWidget` следует размещать перед закрывающим тегом \</body>.\
Отобразите виджет в любом месте страницы, как показано в примере ниже:

```txt title="Пример"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {

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

Поиск родительского элемента выполняется с помощью querySelector, поэтому требуется четкое указание класса, id или элемента.

## Настройка виджета

### Настройка текстов

Чтобы настроить текст виджета, добавьте параметры `emptyInboxTitle` и `emptyInboxText`:

```txt title="Пример"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    title: 'Inbox',                                 // заголовок виджета
    emptyInboxTitle: 'You\'re all caught up',       // заголовок виджета при пустом инбоксе
    emptyInboxText: 'There are no new messages. Stay tuned!'    // текст виджета при пустом инбоксе
  }
}]);
```

Результат выглядит следующим образом:

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

### Настройка внешнего вида

Чтобы настроить **внешний вид** виджета, используйте следующие параметры:

```txt title="Пример"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // фон виджета
    borderColor: 'transparent', // цвет рамки виджета
    borderRadius: 4,            // радиус скругления рамки виджета (в пикселях)
    widgetWidth: 350,           // ширина виджета (в пикселях)
    zIndex: 100                 // z-index
  }
}]);
```

**Значок счетчика непрочитанных сообщений** можно настроить следующим образом:

```txt title="Пример"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // цвет значка
    badgeTextColor: '#ffffff'   // цвет текста значка
  }
}]);
```

Чтобы настроить **свойства текста**, добавьте следующий код:

```txt title="Пример"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // цвет текста
    fontFamily: 'Helvetica, Arial, sans-serif', // шрифт
    messageTitleColor: '#7a7a7a',               // цвет заголовка сообщения
    timeTextColor: '#c4c4c4',                   // цвет текста временной метки
    emptyInboxTitleColor: '#333333',            // цвет заголовка при пустом инбоксе
    emptyInboxTextColor: '#7a7a7a'              // цвет текста при пустом инбоксе
  }
}]);
```

Наконец, вы можете указать **иконку для пустого инбокса**:

```txt title="Пример"
Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // URL-путь к иконке
  }
}]);
```

## API

Чтобы открыть или закрыть виджет, используйте следующий метод API:

```txt title="Пример"
Pushwoosh.pwinboxWidget.toggle(open?: boolean);
```