Кастомизация виджета Битрикс24 в 2026: инструкция по настройке и разработке виджетов

Дмитрий Некрасов — Mon, 07 Jul 2025 17:19:34 +0000

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

Что такое виджеты в Битрикс24

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

Отображать информацию из внешних источников
Добавлять новые поля в карточки сделок, контактов и компаний
Интегрироваться с внешними сервисами
Автоматизировать рутинные задачи
Создавать пользовательские отчеты и аналитику

Типы виджетов в Битрикс24

Встраиваемые виджеты

Встраиваемые виджеты размещаются непосредственно в интерфейсе Битрикс24. Они могут быть добавлены в:

Карточки сделок
Карточки контактов и компаний
Карточки лидов
Боковые панели
Страницы приложений

Виджеты для телефонии

Специальные виджеты для интеграции с телефонными системами, которые позволяют:

Отображать информацию о входящих звонках
Создавать сделки на основе звонков
Записывать разговоры
Интегрироваться с внешними АТС

Виджеты для чатов

Виджеты для интеграции с различными мессенджерами и чат-ботами:

Telegram-боты
WhatsApp интеграция
Чат-боты на сайте
Социальные сети

Подготовка к кастомизации виджета

Необходимые знания и инструменты

Для успешной кастомизации виджетов Битрикс24 потребуется:

HTML/CSS — для создания интерфейса виджета
JavaScript — для реализации интерактивности
PHP — для серверной логики (при необходимости)
REST API Битрикс24 — для взаимодействия с данными
Bitrix24 JS SDK — для интеграции с платформой

Настройка среды разработки

Перед началом работы необходимо:

Создать приложение в Битрикс24
Получить ключи API
Настроить локальную среду разработки
Подключить необходимые библиотеки

Создание пользовательского виджета

Шаг 1: Регистрация приложения

Для создания виджета необходимо зарегистрировать приложение в Битрикс24:

Перейдите в раздел «Приложения» → «Разработчикам»
Нажмите «Создать приложение»
Заполните основную информацию о приложении
Укажите права доступа
Получите client_id и client_secret

Шаг 2: Создание файла манифеста

Создайте файл manifest.json с описанием виджета:

{
"name": "Мой кастомный виджет",
"version": "1.0.0",
"description": "Описание функциональности виджета",
"widgets": {
"crm_deal_detail": {
"title": "Название виджета",
"description": "Описание виджета",
"size": {"width": 300, "height": 200},
"color": "#3498db"
}
}
}

Шаг 3: Разработка интерфейса виджета

Создайте HTML-структуру виджета:





Мой виджет




Заголовок виджета

Интеграция с REST API Битрикс24

Получение данных из CRM

Для получения данных из Битрикс24 используйте REST API:

// Получение информации о сделке
BX24.callMethod('crm.deal.get', {
id: dealId
}, function(result) {
if (result.error()) {
console.error(result.error());
} else {
var deal = result.data();
displayDealInfo(deal);
}
});

Обновление данных в CRM

Пример обновления сделки через виджет:

// Обновление сделки
BX24.callMethod('crm.deal.update', {
id: dealId,
fields: {
'STAGE_ID': 'NEW',
'COMMENTS': 'Обновлено через виджет'
}
}, function(result) {
if (result.error()) {
console.error(result.error());
} else {
console.log('Сделка обновлена');
}
});

Настройка пользовательского интерфейса

Стилизация виджета

Создайте CSS-файл для стилизации виджета:

