Веб-виджет для входящих сообщений

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

Необходимые условия

Чтобы интегрировать 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',                                 // widget title
    emptyInboxTitle: 'You\'re all caught up',       // empty inbox widget title
    emptyInboxText: 'There are no new messages. Stay tuned!'    // empty inbox widget text
  }
}]);

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

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

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    bgColor: '#ffffff',         // widget background
    borderColor: 'transparent', // widget border color
    borderRadius: 4,            // widget border radius (px)
    widgetWidth: 350,           // widget width (px)
    zIndex: 100                 // z-index
  }
}]);

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    badgeBgColor: '#ff4c00',    // badge color
    badgeTextColor: '#ffffff'   // badge text color
  }
}]);

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    textColor: '#333333',                       // text color
    fontFamily: 'Helvetica, Arial, sans-serif', // font
    messageTitleColor: '#7a7a7a',               // messages title color
    timeTextColor: '#c4c4c4',                   // timestamp text color
    emptyInboxTitleColor: '#333333',            // empty inbox title color
    emptyInboxTextColor: '#7a7a7a'              // empty inbox text color
  }
}]);

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

Pushwoosh.push(['init', {
  ...,
  inboxWidget: {
    enable: true,
    triggerId: 'pwInbox',
    emptyInboxIconUrl: 'https://pushon.pushwoosh.com/images/icon-empty-inbox.png'   // URL path to an icon
  }
}]);

API

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

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