Виджет Web Inbox

Интеграция Web Message Inbox на ваш сайт значительно повышает конверсию. Готовый к использованию виджет Web Inbox по умолчанию подписан на все методы, необходимые для общения с пользователями. Просто интегрируйте виджет на свой сайт и настройте его внешний вид в соответствии с вашим брендом.

Установка inboxWidget.enable: true регистрирует устройство посетителя для доставки в Inbox, даже если посетитель не предоставил разрешение на push-уведомления, что позволяет охватить посетителей, которые никогда не подписывались на пуши.

Предварительные требования

Для интеграции Message Inbox для веб-сайтов, пожалуйста, следуйте руководству.

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

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

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

Триггер

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

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

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

Pushwoosh.push(['init', {

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

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

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

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

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

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

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

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

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

Результат выглядит так:

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

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

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

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // цвет значка
    badgeTextColor: '#ffffff'   // цвет текста значка
  }
}]);

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

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

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

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

Настройка макетов ячеек

Виджет отображает сообщение в одном из четырех макетов ячеек — classic, banner, captioned или carousel — тех же макетах, которые отображаются в предпросмотре кампании в панели управления. Макет, который не может быть отображен с содержимым сообщения, упрощается до classic: для banner требуется главное изображение, для captioned — главное изображение, заголовок и основной текст, а для carousel — хотя бы один слайд, заголовок и основной текст.

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    unreadDotColor: '#ff4c00',    // точка непрочитанного сообщения на классическом аватаре
    avatarBgColor: '#e6e6e6',     // фон классического аватара
    avatarTextColor: '#333333',   // цвет инициалов на классическом аватаре
    avatarSize: 52,               // размер классического аватара (в пикселях)
    mediaRadius: 8,               // радиус скругления углов медиа для banner/captioned/carousel (в пикселях)
    slideCaptionColor: '#ffffff', // цвет текста подписи к слайду карусели
    slideScrimColor: '#000000',  // затемняющий фон подписи к слайду карусели
    pagerDotActiveColor: '#ff4c00', // точка активной страницы карусели
    pagerDotColor: '#c4c4c4'      // точки неактивных страниц карусели
  }
}]);

API

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

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

Открытие виджета обновляет его с сервера, не чаще одного раза в 30 секунд — автономное сообщение App Inbox передается по каналу без push-уведомлений, поэтому ничто другое не сообщает о нем между загрузками страницы.