Настройка оформления процесса
Настройка оформления процесса позволяет применить визуальную идентичность вашего бренда к процессу проверки личности Unico — без обращения в поддержку, без зависимости от команды поддержки, с результатом, видимым сразу же.
Вы задаёте логотип, цвет фона, цвета и форму кнопок и цвет контента. После публикации настройка вступает в силу нем едленно для следующих процессов, запущенных в вашей ветке (branch).
Для кого это: клиенты, использующие Web Journey (CbU) с моделью интеграции iFrame, Redirect или SDK.
Что меняется для конечного пользователя: экран, который он видит во время проверки личности, теперь выглядит в стиле вашего бренда.
Где найти: IDCloud Portal → боковое меню Настройки → вкладка Оформление.
Перед тем как начать
Разрешение на доступ
Вашему пользователю нужен доступ к разделу Настройки IDCloud Portal. Если значок шестерёнки не отображается в боковом меню, попросите адми нистратора вашего аккаунта предоставить доступ.
Как применяется настройка
| Область действия | Настройка применяется по ветке (branch) и по модели интеграции. iFrame и Redirect/SDK имеют независимые конфигурации — публикация одной не влияет на другую. |
| Когда вступает в силу | Немедленно после публикации, для процессов, запущенных с этого момента. Процессы, уже находящиеся в работе, сохраняют прежний внешний вид. |
| Если вы не настраиваете | Процесс загружается с темой Unico по умолчанию. |
| Версия процесса | Предпросмотр основан на дизайне Web Journey v3.0. В других версиях предпросмотр может не точно отражать результат — в этом случае обратитес ь в Unico для обновления вашей версии. |
Что нужно подготовить
- Логотип в формате PNG, желательно с прозрачным фоном, высотой до 60 px и размером до 100 КБ.
- Hex-коды цветов вашего бренда (например,
#1B3FA0).
Что настраивается в вашей интеграции
Помимо модели интеграции, то, что отображается на экране, зависит от версии CbU вашей интеграции. Это самая частая причина, по которой «я не вижу это поле»:
| Функция | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 redirect | 2.0 redirect | 3.0 redirect |
|---|---|---|---|---|---|---|
| Логотип | ✅ | не существует | не существует | ✅ | ✅ | ✅ |
| Цвет фона | — | — | — | — | — | ✅ |
| Цвет фона кнопки | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Цвет текста кнопки | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Радиус скругления кнопки | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Цвет контента | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Короче говоря: цвет фона настраивается тол ько в CbU 3.0 в redirect, а в iFrame логотип существует только в CbU 1.0. Цвета и форма кнопки работают во всех комбинациях.
Если вы не знаете, какая у вас версия, уточните у своего контакта по Onboarding или в поддержке Unico.
Шаг за шагом
Шаг 1 — Откройте вкладку «Оформление»
В IDCloud Portal нажмите значок шестерёнки (Настройки) в боковом меню. Экран открывается прямо на вкладке Оформление.
Экран «Настройки» содержит три вкладки — Оформление, Вебхук и QR-код. Это руководство описывает первую из них.
Экран «Настройки» с выбранной вкладкой «Оформление».
Шаг 2 — Выберите модель интеграции
В левой колонке выберите iFrame или Redirect или SDK — поля формы меняются в зависимости от модели.
Экран разделён на три области: выбор модели слева, форма в центре и предпросмотр в реальном времени справа, который реагирует на каждое изменение до публикации.
Если вы используете обе модели, вам нужно настроить обе. Это независимые конфигурации — настройте и опубликуйте одну, затем повторите для другой.
Селектор iFrame / Redirect или SDK, форма и предпросмотр.
Шаг 3 — Загрузите логотип
Доступно в Redirect или SDK. В iFrame — только в CbU 1.0.
Нажмите Добавить логотип и выберите файл. Требования: формат PNG, максимальная высота 60 px, максимальный размер 100 КБ.
Используйте PNG с прозрачным фоном. Так логотип будет корректно смотреться на любом цвете фона — PNG с белым фоном превращается в заметный прямоугольник, когда фон окрашен. Также предпочтительно использовать горизонтальную версию логотипа: доступное пространство широкое и невысокое.
Поле «Добавить логотип» с требованиями к формату, высоте и размеру.
Шаг 4 — Задайте цвета
Есть четыре поля цвета, сгруппированные в форме по разделам Фон, Кнопки и Контент:
| Поле | Где отображается в процессе | По умолчанию | Доступность |
|---|---|---|---|
| Цвет фона | Фон экрана процесса | #F2F2F7 | Только CbU 3.0 в redirect |
| Кнопки → Цвет фона | Заливка кнопки действия (например, «Сделать селфи») | — | Все версии |
| Кнопки → Цвет текста | Текст внутри кнопки | — | Все версии |
| Цвет контента | Заголовки и описания (например, «Проверка личности») | #000000 | Все версии |
Для любого из них вы можете ввести hex-значение (например, #1B3FA0) или нажать на цветовой
образец слева от поля, чтобы открыть визуальный выбор цвета. В полях фона и контента, если вы
оставите их пустыми, процесс будет использовать значение по умолчанию, показанное как подсказка
(placeholder) в самом поле.
Цвет фона применяется как градиент, а не как сплошной цвет. Тон, который вы задаёте, — это верх градиента, и процесс постепенно темнеет к нижней части экрана. Очень тёмные тона дают почти чёрную основу — выбирайте тон от среднего до светлого, если хотите равномерный результат.
Используйте основной цвет вашего бренда для фона кнопки. Это элемент, который пользователь должен найти первым; если он не выделяется, процесс теряет в конверсии.
Выбирайте четыре цвета как единый набор, а не по одному. Они влияют друг на друга: тёмный фон с чёрным цветом контента делает процесс нечитаемым, а светлая кнопка на белой карточке может просто пропасть из виду. Задайте все четыре цвета и только потом проверьте результат в предпросмотре (Шаг 6).
Поля цвета фона, цвета фона/текста кнопки и цвета контента, с результатом в предпросмотре.
Шаг 5 — Настройте кнопки
Три поля управляют кнопкой действия процесса (например, «Сделать селфи»):
| Поле | Что оно делает |
|---|---|
| Цвет фона | Цвет заливки кнопки |
| Цвет текста | Цвет текста внутри кнопки |
| Радиус скругления | Скругление углов, в пикселях |
Референсные значения для радиуса скругления:
- 0 → прямоугольная кнопка, острые углы
- от 8 до 16 → слегка скруглённые углы
- 24 и более → форма таблетки (полностью скруглённая)
Значения выше половины высоты кнопки больше не меняют результат — форма таблетки является пределом.
Используйте основной цвет вашего бренда для фона кнопки. Это элемент, который пользователь должен найти первым — если он не выделяется, процесс теряет в конверсии. И сохраняйте радиус скругления в соответствии с остальным вашим продуктом, чтобы процесс воспринимался как продолжение вашего приложения, а не сторонний сайт.
Цвет фона, цвет текста и радиус скругления, с кнопкой, отражённой в предпросмотре.
Шаг 6 — Проверьте предпросмотр на мобильном устройстве и компьютере
Предпросмотр справа обновляется при каждом изменении. Используйте селектор Мобильный / Компьютер сверху, чтобы проверить оба формата.
Если вы вводите некорректное значение цвета — название цвета, неполный hex-код — поле получает красную рамку, и значение не применяется к предпросмотру. Исправьте это, прежде чем продолжить.
Всегда проверяйте в режиме «Мобильный». Большинство конечных пользователей проходят проверку со своего телефона; это наиболее важный формат. И проверьте три вида контраста: текст кнопки на фоне кнопки, кнопка на фоне карточки процесса и цвет контента на фоне. Часто встречается ситуация, когда белая кнопка настроена на белой карточке и просто исчезает — предпросмотр существует, чтобы выявить это до публикации.
Селектор «Мобильный / Компьютер» и поле цвета с выделенным некорректным значением.
Шаг 7 — Опубликуйте
Кнопка Опубликовать становится активной, как только появляется несохранённое изменение.
- Опубликовать сохраняет настройку и применяет её к процессу.
- Отмена отменяет всё, что вы отредактировали, и возвращает поля к последнему опубликованному состоянию.
- Чтобы вернуться к значениям Unico по умолчанию, очистите поля цвета (позволив подсказке снова появиться), удалите логотип и опубликуйте.
История версий отсутствует. Если вы опубликуете неудачную настройку, решение — скорректировать значения и опубликовать снова; способа восстановить предыдущую версию одним нажатием нет. Именно поэтому проверка предпросмотра на предыдущем шаге важна. Пока вы ещё не опубликовали изменения, «Отмена» решает проблему.
Шаг 8 — Зарегистрируйте разрешённые домены
Доступно только в модели iFrame.
В iFrame процесс выполняется встроенным в вашу собственную страницу. В целях безопасности загружать его могут только домены, зарегистрированные здесь.
-
Нажмите Настроить домены в правом верхнем углу.
-
Боковая панель показывает список Зарегистрированных доменов, каждый с действиями редактировать (карандаш) и удалить (корзина).
-
Чтобы добавить домен, нажмите Создать домен, введите домен и нажмите Сохранить.
Вводите домен с указанием протокола (https://yoursite.com).
Этот список — настройка безопасности, и он сохраняется отдельно. Он применяется по нажатию Сохранить на самой панели, а не по нажатию Опубликовать на основном экране. Также зарегистрируйте свои тестовые и staging-домены и удаляйте те, что больше не используются, — это список тех, кто может встраивать ваш процесс.
Часто задаваемые вопросы
Изменения применяются к процессам, которые уже выполняются? Нет. Опубликованная настройка применяется к процессам, начатым после публикации.
Почему я не вижу поля «Логотип» и «Фон»? Есть две возможные причины. Первая: возможно, у вас выбран iFrame — в iFrame процесс встроен в вашу собственную страницу, которая уже предоставляет фон и идентичность бренда. Вторая: возможно, ваша версия CbU не предоставляет это поле. Цвет фона существует только в CbU 3.0 в redirect, а логотип в iFrame — только в CbU 1.0. Проверьте таблицу в разделе «Перед тем как начать».
Мой логотип был отклонён при загрузке. Почему? Проверьте три требования: формат PNG, высота до 60 px и размер до 100 КБ.
Фон выглядит слишком тёмным в нижней части экрана. Это ожидаемо — фон отображается как градиент, темнеющий сверху вниз. Выберите более светлый базовый тон.
Предпросмотр не совпадает с моим реальным процессом. Предпросмотр основан на дизайне Web Journey v3.0. Если ваша интеграция на другой версии, результат может отличаться — обратитесь в Unico, чтобы оценить возможность обновления версии.
Я опубликовал неудачную настройку. Как её отменить? Откройте экран снова, скорректируйте значения (или очистите их, чтобы вернуться к значениям по умолчанию) и опубликуйте снова. История версий отсутствует. Если вы ещё не опубликовал и изменения, просто нажмите Отмена.
Кто изменил настройку в моём аккаунте? Экран не показывает эту историю. Чтобы узнать, какой пользователь внёс последнее изменение и когда, обратитесь в поддержку Unico.
Краткий справочник
IDCloud Portal
└─ Настройки (значок шестерёнки в боковом меню)
└─ Вкладка «Оформление»
├─ iFrame ............... Кнопки (цвет фона, цвет текста, радиус скругления)
│ Контент (цвет контента)
│ + Настроить домены
└─ Redirect или SDK ...... Логотип (PNG, 60 px, 100 КБ)
Фон (цвет, применяется как градиент)
Кнопки (цвет фона, цвет текста, радиус скругления)
Контент (цвет контента)
Предпросмотр в реальном времени · Мобильный / Компьютер · Отмена · Опубликовать