T-ID Widget Notification
Бизнес-описание продукта
Widget Notification от T‑ID — это всплывающее уведомление, которое распознает пользователя по cookie и предлагает войти на сайт партнера через T‑ID.
Преимущества для партнера:
Не нужно разрабатывать механизм уведомления на фронте партнера — это уже реализовано T‑ID.
Нет ложных срабатываний — показывается только тем, кого узнали.
Пользователю не нужно искать кнопку или форму входа.
Настраиваемый сценарий появления уведомления:
- по клику клиента на определенной части сайта;
- по времени, которое клиент провел на сайте — таймаут;
- по сценарию прокрутки страницы до определенного места.
Настраиваемое расположение уведомления по 6 зонам на странице:
| Левая ориентация | Ориентация по центру | Правая ориентация |
|---|---|---|
| Сверху слева | Сверху по центру | Сверху справа |
| По центру слева | По центру экрана | По центру справа |
| Снизу слева | Снизу по центру | Снизу справа |
Сценарий использования
Партнер хочет упростить и ускорить вход клиентов на своем сайте.
Если клиент уже совершал авторизацию на сайте партнера, на сайте партнеров банка или сайте самого T‑Банка, клиент видит уведомление на сайте и получает возможность выполнить вход в один клик.
Техническое описание продукта
Подключение библиотеки на сайте
Чтобы подключить 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.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— элемент, на который вешается клик. }
- isActive
- pageLoad: {
- isActive
boolean— отвечает за активацию триггера. - delay
number— количество миллисекунд, по истечении которых покажется уведомление. }
- isActive
- scroll: {
- isActive
boolean— отвечает за активацию триггера. - offsetY
number— процент прокрутки вниз, по достижению которого появится уведомление. Принимаемые значения — от 0 до 100. }
- isActive
- 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.
- click: {