Розробка вбудованих додатків Бітрікс24 під ключ

Уявіть: ви відкриваєте картку угоди в Бітрікс24, а там — порожня вкладка. Дані з вашої WMS не підтягуються, менеджеру доводиться перемикатися між системами. Це знижує швидкість обробки замовлень на 40%. Для логістичної компанії ми вирішили цю проблему: розробили додаток, який вбудовується в картку угоди і в реальному часі підвантажує статус доставки з WMS. Результат — скорочення часу на обробку замовлення з 15 до 3 хвилин. Економія склала сотні тисяч гривень на рік.

Чому вбудований додаток Бітрікс24 швидший за віджет?

Стандартні віджети працюють в ізоляції: вони відображають дані, але не можуть змінювати інтерфейс або підписуватися на події. Вбудовані додатки знімають ці обмеження. Вони дають двосторонню взаємодію з CRM: читають і оновлюють поля картки без перезавантаження, викликають діалоги та сповіщення, синхронізуються із зовнішніми системами.

Згідно з документацією BX24 SDK, вбудовані додатки (Embedded Apps) — це додатки з типом IFRAME, які реєструють плейсменти і працюють всередині інтерфейсу порталу. На відміну від зовнішніх (серверних) додатків, вони мають прямий доступ до JS SDK BX24 і можуть:

• читати та змінювати поля відкритої картки CRM у реальному часі без перезавантаження
• викликати діалоги, слайдери та сповіщення Бітрікс24 (BX24.openPath, BX24.showMessagePopup)
• підписуватися на події інтерфейсу через BX24.placement.call('getInterface', ...)

Як вбудований додаток прискорює роботу з CRM?

Найцінніша можливість — читання та запис полів картки без перезавантаження сторінки. Підписка на оновлення сутності та програмна зміна поля виконуються через BX24.placement:

// Підписка на оновлення сутності
BX24.placement.call('bindEvent', {
    event: 'onCrmBindEntityUpdated'
}, (eventData) => {
    const entityId = eventData.ENTITY_ID;
    refreshWidgetData(entityId);
});

// Зміна поля візуально
BX24.placement.call('setFieldValue', {
    FIELD: 'UF_CRM_CUSTOM_STATUS',
    VALUE: 'shipped'
}, () => {
    console.log('Поле оновлено в інтерфейсі');
});

Повний список подій залежить від типу картки (CRM_DEAL, CRM_LEAD та ін.) — у кожної своя документація.

Отримання інтерфейсу плейсменту — розробка вбудованих додатків

Для CRM_DEAL_DETAIL_TAB можна отримати інтерфейс поточного плейсменту:

BX24.placement.call('getInterface', {}, (interfaceData) => {
    /*
    interfaceData містить:
    {
        ID: "42",           // ID угоди
        ENTITY_TYPE: "CRM_TYPE_DEAL",
        FIELDS: { ... },   // Поточні значення полів
        BUTTONS: [ ... ]   // Доступні кнопки
    }
    */
});

Як працює авторизація та життєвий цикл?

При відкритті вкладки з додатком Бітрікс24 формує iframe-запит до вашого handler URL з параметрами:

GET https://your-app.com/handler?
    DOMAIN=company.bitrix24.ua&
    PROTOCOL=1&
    AUTH_ID=abc123&
    AUTH_EXPIRES=3600&
    REFRESH_ID=xyz789&
    member_id=a1b2c3&
    PLACEMENT=CRM_DEAL_DETAIL_TAB&
    PLACEMENT_OPTIONS={"ID":"42","SECTION":""}

AUTH_ID живе 1 годину. Для довготривалих сесій (користувач залишив вкладку відкритою) потрібен refresh:

BX24.init(() => {
    // Автоматично оновлює токен, якщо він закінчився
    BX24.getAuth((auth) => {
        // auth.access_token — актуальний токен
        fetch('/api/data', {
            headers: { 'X-Bitrix-Auth': auth.access_token }
        });
    });
});

На вашому сервері перевіряйте токен через REST-метод rest/profile.

Порівняння вбудованого додатку та звичайного віджета

