Оформление страницы авторизации

Ссылку для получения OAuth-токена можно оформить в виде кнопки с логотипом Яндекса.

Совет

Когда пользователь нажмет на кнопку, он будет перенаправлен для авторизации в Яндекс ID. Чтобы после авторизации пользователь остался на вашем сайте, настройте ссылку, которая будет открываться в новом окне браузера.

Дизайн кнопки

Чтобы кнопка подходила под стиль вашего сайта и приложения, вы можете настроить ее внешний вид:

Внимание

Дизайн кнопки должен соответствовать общим требованиям Яндекса. При добавлении кнопки на сайт или в приложение запрещено изменять:

  • Цвет кнопки.
  • Толщину обводки.
  • Содержимое кнопки: текст, иконку и отступы между элементами кнопки.

Типы кнопок

Чтобы повысить конверсию на авторизацию, мы рекомендуем использовать версию с большой контрастной кнопкой:

Сокращенный вариант кнопки используется, если ее размеры не позволяют отобразить полный вариант текста:

Если по какой-то причине основная версия не подходит, воспользуйтесь дополнительной:

Сокращенный вариант:

Дополнительная версия может подойти для размещения кнопки Яндекса рядом с кнопками других сервисов.

Используйте кнопку-иконку, если для обычной кнопки нет места:

Блок, в котором размещена кнопка-иконка, обязательно подпишите Войти с помощью. Избегайте соседства ярких цветов, используйте нейтральную палитру для фона.

Настроить размер

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

L / 56px

M / 44px

S / 36px

Максимальная ширина кнопки не ограничена.

При уменьшении ширины следите за тем, чтобы боковые отступы были не меньше ширины иконки:

Примеры использования

Если кроме кнопки Яндекса нет кнопок других сервисов, используйте полный вариант:

Если кнопок несколько, подпишите их Войти с помощью и используйте сокращенную версию или кнопку-иконку:

image

В этой статье: