Кастомизация UI-элементов ЕЛК

Обновлено 11 марта 2026

В данном разделе описаны способы с помощью которых можно кастомизировать разрешенные дизайн-гайдом элементы ЕЛК:

• акцентный цвет подложки аватара,
• цвет инициалов внутри аватара,
• цвет номера телефона,
• фон виджета

Необязательный шаг — если не настраивать, будет стандартный вид.

1. Настройка UI через инициализацию пользовательского интерфейса

• WEB даная настройка подробно описана здесь см. раздел опциональные параметры и настройка цветовых тем

• Android см. раздел Android SDK

• iOS см. раздел iOS SDK

2. Настройка UI, через внесение изменений в разметку

При получении макетов командой ЕЛК, производится оценка необходимой кастомизации и внесение разрешенных изменений в разметку.

Пример разметки:

{
  "badge": {
    "type": "BadgeWidget",
    "load": "https://oauth-ift.sber.ru/api/v1/badgeinfo-provider?widgetName=badgeStaticForProfit",
    "blockId": "web_profile_badge_widget",
    "defaultData": {
      "title": "За выгодой",
      "click": {
        "browserUrl": "https://id-ift.sber.ru/profile/prime/showcase"
      }
    }
  },
  "sections": [
    {
      "type": "UserInfoWidget",
      "blockId": "web_profile_userInfo_widget",
      "load": "https://oauth-ift.sber.ru/api/v1/userdata?infoSource=userInfo&widgetName=profileUserLogoBrowserWithID",
      "widgetType": "horizontalSmall"
    },
    {
      "type": "SpasiboWidget",
      "blockId": "web_profile_spasibo_widget",
      "load": "https://oauth-ift.sber.ru/api/v1/userdata?infoSource=bonusBalance&widgetName=cardInfoBonusBalanceBrowser"
    },
    {
      "type": "PrimeWidget",
      "blockId": "web_profile_prime_widget",
      "load": "https://oauth-ift.sber.ru/api/v1/userdata?infoSource=primeSubscription&widgetName=cardInfoPrimeBrowser"
    }
  ],
  "composition": "SberHealth",
  "property": {
    "themeColorLight": {
      "main": "#eceff2",
      "accent": "#080808",
      "secondary": "#7e7e7e",
      "theme": "#148f2b",
      "warning": "#e3621b"
    },
    "themeColorDark": {
      "main": "#1f1f1f",
      "accent": "#ffffff",
      "secondary": "#8f8f8f",
      "theme": "#148f2b",
      "warning": "#fa6d20"
    },
    "isDarkMode": false,
    "partnerName": "Наименование Партнера"
  }
}

{
    "sections": [
        {
            "type": "UserInfoMini",
            "load": "https://oauth-ift.sber.ru/api/v1/userdata?infoSource=userInfo&widgetName=profileUserLogoWithIDSSO",
            "data": {
                "isShowClickable": true,
                "subtype": "type_1",
                "avatarBackgroundColorLight": {
                    "hex": "#FFFFFF",
                    "transparent": 1
                },
                "avatarBackgroundColorDark": {
                    "hex": "#181F25",
                    "transparent": 1
                },
                "avatarTextColorLight": {
                    "hex": "#617A94",
                    "transparent": 1
                },
                "avatarTextColorDark": {
                    "hex": "#8199B1",
                    "transparent": 1
                }
            }
        },
        {
            "type": "NoScrollSection",
            "data": {
                "widgets": [
                    {
                        "type": "InfoCard",
                        "load": "https://oauth-ift.sber.ru/api/v1/userdata?infoSource=bonusBalance&widgetName=cardInfoBonusBalanceMini_v2",
                        "data": {
                            "widgetName": "Спасибо",
                            "isShowClickable": true,
                            "isIconTint": false,
                            "isSingleLine": false
                        }
                    },
                    {
                        "type": "InfoCard",
                        "load": "https://oauth-ift.sber.ru/api/v1/userdata?infoSource=primeSubscription&widgetName=cardInfoPrime",
                        "data": {
                            "widgetName": "Прайм",
                            "isShowClickable": true,
                            "isIconTint": false,
                            "isSingleLine": false,
                            "subtype": "type_1",
                            "isNudging": false
                        }
                    }
                ]
            }
        }
    ],
    "property": {
        "partnerName": "Н"
    }
}

3. Изменение Имени пользователя и Аватара на стороне Партнера

Реализовали возможность изменить Имя Пользователя и Аватар силами Партнера о чем подробно описано в руководстве