Вбудований додаток працює в 10 разів швидше, оскільки використовує JS SDK для прямого керування елементами CRM. Він також може підписуватися на події в реальному часі, що важливо для синхронізації із зовнішніми системами.

Як відбувається розробка вбудованого додатку: 5 етапів

1. Аналіз — виявляємо, які плейсменти потрібні, які зовнішні API будуть задіяні, фіксуємо терміни.
2. Проектування — створюємо схему авторизації, визначаємо структуру handler та серверної частини.
3. Реалізація — пишемо клієнтський код на JS (React/Vue/Vanilla) з BX24 SDK, серверний компонент на Express/Fastify.
4. Тестування — налагодження на dev-порталі через ngrok з mock-параметрами, перевірка refresh токенів.
5. Деплой та підтримка — розгортаємо на production, підключаємо моніторинг, навчаємо співробітників.

Структура проекту

Мінімальна структура:

• /public/index.html — точка входу (handler URL)
• /public/app.js — клієнтський код з BX24 SDK
• /src/api/bitrix.js — обгортка над BX24.callMethod
• /src/api/external.js — запити до зовнішнього API
• /src/components/DealTab.jsx — React/Vue/Vanilla
• server.js — Express/Fastify для OAuth callback та API proxy

Серверний компонент необхідний, тому що OAuth callback (/oauth/callback) повинен оброблятися на сервері, client_secret не можна виносити в браузер, проксіювання запитів до зовнішніх API уникає CORS-проблем.

Що входить у розробку вбудованого додатку

Терміни розробки

Критичний момент: перед стартом узгодьте список плейсментів — додавання нового після публікації тиражного додатку вимагає повторної модерації.

Типові помилки та як їх уникнути

• Налагодження всередині iframe: використовуйте пряме відкриття handler URL з mock-параметрами.
• Забувають про refresh токенів: завжди реалізуйте автоматичне оновлення через BX24.init().
• Не враховують CORS: проксіюйте запити до зовнішніх API через свій сервер.

Чому варто замовити розробку вбудованого додатку у нас

Ми на ринку понад 7 років, розробили 50+ вбудованих додатків. Гарантуємо якість: кожен проект проходить триетапне тестування на dev-порталі з ngrok. Середній проект окупається за 3-6 місяців за рахунок скорочення операційних витрат. Зв'яжіться з нами для консультації та оцінки вашого проекту. Замовте розробку вбудованого додатку, який ідеально впишеться в бізнес-процеси вашої компанії. Отримайте попередню оцінку термінів та бюджету — ми завжди розраховуємо вартість індивідуально.

Детальніше про OAuth 2.0 читайте на Wikipedia. Документація по BX24 SDK — dev.1c-bitrix.ru.

Розробка та налаштування модулів 1С-Бітрікс

Головна пастка Бітрікса — init.php. Засунули туди обробник OnBeforeIBlockElementUpdate, потім ще один — через рік файл на 2000 рядків, і при кожному хіті вся ця купа виконується. Ми переносимо бізнес-логіку в повноцінні модулі з D7 ORM, власними таблицями та адміністративним інтерфейсом. Модуль можна вимкнути, перенести на інший проєкт, покрити тестами — з init.php нічого з цього не вийде. Досвід команди — 10+ років у Бітрікс, сертифіковані спеціалісти, гарантія на код 6 місяців. Замовте консультацію — розповімо, як перевести legacy-код у модульну архітектуру.

Як модульна архітектура підвищує продуктивність?

Чому init.php — найгірше місце для бізнес-логіки?

Init.php не підтримує автозавантаження класів, не має ізольованого простору імен, не піддається модульному тестуванню і не вимикається без правки самого файлу. Кожен обробник, написаний там, спрацьовує на кожному запиті, навіть якщо він не потрібен. У модулі ви реєструєте обробника через EventManager, і він виконується тільки при настанні події. Різниця в продуктивності — до 3 разів при 10+ обробниках.

Стандартні модулі: типові проблеми та рішення

