Виджет Web Inbox

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

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

Важное примечание о версиях SDK (v3.66.0+)

Начиная с версии 3.66.0, устройство посетителя отслеживается по hardware ID, привязанному к его браузеру, до того, как посетитель войдет в систему. Если посетитель очистит данные сайта, сменит браузер или устройство до вызова registerUser, это отслеживание будет нарушено. Его предыдущая история сообщений будет утеряна и не перенесется даже после входа посетителя в систему.

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

Для интеграции 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'      // точки неактивных страниц карусели
  }
}]);

Восстановление классической ячейки до версии 3.75

Установите inboxWidget.legacyClassicCell: true, чтобы сохранить прежний вид классической ячейки — столбец с иконкой 40px вместо скругленного аватара 52px, без точки непрочитанного сообщения и с неограниченным по высоте текстом. Эта опция не влияет на макеты banner, captioned и carousel.

Управление в Control Panel

Только для приложений, управляемых через панель

Карточка Inbox widget доступна только для приложений с веб-платформой в режиме управления через панель (см. Web push SDK 3.0). Для приложения с настройкой через сниппет SDK читает inboxWidget только из init-сниппета, как показано выше. SDK применяет значения карточки начиная с Web SDK 3.92.0.

В приложении, управляемом через панель, перейдите в Settings → Configure platforms → Web и найдите карточку Inbox widget.

Нажмите Configure на карточке. В форме есть переключатель Show the inbox on the site, перечисленные ниже поля и живой предпросмотр, который переключается между состояниями With messages и No messages.

Каждое поле формы задает один ключ inboxWidget — тот же, который вы иначе задали бы в init-сниппете:

Раздел	Поле	Ключ inboxWidget
Placement	ID of the element that opens the inbox	triggerId
Placement	Opens	position
Placement	Insert into (CSS selector)	appendTo
Texts	Widget title	title
Texts	Title when there are no messages	emptyInboxTitle
Texts	Text when there are no messages	emptyInboxText
Texts	Image when there are no messages (URL)	emptyInboxIconUrl
Appearance	Width, px (200–1200)	widgetWidth
Appearance	Corner radius, px (0–64)	borderRadius
Appearance	Font	fontFamily
Appearance	Background, Text, Border	bgColor, textColor, borderColor
Appearance	Counter background, Counter text, Unread mark	badgeBgColor, badgeTextColor, unreadDotColor

Форма не сохраняет значение Width, px или Corner radius, px, которое выходит за допустимый диапазон или не является целым числом, и вместо этого показывает ошибку под полем.

Значения, сохраненные в карточке, переопределяют те же ключи inboxWidget в init-сниппете — по каждому ключу отдельно. Пустое поле не сохраняется, поэтому по-прежнему действует значение из сниппета или значение SDK по умолчанию. Оставьте поля ID of the element that opens the inbox и Insert into (CSS selector) пустыми, чтобы triggerId и appendTo остались в сниппете рядом с разметкой, на которую они указывают. Ключи, которых нет в карточке, например параметры макетов ячеек и legacyClassicCell, всегда читаются из сниппета.

Пока переключатель не сохранен в панели, значок карточки показывает Set in the snippet, а отображение виджета определяет enable в сниппете. После сохранения значок показывает On или Off и переопределяет сниппет: Off скрывает виджет, даже если в сниппете задано enable: true, а On показывает его, даже если в сниппете вообще нет inboxWidget, и так же регистрирует посетителей для доставки в Inbox без разрешения на push-уведомления.

API

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

Пример

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

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