.widget-container {
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #ffffff;
font-family: Arial, sans-serif;
}
.widget-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.widget-button {
background-color: #3498db;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
.widget-button:hover {
background-color: #2980b9;
}

Адаптивность виджета

Обеспечьте корректное отображение виджета на различных устройствах:

@media (max-width: 768px) {
.widget-container {
padding: 10px;
font-size: 14px;
}
.widget-button {
padding: 6px 12px;
font-size: 12px;
}
}

Добавление интерактивности

Обработка событий

Реализуйте обработку пользовательских действий:

// Инициализация виджета
BX24.init(function() {
// Получение ID текущей сделки
var dealId = BX24.placement.info().entityId;
// Загрузка данных
loadWidgetData(dealId);
// Обработка нажатия кнопки
document.getElementById('save-button').addEventListener('click', function() {
saveWidgetData(dealId);
});
});
function loadWidgetData(dealId) {
// Загрузка данных виджета
BX24.callMethod('crm.deal.get', {
id: dealId
}, function(result) {
if (result.error()) {
console.error(result.error());
} else {
updateWidgetInterface(result.data());
}
});
}
function saveWidgetData(dealId) {
// Сохранение данных виджета
var widgetData = collectWidgetData();
BX24.callMethod('crm.deal.update', {
id: dealId,
fields: widgetData
}, function(result) {
if (result.error()) {
console.error(result.error());
} else {
showSuccessMessage('Данные сохранены');
}
});
}

Работа с пользовательскими полями

Создание пользовательских полей

Добавьте пользовательские поля для хранения данных виджета:

// Создание пользовательского поля
BX24.callMethod('crm.deal.userfield.add', {
fields: {
'FIELD_NAME': 'UF_WIDGET_DATA',
'USER_TYPE_ID': 'string',
'EDIT_FORM_LABEL': 'Данные виджета',
'LIST_COLUMN_LABEL': 'Данные виджета'
}
}, function(result) {
if (result.error()) {
console.error(result.error());
} else {
console.log('Поле создано');
}
});

Работа с данными пользовательских полей

Чтение и запись данных в пользовательские поля:

// Чтение данных из пользовательского поля
function getWidgetData(dealId) {
BX24.callMethod('crm.deal.get', {
id: dealId
}, function(result) {
if (result.error()) {
console.error(result.error());
} else {
var deal = result.data();
var widgetData = deal.UF_WIDGET_DATA;
processWidgetData(widgetData);
}
});
}
// Запись данных в пользовательское поле
function setWidgetData(dealId, data) {
BX24.callMethod('crm.deal.update', {
id: dealId,
fields: {
'UF_WIDGET_DATA': JSON.stringify(data)
}
}, function(result) {
if (result.error()) {
console.error(result.error());
} else {
console.log('Данные сохранены');
}
});
}

Интеграция с внешними сервисами

Подключение к внешним API

Для интеграции с внешними сервисами используйте AJAX-запросы:

// Запрос к внешнему API
function callExternalAPI(data) {
return fetch('/api/external-service', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + getAPIToken()
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
return data;
})
.catch(error => {
console.error('Ошибка API:', error);
throw error;
});
}
// Использование во виджете
function processExternalData(dealId) {
var requestData = {
dealId: dealId,
action: 'get_data'
};
callExternalAPI(requestData)
.then(data => {
updateWidgetWithExternalData(data);
})
.catch(error => {
showErrorMessage('Ошибка получения данных');
});
}

Обработка ошибок и отладка

Система логирования

Реализуйте систему логирования для отслеживания ошибок:

// Система логирования
var Logger = {
log: function(message, level = 'info') {
var timestamp = new Date().toISOString();
var logEntry = {
timestamp: timestamp,
level: level,
message: message
};
console.log(`[${timestamp}] ${level.toUpperCase()}: ${message}`);
// Отправка логов на сервер (опционально)
this.sendLogToServer(logEntry);
},
error: function(message, error) {
this.log(`${message}: ${error.message}`, 'error');
},
sendLogToServer: function(logEntry) {
// Отправка логов на сервер для анализа
fetch('/api/logs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(logEntry)
}).catch(err => {
console.error('Ошибка отправки логов:', err);
});
}
};

Валидация данных

Добавьте валидацию входных данных:

