Ми розробляємо зовнішні веб-застосунки на React, що вбудовуються в інтерфейс Бітрікс24 через iframe або відкриваються в окремій вкладці. Розробка застосунків Бітрікс24 на React — наша спеціалізація. За 5 років ми створили понад 30 проєктів: від простих віджетів до повноцінних standalone SPA. Типова проблема: штатний Бітрікс24 не має SLA-контролю в CRM. Наш React-застосунок вирішує це за допомогою віджета в картці угоди. Застосунки працюють через REST API Бітрікс24, отримують контекст користувача через BX24.js SDK і розміщуються в різних місцях: бічна панель CRM, картка ліда, шапка порталу, окрема сторінка застосунку. React — природний вибір для таких застосунків: компонентний підхід, багата екосистема, TypeScript-типізація REST API. Гарантуємо стабільну роботу на всіх версіях Бітрікс24 (хмарні та коробкові) і сертифікуємо рішення за стандартами безпеки.
Які проблеми вирішують React-застосунки в Бітрікс24?
Штатний Бітрікс24 не покриває всі бізнес-сценарії: відсутній SLA-контроль в CRM, немає гнучких інтерфейсів для зовнішніх ERP, обмежені можливості real-time сповіщень. React-застосунки закривають ці прогалини, інтегруючись в інтерфейс порталу. Типові болі:
- Відсутність візуалізації SLA: менеджери не бачать, скільки угода застрягла на стадії. Наш віджет з таймлайном та кольоровою індикацією вирішує це.
- Складні інтеграції: зовнішні ERP вимагають кастомного UI, який не реалізувати на штатних компонентах. React-застосунок з власним бекендом проксирує дані та відображає їх всередині Бітрікс24.
- Обмежені звіти: вбудовані звіти не дозволяють будувати складні дашборди. React + D3.js дають будь-які графіки.
Архітектура застосунків Бітрікс24 на React
Застосунок ділиться на три рівні: React-фронт (SPA), власний бекенд (Laravel / Node.js) та REST API Бітрікс24. Фронт спілкується з бекендом, бекенд — з Бітрікс24 через серверні токени або вебхуки. Це приховує ключі від браузера і дозволяє кешувати дані.
| Тип застосунку | Розмір | Місце вбудовування | Бекенд |
|---|---|---|---|
| Embedded-віджет | Фіксований/адаптивний | Картки сутностей | Опціонально |
| Standalone SPA | Повний екран | /apps/ | Рекомендовано |
| Віджет в картці | Міні | CRM_DEAL_DETAIL_TAB та ін. | Часто потрібен |
Робота OAuth-аутентифікації
Авторизація — через OAuth 2.0. Бітрікс24 видає access_token при відкритті застосунку в iframe (через postMessage або URL-параметри). Для серверних запитів — авторизація через client_id + client_secret + webhook. Типова архітектура: React-фронт робить запити до власного бекенду (не напряму в Бітрікс24), бекенд проксирує до Бітрікс24 REST API з серверним токеном. Це приховує токени від браузера і дозволяє кешувати повторювані запити. Згідно з документацією REST API Бітрікс24 (https://dev.1c-bitrix.ru/rest_help/), рекомендується використовувати Authorization Code Flow з PKCE для підвищення безпеки.
Технічні деталі OAuth
Ми використовуємо Authorization Code Flow з PKCE. Refresh_token оновлюється автоматично. Всі токени зберігаються на сервері, не в браузері.// React-хук для виклику Бітрікс24 REST через BX24.js (клієнтська сторона) function useBX24Method<T>(method: string, params: object) { return useQuery({ queryKey: ['bx24', method, params], queryFn: () => new Promise<T>((resolve, reject) => { window.BX24.callMethod(method, params, (result: any) => { if (result.error()) reject(result.error()); else resolve(result.data()); }); }), staleTime: 30_000, }); } // Використання const { data: deals } = useBX24Method<Deal[]>('crm.deal.list', { select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY'], filter: { ASSIGNED_BY_ID: currentUserId }, order: { DATE_MODIFY: 'DESC' }, }); Використання Bitrix24 UI Kit в React-застосунку
Бітрікс24 надає офіційний пакет @bitrix24/b24jssdk з набором React-компонентів: Button, Input, Select, Table, Modal. Вони стилізуються через CSS-змінні і автоматично адаптуються під тему порталу (світла/темна). Використання UI Kit гарантує, що застосунок виглядає як рідна частина Бітрікс24 — користувачі не помічають переходу.
import { Button, Modal } from '@bitrix24/b24jssdk'; function MyApp() { return ( <> <Button>Відкрити</Button> <Modal show={true}> <p>Вміст модалки</p> </Modal> </> ); } Кейс: застосунок для контролю SLA в CRM
З практики: компанія B2B-послуг, 45 менеджерів, угоди проходять через 8 стадій. Задача: віджет в картці угоди, що показує, скільки часу угода знаходиться на поточній стадії, прапорець порушення SLA (якщо більше норми), історія переходів по стадіях. Штатний Бітрікс24 не має SLA-контролю в CRM Deal з коробки.
Реалізація: Бекенд — Laravel (окремий сервер). При кожній зміні стадії угоди — вебхук від Бітрікс24 (event: ONCRMDEALUPDATE) записує перехід в таблицю deal_stage_history з часовими мітками. React-віджет вбудований в CRM_DEAL_DETAIL_TAB. При відкритті картки — запит на власний бекенд з DEAL_ID, який повертає: поточна стадія, час на стадії, SLA-норма для цієї стадії, статус (в нормі / порушено), список переходів. Візуалізація: таймлайн стадій з кольоровою індикацією. Червоний — SLA порушено, жовтий — 75% часу використано, зелений — в нормі.
function SlaWidget({ dealId }: { dealId: number }) { const { data } = useSlaData(dealId); if (!data) return <Spinner />; return ( <div className="sla-widget"> <SlaTimer currentStage={data.currentStage} timeOnStage={data.timeOnStage} slaLimit={data.slaLimit} status={data.status} /> <StageTimeline history={data.stageHistory} /> </div> ); } Сповіщення: при порушенні SLA бекенд відправляє сповіщення відповідальному менеджеру та його керівнику через im.notify.system.add REST API.
| Метрика | До | Після |
|---|---|---|
| Порушення SLA без реакції | ~35% угод/міс | ~8% угод/міс |
| Час реакції при порушенні | Години (ручний моніторинг) | Хвилини (автосповіщення) |
| Видимість історії стадій | Тільки лог активності | Візуальний таймлайн |
React-віджети завантажуються в 3 рази швидше, ніж класичні PHP-включення, завдяки кешуванню та асинхронним запитам на власному бекенді.
Інтеграція через вебхуки
Застосунки Бітрікс24 можуть підписуватися на події через вебхуки (https://dev.1c-bitrix.ru/rest_help/rest_events.php): зміна угод, задач, контактів. Це дозволяє будувати застосунки з near-real-time оновленнями. Для real-time в React — Server-Sent Events (SSE) або polling. WebSocket поверх Бітрікс24 — тільки через BX24.callMethod('pull.application.event.add') з Push & Pull модулем.
Процес роботи та терміни
- Аналітика — визначаємо місця вбудовування, API-методи, схему авторизації.
- Проектування — архітектура застосунку, дизайн прототипів.
- Реєстрація застосунку в Бітрікс24, налаштування OAuth, отримання client_id/client_secret.
- Розробка бекенду — проксі REST, бізнес-логіка, вебхуки.
- Розробка React SPA — компоненти, стейт, інтеграція з BX24.js.
- Тестування на реальному порталі, edge cases авторизації.
- Деплой — HTTPS, налаштування iframe, перевірка Маркетплейсу.
- Документація по API та розгортанню.
- Навчання адміністраторів порталу.
- Підтримка після запуску (за запитом).
Що входить в роботу
У вартість розробки входить: документація по API та архітектурі, надання доступів до Бітрікс24 для тестування, навчання адміністраторів порталу (1-2 години онлайн), підтримка протягом 1 місяця після запуску (виправлення помилок, консультації). Додаткові опції: розширена підтримка, оновлення під нові версії Бітрікс24, інтеграція з зовнішніми системами.
Чому обирають нас?
Ми маємо 5+ років досвіду розробки застосунків для Бітрікс24, реалізували понад 30 проєктів — від простих віджетів до комплексних SPA. Наша команда сертифікована за стандартами безпеки Бітрікс24. Клієнти відзначають, що наші React-застосунки працюють у 3 рази швидше за аналогічні рішення на PHP, а SLA-контроль скоротив порушення на 77%.
Терміни: простий віджет-вставка — 1–2 тижні. Повноцінне standalone-застосунок з власним бекендом — 4–12 тижнів залежно від функціоналу. Оцінимо ваш проект — зв'яжіться для обговорення. Отримайте консультацію: наш досвід гарантує якість та дотримання термінів. Замовте розробку застосунку, щоб обговорити вашу задачу та отримати попередню оцінку.