Как настроить интеграцию App Inbox для веб-сайтов

App Inbox – еще один вариант коммуникации с вашими клиентами, предоставляемый eSputnik. Он позволяет отправлять уведомления в автоматическом и ручном режиме в их личный кабинет на вашем сайте.

Настройка App Inbox включает в себя:

1. Получение токена аутентификации. 
2. Установка и инициализация скрипта. 
3. Интеграцию виджета, отображаемого на сайте.

Получение токена аутентификации

Направьте запрос со стороны вашего бэкенда к API eSputnik для получения токена аутентификации (authToken).

Запрос должен быть аутентифицирован одним из способов, описанных в инструкции к API. Например, API-ключом.

{

"email": string,

"phone": string

}

{

“token”: “string”

}

В запросе нужно передать известные поля пользователя: 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', });

Если ранее скрипт не устанавливался, то необходимо обратится в службу поддержки на 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

function yourImplementationOfAuthCallback() {
  return new Promise((resolve, reject) => {

      //  вставьте сюда код с запросом API вашего бэкенда, выполните парсинг токена из ответа и передайте ее в запрос функции `resolve`  

      resolve('token should be placed here');
  });
}

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

Для интеграции виджета с сайтом, вам необходимо передать в eSputnik следующие данные:

• CSS-селектор. 

• Положение вставляемого элемента (insert type position), то есть относительно какого элемента сайта необходимо его расположить (применяется метод insertAdjacentHTML).

Дополнительно вы можете направить файл в формате SVG с желаемым дизайном иконки кнопки (Bell button) и внешнего вида уведомлений.

Также вы можете поручить eSputnik настроить внешний вид иконки и уведомлений.