Мы разрабатываем внешние веб-приложения на React, встраиваемые в интерфейс Битрикс24 через iframe или открываемые в отдельной вкладке. Разработка приложений Bitrix24 на 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, рекомендуется использовать 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-включения, за счёт кэширования и асинхронных запросов на собственном бэкенде. Снижение затрат на мониторинг SLA — до 70%. Экономия составила около $140–200./мес.
Интеграция через вебхуки
Приложения Битрикс24 могут подписываться на события через вебхуки: изменение сделок, задач, контактов. Это позволяет строить приложения с 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 и развёртыванию.
- Обучение администраторов портала.
- Поддержка после запуска (по запросу).
Сроки: простой виджет-вставка — 1–2 недели. Полноценное standalone-приложение с собственным бэкендом — 4–12 недель в зависимости от функционала. Оценим ваш проект — свяжитесь для обсуждения. Получите консультацию: наш опыт гарантирует качество и соблюдение сроков. Закажите разработку приложения, чтобы обсудить вашу задачу и получить предварительную оценку.