--- title: Настройка оформления процесса description: Настройте визуальное оформление процесса — логотип, цвета, фон и форму кнопок — непосредственно в IDCloud Portal, с предпросмотром в реальном времени. canonical: https://developer.unico.io/ru/dual-api/product-guide/portal-idcloud/settings/journey-customization locale: ru generated_by: markdown-export --- **Настройка оформления процесса** позволяет применить визуальную идентичность вашего бренда к процессу проверки личности Unico — без обращения в поддержку, без зависимости от команды поддержки, с результатом, видимым сразу же. Вы задаёте логотип, цвет фона, цвета и форму кнопок и цвет контента. После публикации настройка вступает в силу немедленно для следующих процессов, запущенных в вашей ветке (branch). :::info **Для кого это:** клиенты, использующие Web Journey с моделью интеграции iFrame, Redirect или SDK. **Что меняется для конечного пользователя:** экран, который он видит во время проверки личности, теперь выглядит в стиле вашего бренда. **Где найти:** IDCloud Portal → боковое меню **Настройки** → вкладка **Оформление**. ::: ## Перед тем как начать ### Разрешение на доступ Вашему пользователю нужен доступ к разделу **Настройки** IDCloud Portal. Если значок шестерёнки не отображается в боковом меню, попросите администратора вашего аккаунта предоставить доступ. ### Как применяется настройка | | | | :- | :- | | **Область действия** | Настройка применяется по **ветке (branch)** и по **модели интеграции**. iFrame и Redirect/SDK имеют независимые конфигурации — публикация одной не влияет на другую. | | **Когда вступает в силу** | Немедленно после публикации, для процессов, **запущенных с этого момента**. Процессы, уже находящиеся в работе, сохраняют прежний внешний вид. | | **Если вы не настраиваете** | Процесс загружается с темой Unico по умолчанию. | | **Версия процесса** | Предпросмотр основан на дизайне **Web Journey v3.0**. В других версиях предпросмотр может не точно отражать результат — в этом случае обратитесь в Unico для обновления вашей версии. | ### Что нужно подготовить - **Логотип** в формате PNG, желательно с прозрачным фоном, высотой до **60 px** и размером до **100 КБ**. - **Hex-коды** цветов вашего бренда (например, `#1B3FA0`). ### Что настраивается в вашей интеграции Помимо модели интеграции, то, что отображается на экране, зависит от **версии Web Journey** вашей интеграции. Это самая частая причина, по которой «я не вижу это поле»: | Функция | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 redirect | 2.0 redirect | 3.0 redirect | | :- | :-: | :-: | :-: | :-: | :-: | :-: | | **Логотип** | ✅ | не существует | не существует | ✅ | ✅ | ✅ | | **Цвет фона** | — | — | — | — | — | ✅ | | **Цвет фона кнопки** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | **Цвет текста кнопки** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | **Радиус скругления кнопки** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | **Цвет контента** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Короче говоря: **цвет фона настраивается только в Web Journey v3.0 в redirect**, а в iFrame логотип существует только в Web Journey v1.0. Цвета и форма кнопки работают во всех комбинациях. :::info Если вы не знаете, какая у вас версия, уточните у своего контакта по Onboarding или в поддержке Unico. ::: ## Шаг за шагом ### Шаг 1 — Откройте вкладку «Оформление» В IDCloud Portal нажмите значок **шестерёнки (Настройки)** в боковом меню. Экран открывается прямо на вкладке **Оформление**. Экран «Настройки» содержит три вкладки — **Оформление**, **Вебхук** и **QR-код**. Это руководство описывает первую из них. ![Экран «Настройки» с выделенным значком шестерёнки в боковом меню](/img/product-guide/journey-customization/en/01-settings-tab.png) *Экран «Настройки» с выбранной вкладкой «Оформление».* ### Шаг 2 — Выберите модель интеграции В левой колонке выберите **iFrame** или **Redirect или SDK** — поля формы меняются в зависимости от модели. Экран разделён на три области: **выбор модели** слева, **форма** в центре и **предпросмотр в реальном времени** справа, который реагирует на каждое изменение до публикации. **Если вы используете обе модели, вам нужно настроить обе.** Это независимые конфигурации — настройте и опубликуйте одну, затем повторите для другой. ![Полный экран настройки оформления: выбор модели, форма и предпросмотр](/img/product-guide/journey-customization/en/02-integration-model.png) *Селектор iFrame / Redirect или SDK, форма и предпросмотр.* ### Шаг 3 — Загрузите логотип :::warning Доступно в **Redirect или SDK**. В iFrame — только в Web Journey v1.0. ::: Нажмите **Добавить логотип** и выберите файл. Требования: формат **PNG**, максимальная высота **60 px**, максимальный размер **100 КБ**. **Используйте PNG с прозрачным фоном.** Так логотип будет корректно смотреться на любом цвете фона — PNG с белым фоном превращается в заметный прямоугольник, когда фон окрашен. Также предпочтительно использовать горизонтальную версию логотипа: доступное пространство широкое и невысокое. ![Поле «Добавить логотип» с требованиями к формату, высоте и размеру](/img/product-guide/journey-customization/en/03-customization-form.png) *Поле «Добавить логотип» с требованиями к формату, высоте и размеру.* ### Шаг 4 — Задайте цвета Есть четыре поля цвета, сгруппированные в форме по разделам **Фон**, **Кнопки** и **Контент**: | Поле | Где отображается в процессе | По умолчанию | Доступность | | :- | :- | :- | :- | | **Цвет фона** | Фон экрана процесса | `#F2F2F7` | Только **Web Journey v3.0 в redirect** | | **Кнопки → Цвет фона** | Заливка кнопки действия (например, «Сделать селфи») | — | Все версии | | **Кнопки → Цвет текста** | Текст внутри кнопки | — | Все версии | | **Цвет контента** | Заголовки и описания (например, «Проверка личности») | `#000000` | Все версии | Для любого из них вы можете **ввести hex-значение** (например, `#1B3FA0`) или **нажать на цветовой образец** слева от поля, чтобы открыть визуальный выбор цвета. В полях фона и контента, если вы оставите их пустыми, процесс будет использовать значение по умолчанию, показанное как подсказка (placeholder) в самом поле. **Цвет фона применяется как градиент, а не как сплошной цвет.** Тон, который вы задаёте, — это верх градиента, и процесс постепенно темнеет к нижней части экрана. Очень тёмные тона дают почти чёрную основу — выбирайте тон от среднего до светлого, если хотите равномерный результат. **Используйте основной цвет вашего бренда для фона кнопки.** Это элемент, который пользователь должен найти первым; если он не выделяется, процесс теряет в конверсии. **Выбирайте четыре цвета как единый набор, а не по одному.** Они влияют друг на друга: тёмный фон с чёрным цветом контента делает процесс нечитаемым, а светлая кнопка на белой карточке может просто пропасть из виду. Задайте все четыре цвета и только потом проверьте результат в предпросмотре (Шаг 6). ![Поля цвета фона, цветов кнопки и цвета контента, с результатом в предпросмотре](/img/product-guide/journey-customization/en/04-colors.png) *Поля цвета фона, цвета фона/текста кнопки и цвета контента, с результатом в предпросмотре.* ### Шаг 5 — Настройте кнопки Три поля управляют кнопкой действия процесса (например, «Сделать селфи»): | Поле | Что оно делает | | :- | :- | | **Цвет фона** | Цвет заливки кнопки | | **Цвет текста** | Цвет текста внутри кнопки | | **Радиус скругления** | Скругление углов, в пикселях | Референсные значения для **радиуса скругления**: - 0 → прямоугольная кнопка, острые углы - от 8 до 16 → слегка скруглённые углы - 24 и более → форма таблетки (полностью скруглённая) Значения выше половины высоты кнопки больше не меняют результат — форма таблетки является пределом. **Используйте основной цвет вашего бренда для фона кнопки.** Это элемент, который пользователь должен найти первым — если он не выделяется, процесс теряет в конверсии. И сохраняйте радиус скругления в соответствии с остальным вашим продуктом, чтобы процесс воспринимался как продолжение вашего приложения, а не сторонний сайт. ![Поле радиуса скругления с кнопкой, отражённой в предпросмотре](/img/product-guide/journey-customization/en/05-button-border-radius.png) *Цвет фона, цвет текста и радиус скругления, с кнопкой, отражённой в предпросмотре.* ### Шаг 6 — Проверьте предпросмотр на мобильном устройстве и компьютере Предпросмотр справа обновляется при каждом изменении. Используйте селектор **Мобильный / Компьютер** сверху, чтобы проверить оба формата. Если вы вводите некорректное значение цвета — название цвета, неполный hex-код — поле получает **красную рамку**, и значение не применяется к предпросмотру. Исправьте это, прежде чем продолжить. **Всегда проверяйте в режиме «Мобильный».** Большинство конечных пользователей проходят проверку со своего телефона; это наиболее важный формат. И проверьте три вида контраста: текст кнопки на фоне кнопки, кнопка на фоне карточки процесса и цвет контента на фоне. Часто встречается ситуация, когда белая кнопка настроена на белой карточке и просто исчезает — предпросмотр существует, чтобы выявить это до публикации. ![Селектор «Мобильный / Компьютер» на панели предпросмотра](/img/product-guide/journey-customization/en/06-live-preview.png) *Селектор «Мобильный / Компьютер» и поле цвета с выделенным некорректным значением.* ### Шаг 7 — Опубликуйте Кнопка **Опубликовать** становится активной, как только появляется несохранённое изменение. - **Опубликовать** сохраняет настройку и применяет её к процессу. - **Отмена** отменяет всё, что вы отредактировали, и возвращает поля к последнему опубликованному состоянию. - Чтобы **вернуться к значениям Unico по умолчанию**, очистите поля цвета (позволив подсказке снова появиться), удалите логотип и опубликуйте. **История версий отсутствует.** Если вы опубликуете неудачную настройку, решение — скорректировать значения и опубликовать снова; способа восстановить предыдущую версию одним нажатием нет. Именно поэтому проверка предпросмотра на предыдущем шаге важна. Пока вы ещё не опубликовали изменения, «Отмена» решает проблему. ### Шаг 8 — Зарегистрируйте разрешённые домены :::warning Доступно только в модели **iFrame**. ::: В iFrame процесс выполняется встроенным в вашу собственную страницу. В целях безопасности загружать его могут только домены, зарегистрированные здесь. 1. Нажмите **Настроить домены** в правом верхнем углу. ![Кнопка «Настроить домены», выделена](/img/product-guide/journey-customization/en/07-configure-domains-button.png) 2. Боковая панель показывает список **Зарегистрированных доменов**, каждый с действиями **редактировать** (карандаш) и **удалить** (корзина). ![Панель «Настроить домены» со списком зарегистрированных доменов](/img/product-guide/journey-customization/en/08-domains-list.png) 3. Чтобы добавить домен, нажмите **Создать домен**, введите домен и нажмите **Сохранить**. ![Форма создания домена](/img/product-guide/journey-customization/en/09-create-domain.png) Вводите домен с указанием протокола (`https://yoursite.com`). **Этот список — настройка безопасности, и он сохраняется отдельно.** Он применяется по нажатию **Сохранить** на самой панели, а не по нажатию **Опубликовать** на основном экране. Также зарегистрируйте свои тестовые и staging-домены и удаляйте те, что больше не используются, — это список тех, кто может встраивать ваш процесс. ## Часто задаваемые вопросы **Изменения применяются к процессам, которые уже выполняются?** Нет. Опубликованная настройка применяется к процессам, начатым после публикации. **Почему я не вижу поля «Логотип» и «Фон»?** Есть две возможные причины. Первая: возможно, у вас выбран **iFrame** — в iFrame процесс встроен в вашу собственную страницу, которая уже предоставляет фон и идентичность бренда. Вторая: возможно, ваша **версия Web Journey** не предоставляет это поле. Цвет фона существует только в Web Journey v3.0 в redirect, а логотип в iFrame — только в Web Journey v1.0. Проверьте таблицу в разделе «Перед тем как начать». **Мой логотип был отклонён при загрузке. Почему?** Проверьте три требования: формат **PNG**, высота до **60 px** и размер до **100 КБ**. **Фон выглядит слишком тёмным в нижней части экрана.** Это ожидаемо — фон отображается как градиент, темнеющий сверху вниз. Выберите более светлый базовый тон. **Предпросмотр не совпадает с моим реальным процессом.** Предпросмотр основан на дизайне **Web Journey v3.0**. Если ваша интеграция на другой версии, результат может отличаться — обратитесь в Unico, чтобы оценить возможность обновления версии. **Я опубликовал неудачную настройку. Как её отменить?** Откройте экран снова, скорректируйте значения (или очистите их, чтобы вернуться к значениям по умолчанию) и опубликуйте снова. История версий отсутствует. Если вы ещё не опубликовали изменения, просто нажмите **Отмена**. **Кто изменил настройку в моём аккаунте?** Экран не показывает эту историю. Чтобы узнать, какой пользователь внёс последнее изменение и когда, обратитесь в поддержку Unico. ## Краткий справочник ```text IDCloud Portal └─ Настройки (значок шестерёнки в боковом меню) └─ Вкладка «Оформление» ├─ iFrame ............... Кнопки (цвет фона, цвет текста, радиус скругления) │ Контент (цвет контента) │ + Настроить домены └─ Redirect или SDK ...... Логотип (PNG, 60 px, 100 КБ) Фон (цвет, применяется как градиент) Кнопки (цвет фона, цвет текста, радиус скругления) Контент (цвет контента) Предпросмотр в реальном времени · Мобильный / Компьютер · Отмена · Опубликовать ```