Інформаційні блоки. Архітектура ІБ — перше, що ми рев'юїмо на будь-якому проєкті. Класична помилка: один інфоблок каталогу з 80 властивостями, з яких 30 — множинні. Таблиця b_iblock_element_property роздувається до мільйонів рядків, CIBlockElement::GetList на фільтрації за трьома властивостями йде в повне сканування. Переносимо довідники в Highload-блоки, прибираємо множинні властивості де можна, проєктуємо структуру з прицілом на те, що каталог виросте в 5 разів.

Інтернет-магазин (sale). Бізнес-правила кошика — окрема історія. Налаштовуємо пріоритети знижок, щоб дві акції не дали 60% замість 30%, підключаємо платіжні обробники, прописуємо кастомну валідацію через OnSaleOrderBeforeSaved.

Пошук. Вбудований модуль search з морфологією працює до 10–15 тисяч елементів. Далі — Elasticsearch. Налаштовуємо через API модуля пошуку Бітрікс, індексуємо через CSearchFullText або кастомні індексатори.

Highload-блоки для довідників, логів, користувацьких даних — замість роздутих ІБ. Прямі запити через Bitrix\Highloadblock\HighloadBlockTable, власні таблиці замість EAV-структури стандартних інфоблоків. Мільйон записів — без деградації.

Поштові події. Налаштування — не лише шаблони в b_event_message. Головне — SPF, DKIM, DMARC на DNS, інакше транзакційні листи летять у спам. Перевіряємо доставність, налаштовуємо bounce-обробку.

Проектування інфоблоків для продуктивності

Використовуємо Highload-блоки для довідкових даних (кольори, розміри, виробники), які не беруть участі в складних вибірках. Для торгових пропозицій — окремий інфоблок з прив'язкою через IBLOCK_ELEMENT_PROPERTY. Увімкнемо INDEX_PROPERTY для часто фільтрованих властивостей. Кешування теговане: при зміні елемента скидається лише пов'язаний кеш. Highload-блоки обробляють до 10 разів швидше, ніж інфоблоки з множинними властивостями, на об'ємах від 100 000 записів.

Розробка кастомних модулів

Кожен модуль — за структурою /local/modules/vendor.modulename/:

• install/index.php — клас встановлення, створення таблиць через $DB->RunSQLBatch()
• lib/ — класи D7 ORM, спадкоємці Bitrix\Main\ORM\Data\DataManager
• admin/ — адміністративні сторінки через CAdminList, CAdminForm
• include.php — автозавантаження, реєстрація обробників через EventManager::getInstance()->registerEventHandler()
• REST API endpoints через \Bitrix\Rest\RestManager

Модуль реєструється в системі, з'являється у списку «Встановлені рішення», має свої налаштування в /bitrix/admin/settings.php?mid=vendor.modulename. Його можна вмикати, вимикати, оновлювати через UpdateSystem або свій механізм міграцій.

Приклади реалізованих завдань:

• Управління акціями — візуальний конструктор умов через CAdminCalendar, таймери через агенти (CAgent::AddAgent), аналітика ефективності у зв'язці з модулем sale
• Калькулятор вартості — React-віджет на фронті, REST API у модулі, формули зберігаються в Highload-блоці
• Система бронювання — real-time календар, блокування через $DB->StartTransaction() / $DB->Commit() при одночасних запитах, синхронізація з channel manager через webhook

Компоненти та композитний кеш

Кастомізація компонентів — через result_modifier.php і component_epilog.php, не через правку template.php стандартного шаблону. Так ядро оновлюється безболісно.

Композитний кеш (технологія «Композитний сайт») — сервер віддає готовий HTML, минаючи PHP-роутинг. Динамічні зони (кошик, авторизація) підвантажуються через CBitrixComponent::setFrameMode(true) та AJAX. TTFB падає до 30–50 мс. Але є нюанси: не всі компоненти сумісні, $APPLICATION->ShowPanel() ламає композит, потрібна акуратна розмітка <div id="bx-composite-...">.

Маркетплейс: аудит перед встановленням

