Разработка встраиваемых приложений Битрикс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.ru& 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.