Руководство для frontend-разработчиков (WEB)

Обновлено 6 февраля 2026

Для подключения скрипта JS-SDK необходимо выполнить следующие шаги:

Шаг 1. Сбор необходимых данных

Перед инициализацией подготовьте объект конфигурации со следующими параметрами:

Обязательные параметры

Параметр	Тип	Описание	Пример
sessionId	string	Внутренний идентификатор сессии или пользователя партнера, нужен для последующего нахождения АТ сервером партнера	-
clientId	string	Идентификатор приложения партнера	40c1d5da-1532-11eb-adc1-0242ac120002
partnerProfileUrl	string	URL сервера партнера для запросов на сервер ЕЛК проксируемых через сервер партнера	https://zvuk.com/
blockId	string	Id блока на поверхности партнера, куда будет отрисована группа виджетов ЕЛК	sbid_388149487965860015
pathToJson	string	Путь до json-файла с разметкой	https://id.sber.ru/profile/external_partners/elk

Опциональные параметры

Параметр	Тип	Описание	Пример
themeColorLight	object	Цвета партнера для светлой темы
themeColorDark	object	Цвета партнера для темной темы
isDarkMode	boolean	Используется ли темная тема (необходимо для партнеров с дефолтно-темной темой)	false
headersELK	[String: String]	Авторизационные хедеры Партнера (ключ, значение)
ShowELK	function	Функция callback Показ главного экрана ЕЛК
HideELK	function	Функция callback Скрытие главного экрана ЕЛК, в виду ошибки
ClickELK	function	Функция callback Событие клика на виджет ЕЛК
WidgetStatusELK	function	Функция callback Событие изменения статуса виджета ЕЛК
WidgetErrorELK	function	Функция callback Передача в приложение партнера кодов ошибок к сервера партнера	Есть код ошибки в заголовке: WidgetErrorELK (widgetName: "Прайм", httpStatusCode: 401, partnerErrorCode: [Значение  x-elk-error-code]) Нет кода ошибки в заголовке: WidgetErrorELK (widgetName: "Прайм", httpStatusCode: 401, partnerErrorCode: "NULL")

Настройка цветовых тем

Светлая тема (themeColorLight)

{
  "main": "#1f1f1f",
  "accent": "#ffffff",
  "secondary": "#576875",
  "theme": "#576875",
  "warning": "#e3621b"
}

Темная тема (themeColorDark)

{
  "main": "#ffffff",
  "accent": "#1f1f1f",
  "secondary": "#8a9ba8",
  "theme": "#8a9ba8",
  "warning": "#ff8c42"
}

Описание цветовых полей:

• main - основной цвет (цвет фона виджета)
• accent - цвет основных текстовых элементов
• secondary - цвет вторичных текстовых элементов
• theme - тематический цвет (цвет телефона в виджетах userinfo и т.п.)
• warning - цвет информационных сообщений для привлечения внимания пользователя (например, текстовка "Ожидает оплаты")

Шаг 2. Подключение скрипта

Добавить в HTML тег со ссылкой на скрипт:

<script src="https://id.sber.ru/profile/external_partners/WEB_PROFILE.und.js" async></script>

Шаг 3. Подготовка контейнеров для виджетов

Добавить в HTML блоки из группы section для размещения виджетов с соответствующими id:

<div id="sbid_38814948796580015"></div>

Шаг 4. Инициализация JS-SDK

Вызвать скрипт и передать в него подготовленные данные:

new ELK({sessionId, clientId, partnerProfileUrl, isDarkMode, themeColorLight, themeColorDark, blockId, pathToJson});

Шаг 5. Работа с методами JS-SDK (Опционально)

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

const ELK_INSTANCE = new ELK({sessionId, clientId, partnerProfileUrl, isDarkMode, themeColorLight, themeColorDark, blockId, pathToJson});
ELK_INSTANCE.toggleTheme();

Перечень доступных методов можно посмотреть в разделе Методы JS-SDK.