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

Що таке 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 — оцінимо ваш проєкт на безкоштовній консультації.

Скільки коштує розробка Vue.js-віджета?

Вартість розробки залежить від складності. Простий віджет (одна вкладка, читання/запис даних) — від 50 000 до 100 000 ₴. Складний віджет (власний API, інтеграція) — від 100 000 до 200 000 ₴. Економія від впровадження — до 30 000 ₴/міс на одного менеджера. Таким чином, віджет окупається за 2–3 місяці.

Процес роботи та терміни

Терміни орієнтовні: простий віджет — від 8 до 15 робочих днів. Складний — від 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.