// Валидация данных виджета
function validateWidgetData(data) {
var errors = [];
if (!data.title || data.title.trim() === '') {
errors.push('Заголовок обязателен для заполнения');
}
if (data.amount && isNaN(data.amount)) {
errors.push('Сумма должна быть числом');
}
if (data.email && !isValidEmail(data.email)) {
errors.push('Некорректный email адрес');
}
return errors;
}
function isValidEmail(email) {
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
// Использование валидации
function saveWidgetData(dealId) {
var data = collectWidgetData();
var errors = validateWidgetData(data);
if (errors.length > 0) {
showErrorMessage('Ошибки валидации: ' + errors.join(', '));
return;
}
// Сохранение данных
updateDealData(dealId, data);
}

Оптимизация производительности

Кэширование данных

Реализуйте кэширование для улучшения производительности:

// Система кэширования
var Cache = {
storage: {},
ttl: 5 * 60 * 1000, // 5 минут
set: function(key, value) {
this.storage[key] = {
value: value,
timestamp: Date.now()
};
},
get: function(key) {
var item = this.storage[key];
if (!item) {
return null;
}
if (Date.now() - item.timestamp > this.ttl) {
delete this.storage[key];
return null;
}
return item.value;
},
clear: function() {
this.storage = {};
}
};
// Использование кэша
function getDealData(dealId) {
var cacheKey = 'deal_' + dealId;
var cachedData = Cache.get(cacheKey);
if (cachedData) {
return Promise.resolve(cachedData);
}
return new Promise((resolve, reject) => {
BX24.callMethod('crm.deal.get', {
id: dealId
}, function(result) {
if (result.error()) {
reject(result.error());
} else {
var data = result.data();
Cache.set(cacheKey, data);
resolve(data);
}
});
});
}

Тестирование виджета

Модульное тестирование

Создайте тесты для проверки функциональности виджета:

// Тестирование функций виджета
function runTests() {
console.log('Запуск тестов...');
// Тест валидации
testValidation();
// Тест кэширования
testCaching();
// Тест API интеграции
testAPIIntegration();
console.log('Тестирование завершено');
}
function testValidation() {
console.log('Тестирование валидации...');
var validData = {
title: 'Тестовая сделка',
amount: 1000,
email: 'test@example.com'
};
var errors = validateWidgetData(validData);
console.assert(errors.length === 0, 'Валидные данные должны проходить проверку');
var invalidData = {
title: '',
amount: 'не число',
email: 'неправильный email'
};
errors = validateWidgetData(invalidData);
console.assert(errors.length > 0, 'Невалидные данные должны выдавать ошибки');
}
function testCaching() {
console.log('Тестирование кэширования...');
Cache.clear();
Cache.set('test', 'value');
var value = Cache.get('test');
console.assert(value === 'value', 'Кэш должен возвращать сохраненные данные');
}

Развертывание и публикация

Подготовка к развертыванию

Перед публикацией виджета выполните следующие действия:

Проведите полное тестирование функциональности
Оптимизируйте код и ресурсы
Подготовьте документацию
Создайте архив с файлами приложения

Загрузка виджета

Для загрузки виджета в Битрикс24:

Перейдите в раздел «Приложения» → «Мои приложения»
Выберите созданное приложение
Загрузите архив с файлами
Настройте параметры размещения
Активируйте виджет

Мониторинг и обслуживание

Отслеживание использования

Реализуйте систему мониторинга для отслеживания использования виджета:

// Аналитика использования
var Analytics = {
track: function(event, data) {
var analyticsData = {
event: event,
data: data,
timestamp: Date.now(),
userId: BX24.placement.info().userId
};
this.sendAnalytics(analyticsData);
},
sendAnalytics: function(data) {
fetch('/api/analytics', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).catch(err => {
console.error('Ошибка отправки аналитики:', err);
});
}
};
// Использование аналитики
function trackWidgetUsage(action) {
Analytics.track('widget_usage', {
action: action,
widgetId: 'my-custom-widget'
});
}

Примеры практических виджетов

Виджет калькулятора комиссии

Пример виджета для расчета комиссии по сделке:

// Виджет калькулятора комиссии
var CommissionCalculator = {
init: function() {
this.createInterface();
this.bindEvents();
this.loadDealData();
},
createInterface: function() {
var html = `

Калькулятор комиссии

Сумма сделки:



Процент комиссии:



Комиссия:




`;
document.body.innerHTML = html;
},
bindEvents: function() {
document.getElementById('commission-rate').addEventListener('input', () => {
this.calculateCommission();
});
document.getElementById('save-commission').addEventListener('click', () => {
this.saveCommission();
});
},
calculateCommission: function() {
var amount = parseFloat(document.getElementById('deal-amount').value) || 0;
var rate = parseFloat(document.getElementById('commission-rate').value) || 0;
var commission = (amount * rate) / 100;
document.getElementById('commission-amount').value = commission.toFixed(2);
},
saveCommission: function() {
var commission = document.getElementById('commission-amount').value;
var dealId = BX24.placement.info().entityId;
BX24.callMethod('crm.deal.update', {
id: dealId,
fields: {
'UF_COMMISSION': commission
}
}, function(result) {
if (result.error()) {
console.error(result.error());
} else {
BX24.fitWindow();
console.log('Комиссия сохранена');
}
});
}
};

Безопасность виджетов

Валидация и санитизация данных

Обеспечьте безопасность виджета через валидацию данных:

// Безопасная обработка данных
var Security = {
sanitizeInput: function(input) {
if (typeof input !== 'string') {
return input;
}
return input
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/\//g, '/');
},
validatePermissions: function(userId, action) {
// Проверка прав доступа пользователя
return BX24.callMethod('user.current', {}, function(result) {
if (result.error()) {
return false;
}
var user = result.data();
return user.IS_ADMIN || user.UF_DEPARTMENT.includes('SALES');
});
}
};

Заключение

Кастомизация виджетов в Битрикс24 открывает широкие возможности для адаптации CRM-системы под уникальные потребности бизнеса. Правильно разработанные виджеты способны значительно повысить эффективность работы команды, автоматизировать рутинные процессы и улучшить пользовательский опыт.

Ключевые моменты успешной кастомизации:

Тщательное планирование функциональности
Соблюдение принципов безопасности
Оптимизация производительности
Адаптивность интерфейса
Комплексное тестирование

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

Сообщение Кастомизация виджета Битрикс24 в 2026: инструкция по настройке и разработке виджетов появились сначала на Битрикс24.

Архивы разработка виджетов - Битрикс24