Перед встановленням модуля з маркетплейсу — обов'язковий аудит. Перевіряємо: SQL-запити без підготовлених виразів (привіт, SQL-ін'єкції), пряме звернення до $_REQUEST без фільтрації, використання застарілого API старого ядра замість D7, конфлікти з модулем композитного кешування. Модуль без оновлень більше року та з парою десятків встановлень — швидше за все, проблема на найближчому оновленні PHP. Типовий випадок: модуль викликає CIBlockElement::GetList з нескинутим кешем — сайт падає при 5000 елементів.

Міграція на D7

При оновленні PHP або переході на нову редакцію — рефакторинг застарілих викликів:

• CIBlockElement::GetList() → Bitrix\Iblock\Elements\ElementTable::getList()
• CSaleOrder::GetList() → Bitrix\Sale\Order::getList()
• CModule::IncludeModule() → Bitrix\Main\Loader::includeModule() Тестування на staging, відкат через git при проблемах.

Згідно з офіційною документацією 1С-Бітрікс, D7 ORM є рекомендованим засобом для роботи з даними, забезпечуючи безпеку типів і автогенерацію запитів.

Порівняння підходів: Init.php vs Модуль

Вартість та склад розробки модулів

Що входить у розробку модуля?

• Технічне завдання та архітектурна схема
• Код з дотриманням PSR-4 та код-стайлу Бітрікс
• Unit-тести (PHPUnit) на бізнес-логіку
• Інтеграційні тести на події та REST API
• Документація з встановлення, налаштування та API
• Передача доступів до репозиторію та документації
• Навчання адміністраторів роботі з модулем
• Гарантійна підтримка 6 місяців

Орієнтовні терміни та складність:

Вартість розраховується індивідуально — зв'яжіться з нами для оцінки вашого проєкту.

Тестування модулів

Unit-тести через PHPUnit покривають бізнес-логіку: розрахунок знижок, валідацію, формування документів. Моки для Bitrix\Main\Application::getConnection() дозволяють тестам не залежати від БД. Інтеграційні тести перевіряють обробники подій на реальній базі — OnAfterIBlockElementAdd, OnSaleOrderSaved та інші. REST API endpoints тестуємо через curl або PHPUnit HTTP-клієнт. Критично для модулів, що працюють з b_sale_order, b_catalog_price — де помилка коштує грошей.

Сумісність перевіряється на PHP 7.4, 8.0, 8.1, 8.2 та редакціях: Стандарт, Малий бізнес, Бізнес. Перевіряємо конфлікти з популярними модулями маркетплейсу — вони люблять перехоплювати ті самі події. Навантажувальне тестування: заміри на 10K, 100K, 1M записів, профілювання через Xdebug на предмет витоків пам'яті та N+1 запитів.

Приклади з практики

Модуль акцій для мережі електроніки. Штатні знижки модуля sale не покривали сценарії «2+1», подарунок при покупці від суми, комбіновані умови. Зібрали візуальний конструктор: маркетолог створює правила через drag-and-drop, без тікетів у розробку. Календар акцій, автодеактивація через агенти, аналітика у прив'язці до b_sale_order — конверсія, середній чек, кількість застосувань. Час запуску нової акції впав з двох днів до півгодини.

Калькулятор для будівельників. Параметри (площа, матеріали, поверховість) → формула → попередній кошторис → заявка в CRM через CRest::call('crm.lead.add'). Регіональні коефіцієнти та сезонні націнки — з Highload-блоку, ціни матеріалів — з обміну з 1С. Кількість цільових заявок зросла на третину: клієнти бачать розбивку за статтями до дзвінка менеджеру.

Бронювання для мережі готелів. Real-time доступність через AJAX-запити до кастомної таблиці vendor_booking_slots, розрахунок тарифів за сезоном, синхронізація з Booking.com через channel manager API. Блокування номера при одночасному бронюванні — через SELECT ... FOR UPDATE у транзакції. Таймзони обробляються через \DateTimeZone — гість із Владивостока та менеджер із Москви бачать одну картину.

Оцінимо проєкт за 1 день. Пишіть — розповімо, що входить у розробку під ключ. Зв'яжіться з нами для консультації за вашим проєктом. Замовте розробку модуля під ключ — отримайте готове рішення з документацією та підтримкою.