Чому варто кастомізувати картку CRM?
Менеджер з продажу обладнання бачить ті самі поля, що й менеджер з оренди: поля не згруповані, обчислюваних значень немає, умовна логіка відображення відсутня. Ми стикалися з такими запитами десятки разів і накопичили досвід, який дозволяє вирішити задачу за 3–7 днів замість місяців. Наші інженери гарантують: кастомна картка покаже менеджеру саме те, що потрібно на поточній стадії, без зайвої інформації. Розробка кастомних карток CRM Бітрікс24 — наша ключова послуга. Ми створюємо кастомні картки угод і смарт-процесів.
Два рівні кастомізації:
Рівень 1: налаштування через інтерфейс. У картці угоди (контакту, смарт-процесу) натисніть «Налаштувати картку» → «Налаштувати поля та розділи». Тут можна: перейменувати розділи, перетягнути поля між секціями, приховати непотрібні поля, задати обов'язковість полів за стадіями (для угод). Це безкоштовно і покриває ~40% запитів. Але не можна додати обчислювані поля, умовну логіку, кастомні віджети, дані із зовнішніх систем.
Рівень 2: розробка через REST Placement API. Це вбудовування довільного HTML/JS-контенту в певні зони картки. Саме тут починається справжня кастомізація.
Технічна реалізація через Placement API
Зони вбудовування
Картка CRM-сутності містить декілька зон (placement), в які можна вбудувати кастомний контент:
-
CRM_DEAL_DETAIL_TAB— вкладка в картці угоди. Повноцінна область для будь-якого UI. -
CRM_DEAL_DETAIL_ACTIVITY— блок у таймлайні. Підходить для виведення кастомних дій. -
CRM_CONTACT_DETAIL_TAB,CRM_COMPANY_DETAIL_TAB— аналогічно для контактів і компаній. -
CRM_DYNAMIC_ITEM_DETAIL_TAB— вкладка в картці смарт-процесу.
Реєстрація placement через REST:
BX24.callMethod('placement.bind', { PLACEMENT: 'CRM_DEAL_DETAIL_TAB', HANDLER: 'https://your-app.com/deal-tab.html', TITLE: 'Калькулятор маржі' }); Після реєстрації в картці з'явиться нова вкладка. При відкритті Бітрікс24 завантажить HANDLER в iframe і передасть контекст: ENTITY_ID (ID угоди), AUTH_ID, REFRESH_ID.
Приклад: вкладка «Фінанси» з даними
Розглянемо типовий кейс — вкладка «Фінанси» в картці угоди, яка показує: суму за товарними позиціями, собівартість із зовнішньої 1С, маржу, історію оплат. Наприклад, на проєкті для дистриб'ютора обладнання ми реалізували таку вкладку, яка автоматично підтягує собівартість з 1С і розраховує маржу. Це дозволило менеджерам бачити прибутковість угоди без ручних розрахунків, скоротивши час заповнення картки з 15 хвилин до 2 хвилин (зменшення на 86%).
Крок 1: отримання даних угоди
BX24.init(function() { var dealId = BX24.placement.info().options.ID; BX24.callBatch({ deal: ['crm.deal.get', {id: dealId}], products: ['crm.deal.productrows.get', {id: dealId}] }, function(result) { var deal = result.deal.data(); var products = result.products.data(); renderFinanceTab(deal, products); }); }); Крок 2: запит собівартості із зовнішнього API. Вкладка робить запит до вашого бекенду, передаючи артикули товарних позицій. Бекенд проксіює запит до 1С або ERP і повертає собівартість.
Крок 3: рендеринг. Розраховуєте маржу на клієнті та виводите таблицю. Для візуальної відповідності використовуйте CSS-змінні Б24 або бібліотеку @bitrix24/b24-ui. Ми використовуємо React для рендерингу вкладки та BX24.js для комунікації з Бітрікс24.
Умовна логіка полів
Частий запит: приховувати/показувати поля залежно від значення іншого поля. Наприклад, поле «Причина відмови» видно лише на стадії «Провалена». Стандартний функціонал дозволяє зробити поле обов'язковим за стадією, але не приховати його.
Рішення — кастомний обробник через placement CRM_DEAL_DETAIL_TAB або вбудовування JS-коду через користувацький тип поля. У коробковій версії доступна модифікація шаблону компонента bitrix:crm.deal.detail з додаванням JS-логіки в script.js.
Для хмарної версії єдиний чистий спосіб — placement з повним перемалюванням потрібної секції полів. Це означає: ви забираєте дані через REST, рендерите поля з умовною логікою у своєму iframe, а при збереженні відправляєте зміни назад через crm.deal.update.
Віджети в таймлайні
Placement CRM_*_DETAIL_ACTIVITY вбудовує блок прямо в стрічку активностей картки. Підходить для:
- Виведення статусу доставки (дані з API транспортної компанії)
- Показу балансу клієнта з бухгалтерської системи
- Відображення останніх тікетів з helpdesk
Віджет оновлюється при кожному відкритті картки. Для кешування використовуйте BX24.appOption — сховище застосунку на стороні Б24.
Порівняння підходів
Iframe-вкладки завантажуються при активації (клік по табу). Для важких вкладок це нормально — користувач не чекає завантаження того, що не відкривав. Але якщо ви вбудовуєте віджет в основну область картки — він завантажується одразу. Кожен REST-запит з iframe — це мережевий round-trip. Використовуйте BX24.callBatch для об'єднання запитів: один batch замість п'яти послідовних викликів. Кастомна вкладка через Placement API розробляється в 2 рази швидше, ніж перевизначення шаблону в коробці, і не вимагає оновлень ядра.
| Елемент картки | Спосіб кастомізації | Терміни |
|---|---|---|
| Перегрупування полів | Налаштування через UI | 1–2 години |
| Обов'язковість за стадією | Налаштування через UI | 30 хвилин |
| Кастомна вкладка із зовнішніми даними | REST Placement | 3–5 днів |
| Умовна логіка полів (хмара) | REST Placement + свій рендер | 5–7 днів |
| Віджет у таймлайні | REST Placement Activity | 2–3 дні |
Етапи та обмеження
Етапи розробки
| Етап | Що робимо | Результат |
|---|---|---|
| Аналітика | Збираємо вимоги до полів, логіки, інтеграцій | ТЗ та прототип картки |
| Проектування | Проектуємо структуру вкладок, віджетів, API-запитів | Архітектурна схема |
| Розробка | Реєструємо placement, пишемо код вкладки/віджета, інтегруємо з 1С або зовнішнім API | Робоча картка в тестовому середовищі |
| Тестування | Перевіряємо коректність даних, умовну логіку, продуктивність | Звіт про тестування |
| Деплой | Встановлюємо застосунок на бойовий портал, налаштовуємо права доступу | Робоча картка в продакшені |
Що входить в роботу
- Розробка технічного завдання та прототипу картки
- Реєстрація placement та налаштування REST-інтеграцій
- Реалізація кастомної вкладки/віджета з тестуванням
- Інтеграція з 1С (CommerceML) або іншими зовнішніми системами
- Документація по API та передача доступів
- Навчання співробітників роботі з новою карткою
- Підтримка 1 місяць після запуску
Обмеження хмарної версії
У хмарі не можна модифікувати стандартні секції картки — тільки додавати нові вкладки та віджети. Не можна прибрати стандартні поля з основного виду (тільки приховати через налаштування картки). Для повного контролю над інтерфейсом картки — коробкова версія з перевизначенням шаблону компонента crm.deal.detail.
Як замовити?
Оцініть свій проєкт за 1 день. Вартість простої кастомної вкладки — від $600. Ми розробляємо кастомні картки CRM під ключ. 10+ років досвіду в Бітрікс24, 50+ успішних проєктів. Економія часу менеджерів після впровадження — до 30%. Замовте розробку кастомної картки CRM — надішлемо попередню оцінку термінів і вартості. Ми спеціалізуємося на бітрікс24 розробці кастомних карток. Отримайте консультацію інженера безкоштовно.