Перейти к основному содержимому

T-ID Widget Notification

Бизнес-описание продукта

Widget Notification от TID — это всплывающее уведомление, которое распознает пользователя по cookie и предлагает войти на сайт партнера через TID.


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

  1. Не нужно разрабатывать механизм уведомления на фронте партнера — это уже реализовано TID.

  2. Нет ложных срабатываний — показывается только тем, кого узнали.

  3. Пользователю не нужно искать кнопку или форму входа.

  4. Настраиваемый сценарий появления уведомления:

    • по клику клиента на определенной части сайта;
    • по времени, которое клиент провел на сайте — таймаут;
    • по сценарию прокрутки страницы до определенного места.
  5. Настраиваемое расположение уведомления по 6 зонам на странице:

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

Сценарий использования

Партнер хочет упростить и ускорить вход клиентов на своем сайте.

Если клиент уже совершал авторизацию на сайте партнера, на сайте партнеров банка или сайте самого TБанка, клиент видит уведомление на сайте и получает возможность выполнить вход в один клик.

Техническое описание продукта

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

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

<script src="https://sso-forms-prod.cdn-tinkoff.ru/tinkoff-id/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.cdn-tinkoff.ru/tinkoff-id/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.

openapi@tbank.ru

АО «ТБанк» использует файлы «cookie», с целью персонализации сервисов и повышения удобства пользования веб-сайтом. «Cookie» представляют собой небольшие файлы, содержащие информацию о предыдущих посещениях веб-сайта. Если вы не хотите использовать файлы «cookie», измените настройки браузера.