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.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
— элемент, на который вешается клик. }
- 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: {