Кастомизация интерфейса CRM в Битрикс24: BX.UI, JX и Placement API

Meta description: Технический гайд по кастомизации CRM Битрикс24: BX.UI компоненты, JX-фреймворк, Placement API, crm_contact_list_menu, примеры кода. Для разработчиков и CTO.

Breadcrumb: Главная / Блог / Кастомизация интерфейса CRM Битрикс24

publishedAt: 2026-07-06

---

Стандартный интерфейс Битрикс24 покрывает 80% задач. Остальные 20% требуют кастомизации: добавить кнопку в список контактов, встроить дополнительную вкладку в карточку сделки, показать собственный виджет в боковой панели.

Это статья для разработчиков и технических директоров. Разберём инструменты: BX.UI, JX-компоненты, Placement API. Покажем примеры кода и расскажем что именно можно изменить в интерфейсе CRM без нарушения требований маркетплейса.

---

Три уровня кастомизации

Перед тем как писать код: определитесь на каком уровне нужна кастомизация.

Уровень 1. Placement API (рекомендуемый)

Битрикс24 предоставляет официальные «точки встраивания» (placement): места в интерфейсе куда приложение может добавить свой элемент. Кнопки, панели, вкладки. Это официальный способ, поддерживается маркетплейсом.

Уровень 2. BX.UI компоненты

JavaScript-фреймворк Битрикс24 для построения UI. Позволяет создавать диалоги, попапы, формы в стиле системного интерфейса. Используется совместно с Placement API.

Уровень 3. JX Framework

Более низкоуровневый слой. Управление DOM, события, AJAX-запросы. Используется когда BX.UI не хватает.

---

Placement API: что и куда можно встроить

Placement: это именованная точка в интерфейсе. Приложение регистрирует обработчик для конкретного placement, и система показывает элемент приложения в нужном месте.

Ключевые CRM-плейсменты

`CRM_LEAD_LIST_MENU` и `CRM_CONTACT_LIST_MENU`

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

Регистрация в REST API: ``` https://your-domain.bitrix24.ru/rest/placement.bind placement=CRM_CONTACT_LIST_MENU handler=https://your-app.ru/handler.php title=Моё действие ```

При клике: Битрикс24 вызывает handler с параметрами: ID контакта, ID пользователя, данные из строки.

`CRM_DEAL_DETAIL_TAB` и `CRM_CONTACT_DETAIL_TAB`

Добавляют вкладку в карточку сделки или контакта. Вкладка загружает iframe с вашим приложением. Передаются параметры: ID сущности, тип.

Это самый распространённый способ встроить дополнительный функционал: расчёт маржинальности, история взаимодействий из внешней системы, карта доставки.

`CRM_DEAL_DETAIL_ACTIVITY`

Блок в ленте активности карточки сделки. Позволяет добавить собственный тип активности: лог из телефонии, событие из внешней системы.

`CALL_CARD`

Панель в карточке звонка (при входящем/исходящем вызове). Показывает данные о клиенте из внешней базы прямо во время разговора.

`CRM_ROBOTDESIGNER_TRIGGER` и `CRM_ROBOTDESIGNER_ROBOT`

Добавляют кастомные триггеры и роботы в конструктор автоматизации. Это мощный placement для создания собственных действий в воронке.

---

Регистрация placement: пример кода

Регистрация через REST API (PHP):

```php $result = CRest::call('placement.bind', [ 'PLACEMENT' => 'CRM_CONTACT_LIST_MENU', 'HANDLER' => 'https://your-app.ru/menu-handler.php', 'TITLE' => 'Проверить в базе', 'DESCRIPTION' => 'Проверяет контакт во внутренней базе данных', 'GROUP_NAME' => 'Мои действия', 'ICON' => 'https://your-app.ru/icon.png', ]); ```

Обработчик `menu-handler.php` получает POST-запрос с параметрами: ``` PLACEMENT_OPTIONS[entityId] = 123 // ID контакта PLACEMENT_OPTIONS[entityTypeId] = 3 // тип сущности CRM AUTH[access_token] = ... // токен для REST-запросов ```

