Widget Notification

Бизнес-описание

Баннер-уведомление от T-ID — способ запуска авторизации клиентов через персонализированное всплывающее уведомление. Помогает ускорить и упростить путь клиента от входа до получения сервиса или покупки — если клиент уже совершал авторизацию на сайте партнера, партнеров банка или самого T‑Банка, он видит уведомление на сайте и получает возможность выполнить вход в один клик.

Widget Notification от T‑ID — это frontend-скрипт, который встраивает баннер-уведомление от T-ID на сайт партнера одной строкой кода. Скрипт распознаёт пользователя по cookie.

Преимущества для партнера:

Не нужно разрабатывать механизм уведомления на фронте партнера — это уже реализовано T‑ID.
Пользователю не нужно искать кнопку или форму входа.
Настраиваемый сценарий появления уведомления:
- по клику клиента на определенной части сайта;
- по времени, которое клиент провел на сайте — таймаут;
- по сценарию прокрутки страницы до определенного места.
Настраиваемое расположение уведомления по 6 зонам на странице:

Левая ориентация	Ориентация по центру	Правая ориентация
Сверху слева	Сверху по центру	Сверху справа
По центру слева	По центру экрана	По центру справа
Снизу слева	Снизу по центру	Снизу справа

Подключение библиотеки на сайте

Чтобы подключить T‑ID Widget Notification на сайте, в блоке head вставьте следующий скрипт:

<script src="https://sso-forms-prod.t-static.ru/tid/widget.js"></script>

Пример инициализации скрипта:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
 
    <script src="https://sso-forms-prod.t-static.ru/tid/widget.js"></script>
  </head>
  <body>
    <button id="button">При клике появится всплывашка</button>
    <script>
      const tidSdk = new TidSDK({
        redirectUri: 'https://mysite.ru/auth/success',
        responseType: 'code',
        clientId: 'XXXX',
        state: 'XXXX'
      });
      
      tidSdk.addNotification({
        triggers: {
          click: {
            isActive: true,
            element: '#button',
          },
          pageLoad: {
            isActive: true,
            delay: 3000,
          },
          scroll: {
            isActive: true,
            offsetY: 10,
          },
        },
        place: 'bottom-right',
        recognized: true,
        zIndex: 444,
        target: '_blank',
      });
    </script>
  </body>
</html>

Описание параметров

Auth Params

redirectUri string — URI, на который будет перенаправлен клиент после завершения авторизационного диалога.
responseType string — определяет, какой авторизационный процесс будет запущен и какие параметры будут переданы после завершения авторизации.
clientId string — идентификатор клиента (приложения).
state string — уникальный случайный параметр, который генерируется партнерским приложением для связи контекста запуска авторизации с завершением.

UI Params

triggers — объект с тремя видами триггеров появления уведомления:
- click:
  - isActive boolean — отвечает за активацию триггера,
  - element: HTMLElement | string — элемент, на который вешается клик.
- pageLoad:
  - isActive boolean — отвечает за активацию триггера,
  - delay number — количество миллисекунд, по истечении которых покажется уведомление.
- scroll:
  - isActive boolean — отвечает за активацию триггера,
  - offsetY number — процент прокрутки вниз, по достижении которого появится уведомление. Принимаемые значения — от 0 до 100.
- place top-left, top-mid, top-right, left-mid, right-mid, bottom-left, bottom-mid, bottom-right — место, в котором отображается уведомление.
- recognized boolean — уведомление покажется, если смогли распознать пользователя.
- zIndex number — необязательный параметр, по умолчанию — 99999. Уровень наложения уведомления в верстке, значение от 0 до 99999.
- target _parent | _self | _blank | _top — необязательный параметр, по умолчанию — _blank. Определеяет, в каком окне будет открываться форма авторизации. Если вам нужно открывать окно вместо текущей вкладки, используйте _self.