Встройка виджета в Битрикс24

Битрикс24 позволяет добавлять кастомные пользовательские интерфейсы в специальные места встройки.

Это могут быть закладки в карточке клиента или задачи, кнопки таймлайна, выпадающие пункты меню и многое другое.

Давайте добавим собственный интерфейс в виде закладки в карточку Контакта CRM.

Откроем раздел «Встроить виджет» инструмента Разработчикам и выберем сценарий «Вывести свои данные в карточку CRM».

Скачаем пример из урока загрузим его на сервер так же, как вы это делали ранее. Как и в случае с обработчиком исходящих событий, для встройки виджета важно заранее знать адрес, по которому эти файлы будут доступны.

В скачанном примере, помимо уже существующих файлов нашего sdk, добавлен файл placement.php с вёрсткой и логикой работы. Чуть позже мы покажем, что именно он будет делать и как.

Вернемся в интерфейс Битрикс24.

Блок Виджеты

Вы видите, что здесь уже подготовлен для нас входящий вебхук, которым мы воспользуемся для получения данных о текущем контакте. Но сейчас нас больше интересует блок «Виджеты»

Указываем название виджета. Поскольку мы встраиваем виджет в виде закладки в карточке контакта, то это будет название закладки.

Указываем URL обработчика. Именно этот URL Битрикс24 будет использовать для показа нашего интерфейса в виде фрейма.

Место вывода виджета у нас уже задано, но мы можем выбрать и другие варианты – один и тот же обработчик может быть использован для встройки в несколько мест.

Пора внимательнее посмотреть на код примера.

Ключевой функционал примера – это файл placement.php.

В этот обработчик, при показе его во фрейме внутри Битрикс24, приходит POST-запрос с данными о том, где именно показывается наш виджет. Выведем содержимое этого запроса при помощи print_r.

Далее пример содержит верстку с таблицей, которая заполняется данными текущего контакта. Для получения этих данных, мы просто обращаемся к REST-методу crm.contact.get, подставив в параметры метода идентификатор контакта, полученный из PLACEMENT_OPTIONS.

Вернемся с интерфейс Битрикс24, перейдем в раздел CRM, контакты и откроем любой доступный нам контакт.

В карточке появилась закладка Local. При переходе на нее показывается наш виджет, встроенный во фрейм.

Мы видим содержимое POST-запроса, которое вывели для отладки при помощи print_r. И видим, как легко мы получили и вывели нужные нам данные.

В текущем примере мы просто выводим полученную информацию. На практике мы могли бы создавать нужный нам пользовательский интерфейс, который смог бы передать эти данных во внешнюю систему, изменить данные контакта, вернуть измененные данные обратно в Битрикс24 и сделать многое другое.