Виджет веб-инбокса

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

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

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

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

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

Пример

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

Триггер

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

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

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

Пример

Wavesend.push(['init', {

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

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

Пример

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

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

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

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

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

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

Пример

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

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

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

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

Пример

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

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

Пример

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

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

Пример

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

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

Пример

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

API

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

Пример

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