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

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

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

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

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

Регистрация в REST API:

POST 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 пользователя, данные из строки.

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

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

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

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

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

var dialog = new BX.UI.Dialog({
    title: 'Проверка контакта',
    width: 600,
    content: '<div id="my-content">Загрузка...</div>',
    buttons: [
        new BX.UI.Dialog.Button({
            text: 'Применить',
            color: BX.UI.Button.Color.SUCCESS,
            onclick: function() {
                // действие
                dialog.close();
            }
        }),
        BX.UI.Dialog.ButtonSet.CANCEL,
    ],
});
dialog.show();

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

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

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

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);
});

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

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

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

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