Разработка Vue.js-виджетов для Битрикс24 под ключ

Битрикс24 — открытая платформа с мощным REST API и механизмом встраивания кастомных интерфейсов через виджеты. Vue.js-виджет для Битрикс24 — это полноценное SPA, которое живёт внутри CRM: добавляет вкладки в карточки сделок, кастомные дашборды, интеграции с внешними сервисами. Мы разрабатываем такие виджеты под ключ — от прототипа до внедрения. Наша экспертиза — более 7 лет в Битрикс24 и Vue.js, более 50 реализованных проектов. Гарантируем стабильную работу и соответствие требованиям безопасности. В отличие от стандартной настройки, виджеты реализуют любую бизнес-логику без изменения ядра платформы. Менеджеры получают удобный интерфейс прямо в CRM, не переключаясь между системами.

Одна из частых проблем — ручной расчёт стоимости услуг, интеграция с внешними API, кастомизация воронки. Мы решаем это с помощью Vue.js-виджетов, которые встраиваются в карточки сделок, лидов, контактов. Vue.js-виджет работает в 2 раза быстрее аналогичного решения на jQuery за счёт реактивного рендеринга. Менеджеры экономят 15 минут на каждой сделке — это снижает операционные затраты на 20%. В одном проекте автоматизация расчёта доставки позволила сэкономить 25 000 ₽ в месяц, исключив ошибки менеджеров. Ниже рассмотрим типы встраивания, архитектуру и реальный кейс из практики.

Какие проблемы решают Vue.js-виджеты

Многие компании сталкиваются с тем, что стандартный Битрикс24 не закрывает все бизнес-процессы. Типичные ситуации:

• Менеджеры вручную считают стоимость доставки или услуги, используя Excel или сторонние калькуляторы. Ошибки и расхождения в суммах сделок неизбежны.
• Нужно интегрировать CRM с внешним API (например, тарифы перевозчика, каталог поставщика), но нет готового модуля в Маркетплейсе.
• Требуется отображать кастомные данные прямо в карточке сделки (история платежей, статусы заказов, расчёт рентабельности).

Vue.js-виджеты решают эти задачи без изменения ядра. Они работают поверх платформы, используя iframe и REST API, и могут быть развернуты как для одного портала, так и через Маркетплейс. По сравнению с самописными решениями на jQuery, реактивный интерфейс Vue.js обеспечивает плавное обновление данных без перезагрузки страницы — это ускоряет работу менеджера на 30%. Подробнее о технологии Vue.js можно прочитать на Wikipedia, а про REST API — в соответствующей статье Wikipedia.

Как разрабатываются Vue.js-виджеты для Битрикс24

Процесс включает несколько этапов:

1. Аналитика: определяем точки встраивания, требуемые данные, внешние интеграции.
2. Проектирование: архитектура Vue-приложения, API-ручки, хранение токенов.
3. Разработка: создание компонентов, подключение BX24 SDK, реализация логики.
4. Тестирование: на тестовом портале, проверка прав доступа, обработка ошибок.
5. Деплой: размещение статики на HTTPS-сервере, регистрация приложения в Битрикс24.

Технические детали: используем Vue 3 + Composition API, Pinia для состояния, Vite для сборки. Взаимодействие с Битрикс24 через BX24.js — официальный JavaScript SDK.

Пример инициализации:

import { createApp } from 'vue';
import App from './App.vue';

document.addEventListener('DOMContentLoaded', () => {
    BX24.init(() => {
        const app = createApp(App);
        app.provide('bx24', BX24);
        app.mount('#app');
    });
});

Получение контекста из карточки CRM:

const bx24 = inject('bx24');
const placement = bx24.placement.info();
const dealId = placement.options.ID;
bx24.callMethod('crm.deal.get', { id: dealId }, (result) => {
    dealData.value = result.data();
});

Для множественных запросов используем callBatch:

bx24.callBatch({
    deal: ['crm.deal.get', { id: dealId }],
    contacts: ['crm.deal.contact.items.get', { id: dealId }],
    products: ['crm.deal.productrows.get', { id: dealId }],
}, (results) => {
    deal.value = results.deal.data();
    contacts.value = results.contacts.data();
    products.value = results.products.data();
});

Когда стоит использовать Vue.js-виджет вместо штатного решения

Если бизнес-процесс требует уникального интерфейса или интеграции с внешним сервисом, виджет окупается за 2–3 месяца. Например, калькулятор стоимости в карточке сделки снижает количество ошибок до нуля и экономит 15 минут на каждой сделке. При типичной загрузке менеджера это даёт экономию до 30 000 ₽ в месяц на одного сотрудника. Для массовых операций (отправка уведомлений, обновление статусов) виджет контекстного меню обрабатывает до 1000 записей за минуту.

Типы встраивания

Каждый тип регистрируется через rest_app_event при установке приложения. Конфигурация хранится на стороне Битрикс24, код виджета — на внешнем сервере.

Кейс из нашей практики: виджет расчёта доставки

Наш клиент — транспортная компания с Битрикс24 (облако). Задача: менеджеры вручную считали стоимость доставки по таблицам, делали ошибки. Мы разработали Vue-виджет в виде вкладки в карточке сделки.

Процесс работы виджета:

1. Виджет получает ID сделки через BX24.placement.info().
2. Через REST API загружает поля: адрес доставки, вес, тип груза.
3. Отправляет запрос к API расчёта тарифов (Laravel).
4. Отображает таблицу стоимости по видам транспорта (авто, авиа, ЖД).
5. Менеджер выбирает вариант, кликает «Сохранить» — стоимость записывается в сделку.

Стек: Vue 3, BX24 SDK, Axios, Vite, Pinia. Деплой статики на S3 + CloudFront. Разработка заняла 10 рабочих дней.

Результат: ошибки в суммах сделок ушли, менеджеры экономят 15 минут на каждую сделку. Срок окупаемости виджета — 2 месяца. Закажите разработку Vue.js-виджета для вашей CRM — оценим ваш проект на бесплатной консультации.

Процесс работы и сроки

Сроки ориентировочные: простой виджет (одна вкладка, чтение/запись данных) — от 8 до 15 рабочих дней. Сложный виджет (собственный API, интеграция с внешними системами) — от 15 до 30 рабочих дней. Стоимость рассчитывается индивидуально после анализа задачи.

Что входит в работу

• Аналитика и проектирование архитектуры
• Разработка Vue.js-приложения с использованием BX24 SDK
• Интеграция с REST API Битрикс24
• Настройка CORS и HTTPS для статики
• Регистрация приложения и настройка встраивания
• Тестирование на тестовом портале
• Документация для администраторов
• Обучение пользователей (1 час)
• Поддержка в течение 1 месяца после сдачи

Типичные ошибки при разработке виджетов

Учитываем эти нюансы на старте, чтобы сэкономить ваше время.

Почему выбирают нас

• Сертифицированные специалисты «1С-Битрикс: Разработчик».
• Более 7 лет опыта с платформой, 50+ реализованных проектов.
• Гарантируем соблюдение сроков и безопасность данных (верификация запросов, CORS, HTTPS).
• Предоставляем сопровождение после сдачи: исправление ошибок, доработки, консультации.
• 90% проектов сдаются в срок, средняя оценка по отзывам — 4.9/5.

Свяжитесь с нами — получите консультацию бесплатно. Закажите разработку Vue.js-виджета и автоматизируйте рутинные процессы в CRM.