Налаштування App Inbox для веб-сайтів

Налаштування App Inbox включає:

1. Одержання токена аутентифікації.
2. Встановлення та ініціалізація скрипту.
3. Інтеграція віджету, що відображається на сайті.

Отримання токена автентифікації

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

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

У запиті потрібно передати відомі поля користувача: email, phone, externalCustomerId (хоча одне поле має бути обов'язковим). Ці поля використовуються для пошуку контакту в eSputnik. Надалі authToken використовується скриптом у запитах до сервера eSputnik.

Додаткову інформацію щодо роботи з контактами наведено у статті Ресурси API для додавання контактів.

Важливо:

Отримати один раз цей токен не можна, він може бути будь-якої миті інвалідований з міркувань безпеки. Скрипт самостійно оновить його викликом getAuthTokenCallback.

Якщо контакт у системі eSputnik не знайдено, то токен не повернеться і буде повернено наступну відповідь:

{
  "token": ""
}

Установка скрипту

Встановіть та ініціалізуйте скрипт на стороні свого фронтенду. У параметрах необхідно передати getAuthTokenCallback, де буде реалізована функція, яка звернеться до вашого бекенду і поверне токен.

Якщо раніше встановлювався скрипт eSputnik для роботи з веб-трекінгом, рекомендаціями або формами, його не потрібно встановлювати повторно. Необхідно викликати ініціалізацію для розширення параметрів для App Inbox.

Приклад

eS('init', {APP_INBOX: true}, {getAuthTokenCallback: () => yourImplementationOfAuthCallback(), language: 'uk', });

Ви можете самостійно отримати скрипт у системі eSputnik у розділі Налаштування → Веб-трекінг.

Інструкція з встановлення коду відстеження представлена тут.

Важливо! У скрипті, який видається на сторінці веб-трекінгу, необхідно модифікувати виклик команди 'init' таким чином:

замість

eS('init')

повинно бути

eS('init', {APP_INBOX: true}, {getAuthTokenCallback: () => yourImplementationOfAuthCallback(), language: 'uk', });

Приклад скрипту з ініціалізацією:

<script> !function (t, e, c, n) {var s = e.createElement(c); s.async = 1, s.src = 'https://cdn.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: 'uk', });</script>

Параметри об'єкта, що передається у функцію eSputnik

Інтеграція віджету App Inbox

Для інтеграції віджету з сайтом вам необхідно передати в eSputnik наступні дані:

• CSS-селектор. 
• Положення елемента, що вставляється (insert type position), тобто щодо якого елемента сайту необхідно його розташувати (застосовується метод insertAdjacentHTML).

Перед початком налаштувань надішліть нам запит на створення іконки та центру сповіщень відповідно до вашого дизайну.

Кастомізація віджету

Ви можете передати дизайн іконки кнопки (Bell button) у форматі SVG. Для елементів картки повідомлення можна задати inline-стилі, зокрема для зображення, заголовка, тексту, кнопки й дати. Inline-стилі також дають змогу налаштувати розташування цих елементів і використовувати змінні вашого сайту.

За замовчуванням центр сповіщень позиціонується відносно іконки кнопки. За потреби для нього можна задати фіксоване розташування відносно області перегляду (viewport). Фоновий шар, який з’являється під час відкриття центру сповіщень, налаштовується окремо за запитом.

Не можна змінити такі параметри віджету:

• стани елементів, зокрема наведення курсора, прочитане та непрочитане повідомлення;
• системні заглушки;
• формат дати;
• шрифт;
• структуру віджету: набір елементів, псевдокласи та псевдоелементи.

Якщо ви хочете реалізувати власний дизайн App Inbox на вебсайті замість стандартного віджета, скористайтеся статтею Налаштування App Inbox для мобільних застосунків. Описаний у ній спосіб інтеграції підходить як для мобільних застосунків, так і для вебсайтів.