Интерфейсные расширения — это способ добавить приложению видимую часть внутри Битрикс24: виджеты в карточках CRM, кнопки-действия, панели в звонках и каналы контакт-центра. Разберём, какие типы расширений бывают и какими инструментами они реализуются.
Что относят к интерфейсным расширениям
Под «виджетами и расширениями» в экосистеме Битрикс24 обычно понимают всё, что приложение показывает или встраивает в интерфейс. Технически это несколько разных механизмов:
- Встройки placement — страницы приложения в фиксированных точках интерфейса (вкладки, тулбары, меню).
- Виджеты CRM — блоки в карточках сущностей, показывающие данные приложения.
- Расширения контакт-центра — каналы и коннекторы, добавляющие источники обращений.
- Интеграции телефонии — панель в карточке звонка и внешние номера.
Все они опираются на общую основу: iframe с вашим кодом и библиотеку BX24.js для связи с порталом.
BX24.js — основа клиентских расширений
Библиотека BX24.js подключается на страницах приложения и даёт доступ к порталу из браузера. Базовая инициализация:
<script src="//api.bitrix24.com/api/v1/"></script>
BX24.init(function(){ /* SDK готов к работе */ });
Ключевые группы методов для расширений:
| Метод | Для чего |
|---|---|
BX24.callMethod | Вызов REST-методов портала |
BX24.placement.info | Контекст текущей встройки |
BX24.selectCRM | Диалог выбора сущностей CRM |
BX24.openPath | Переход на страницу портала |
BX24.fitWindow | Подгонка размеров окна |
Виджеты и кнопки в CRM
Самый частый сценарий — показать данные приложения прямо в карточке сделки, лида или контакта. Реализуется через placement-вкладки и блоки в таймлайне. Чтобы вставить активное действие (кнопку), используют точки вроде CRM_DEAL_DETAIL_TOOLBAR, а для отдельного экрана — CRM_DEAL_DETAIL_TAB.
Удобный элемент — диалог выбора объектов CRM:
BX24.selectCRM({ entityType:['contact','company'] }, function(res){ /* выбранные сущности */ });
Контакт-центр и телефония
Расширения контакт-центра добавляют в раздел «Контакт-центр» свои каналы и коннекторы — например, интеграцию с мессенджером или внешней системой чатов. Коннектор регистрируется через методы группы imconnector.* и обменивается сообщениями с открытыми линиями.
Для телефонии есть отдельные механизмы: методы группы telephony.* и встройка CALL_CARD, которая показывает панель приложения прямо в карточке звонка. Так реализуют показ карточки клиента из внешней CRM во время входящего вызова.
imconnector.register— регистрация коннектора открытых линий.imconnector.send.messages— отправка сообщений в линию.telephony.externalcall.register— регистрация внешнего звонка.
Реакция на действия пользователя
Расширения становятся «живыми», когда реагируют на события интерфейса. Для этого есть интерфейсные события placement — их слушают через BX24.placement.bindEvent. Например, вкладка приложения может реагировать на сохранение сделки и подтягивать свежие данные.
Серверные события (изменение сделки, добавление контакта) регистрируются через event.bind и приходят вебхуками на бэкенд. Комбинация клиентских и серверных событий даёт отзывчивый интерфейс поверх актуальных данных.
UX-требования и совместимость
Интерфейсные расширения оцениваются пользователем как часть Битрикс24, поэтому важна аккуратность:
- Соблюдайте визуальный стиль портала — вложенный интерфейс не должен выглядеть чужеродно.
- Управляйте размерами окна через
fitWindow, избегайте вложенных скроллов. - Показывайте состояние загрузки и понятные ошибки — фрейм не должен «зависать» пустым.
- Проверяйте работу на разных тарифах: набор доступных мест и методов зависит от редакции.
Итог
Виджеты и интерфейсные расширения — это то, как приложение становится видимой частью Битрикс24. В основе всегда лежит iframe и BX24.js, а конкретные механизмы зависят от задачи: placement для встроек и виджетов CRM, imconnector.* для контакт-центра, telephony.* для звонков. Хорошее расширение отзывчиво реагирует на события и не выбивается из интерфейса портала.
Мы в B2Bsite разрабатываем интерфейсные расширения и интеграции, которые встраиваются в рабочие места сотрудников и работают в связке с внешними системами — от карточек CRM до контакт-центра и телефонии.
Частые вопросы
Чем виджет отличается от встройки placement?
Виджет — это прикладной смысл (блок с данными в карточке), а placement — технический механизм, которым он реализуется. По сути виджет CRM это placement-встройка в карточке.
Как подключить BX24.js?
Подключить скрипт //api.bitrix24.com/api/v1/ на странице приложения и дождаться готовности через BX24.init перед вызовами методов.
Как добавить свой канал в контакт-центр?
Через методы группы imconnector: register регистрирует коннектор открытых линий, а send.messages отправляет сообщения в линию.
Можно ли показать данные во время звонка?
Да, через встройку CALL_CARD и методы telephony.*: панель приложения появляется в карточке звонка и может показать данные клиента из внешней системы.
Как реагировать на действия пользователя в карточке?
Слушать интерфейсные события через BX24.placement.bindEvent на клиенте и серверные события через event.bind на бэкенде.
Как выбрать объекты CRM из приложения?
Вызвать BX24.selectCRM с нужными типами сущностей — портал покажет стандартный диалог выбора и вернёт выбранные объекты.
Почему важна подгонка размеров окна?
Расширение живёт в iframe фиксированного размера. Без fitWindow появляются лишние скроллы и обрезанный контент, что портит впечатление от интерфейса.
Поможем с настройкой и поддержкой Для разработчиков
Поможем с настройкой, доработкой и поддержкой Для разработчиков.