Как настроить интеграцию App Inbox для веб-сайтов
App Inbox – еще один вариант коммуникации с вашими клиентами, предоставляемый eSputnik. Он позволяет отправлять уведомления в автоматическом и ручном режиме в их личный кабинет на вашем сайте.
Настройка App Inbox включает в себя:
- Получение токена аутентификации.
- Установка и инициализация скрипта.
- Интеграцию виджета, отображаемого на сайте.
Получение токена аутентификации
Направьте запрос со стороны вашего бэкенда к API eSputnik для получения токена аутентификации (authToken).
Запрос должен быть аутентифицирован одним из способов, описанных в инструкции к API. Например, API-ключом.
Метод запроса |
POST |
URL запроса |
https://esputnik.com/api/v1/auth/contact/token |
Заголовок запроса |
Content-Type: application/json |
Тело запроса |
|
Ответ: HTTP 200 |
|
Ответ: HTTP 400/401 |
В запросе нужно передать известные поля пользователя: email, phone (хотя бы одно поле должно быть обязательным). Эти поля используются для поиска контакта в eSputnik. В дальнейшем authToken используется скриптом в запросах к серверу eSputnik.
Дополнительная информация по работе с контактами представлена в статье “Ресурсы API для добавления контактов”.
Важно:
-
Получить один раз этот токен нельзя, он может быть в любой момент инвалидирован из соображений безопасности. Скрипт самостоятельно его обновит вызовом getAuthTokenCallback.
-
Если контакт в системе eSputnik не найден, то токен не вернется и будет возвращен следующий ответ:
{
“token”: “”
}
Установка и инициализация скрипта
Установите и инициализируйте скрипт на стороне своего фронтенда. В параметрах необходимо передать getAuthTokenCallback, где будет реализована функция, которая обратится к вашему бэкенду и вернет токен.
Если ранее устанавливался скрипт eSputnik для работы с веб-трекингом, рекомендациями или формами, тогда его не нужно устанавливать повторно. Необходимо вызов инициализации расширить параметрами для App Inbox.
Пример:
eS('init', {RECOMS: true, TRACKING: false, APP_INBOX: true}, {getAuthTokenCallback: () => yourImplementationOfAuthCallback(), language: 'ru', });
Важно:
Команда инициализации `init` должна быть вызвана один раз при каждой загрузке страницы.
Если ранее скрипт не устанавливался, то необходимо обратится в службу поддержки на support@esputnik.com для его получения (с пометкой: “для App Inbox”).
Вы можете самостоятельно получить скрипт в системе eSputnik в разделе “Настройки” → “Веб-трекинг”.
Инструкция по установке кода отслеживания представлена здесь.
Важно: В скрипте, который выдается на странице веб-трекинга, необходимо модифицировать вызов команды ‘init’ следующим образом:
вместо
eS('init')
должно быть
eS('init', {APP_INBOX: true}, {getAuthTokenCallback: () =>yourImplementationOfAuthCallback(), language: 'ru', });
Пример скрипта с инициализацией:
<script> !function (t, e, c, n) {var s = e.createElement(c); s.async = 1, s.src = 'https://statics.esputnik.com/scripts/' + n + '.js'; var r = e.scripts[0]; r.parentNode.insertBefore(s, r); var f = function () {f.c(arguments); }; f.q = []; f.c = function () {f.q.push(arguments); }; t['eS'] = t['eS'] || f; }(window, document, 'script', 'UUID'); </script><script>eS('init', {APP_INBOX: true}, {getAuthTokenCallback: () => yourImplementationOfAuthCallback(), language: 'ru', });</script>
Параметры объекта, передаваемого в функцию eSputnik
Название |
Пример |
Описание |
getAuthTokenCallback |
Обязательный Type: () => Promise<String> |
Асинхронная функция будет вызываться скриптом для получения authToken. Должна обращаться к Customer Backend и возвращать Promise |
language |
ru Обязательный Type: String |
ISO 639-1 |
Интеграция виджета App Inbox
Для интеграции виджета с сайтом, вам необходимо передать в eSputnik следующие данные:
-
Положение вставляемого элемента (insert type position), то есть относительно какого элемента сайта необходимо его расположить (применяется метод insertAdjacentHTML).
Дополнительно вы можете направить файл в формате SVG с желаемым дизайном иконки кнопки (Bell button) и внешнего вида уведомлений.
Также вы можете поручить eSputnik настроить внешний вид иконки и уведомлений.