---

BX.UI: компоненты для кастомного UI

BX.UI: это набор JavaScript-компонентов которые повторяют визуальный стиль Битрикс24. Используйте их чтобы ваш интерфейс выглядел нативно.

Диалоговое окно

```javascript var dialog = new BX.UI.Dialog({ title: 'Проверка контакта', width: 600, content: '

', buttons: [ new BX.UI.Dialog.Button({ text: 'Применить', color: BX.UI.Button.Color.SUCCESS, onclick: function() { // действие dialog.close(); } }), BX.UI.Dialog.ButtonSet.CANCEL, ], }); dialog.show(); ```

Попап-уведомление

```javascript BX.UI.Notification.Center.notify({ content: 'Контакт найден в базе: Иванов Иван', type: 'success', autoHideDelay: 4000, }); ```

Выпадающий список (Popup Menu)

Используется для контекстных меню и выпадающих панелей:

```javascript var popup = new BX.PopupMenu( 'my-popup-' + id, node, [ { text: 'Открыть в CRM', onclick: function() { / ... / } }, { text: 'Отправить письмо', onclick: function() { / ... / } } ], { autoHide: true, closeByEsc: true } ); popup.show(); ```

---

JX Framework: работа с DOM и событиями

JX (JavaScript eXtended): более низкоуровневый слой. Полезен для:

AJAX-запросы к REST API из JS

```javascript BX.ajax.runAction('crm.contact.get', { data: { id: contactId } }).then(function(response) { var contact = response.data; console.log(contact.NAME, contact.LAST_NAME); }).catch(function(error) { console.error(error); }); ```

Подписка на события CRM

Битрикс24 генерирует JavaScript-события при изменении данных в интерфейсе:

```javascript // Подписаться на сохранение карточки сделки BX.addCustomEvent('CRMObjectEditorSaved', function(event) { var entityId = event.id; var entityType = event.entityTypeName; // 'deal', 'contact', etc. // ваш код }); ```

Работа с BX.SidePanel

SidePanel: боковая панель Битрикс24. Открывает ваш iframe без перехода на новую страницу:

```javascript BX.SidePanel.Instance.open('https://your-app.ru/detail/?id=' + contactId, { width: 800, animationDuration: 300, label: { text: 'Детальная информация', bgColor: '#4CAF50', }, }); ```

---

Что не стоит делать

Ряд подходов технически работает но нарушает правила маркетплейса или создаёт проблемы при обновлениях:

Прямая манипуляция DOM Битрикс24. Изменение HTML-структуры системных элементов через `document.querySelector` и подобные методы. Работает сегодня. Ломается после обновления системы.

Переопределение системных JS-функций. Monkey-patching `BX.CRM.*` методов. Официально не поддерживается.

Использование внутренних CSS-классов. Классы вида `crm-entity-stream-*` не документированы и меняются без предупреждения.

Правильный путь: всегда использовать Placement API + BX.UI + REST API. Это официальные интерфейсы которые поддерживаются командой Битрикс24.

---

Примеры приложений SellUs

За 9 лет работы с Битрикс24 мы разработали несколько приложений использующих описанные механизмы:

Helper: набор инструментов для ускорения работы менеджеров в CRM. Использует Placement API для встройки кнопок и панелей в карточки сделок и контактов.

AutoHub: автоматизация интеграций. Использует CRM_ROBOTDESIGNER_ROBOT для добавления кастомных роботов в конструктор автоматизации Битрикс24.

Page2Bitrix24: подключение внешних сайтов к CRM. Использует BX.SidePanel и CALL_CARD placement для показа данных о посетителе сайта во время звонка.

Если нужно разработать кастомизацию под конкретный бизнес-процесс: напишите нам, опишем архитектуру и оценим сроки.

---

Полезные материалы

• Аудит-чеклист Битрикс24 : проверьте текущую настройку CRM перед разработкой кастомизации
• Helper: инструменты для менеджеров : готовое приложение с кастомными placement
• AutoHub: интеграции Битрикс24 : кастомные роботы и триггеры