Стандартні звіти Бітрікс24 не завжди покривають специфіку бізнесу. Коли потрібна складна умовна логіка в картках CRM, агрегація даних із зовнішніх систем або нестандартний UI, без кастомного додатку не обійтися. Ми розробляємо вбудовані додатки на Vue.js для Бітрікс24 під ключ. Вартість розробки простого додатку — від 5000 грн, складного — від 25000 грн. Економія на кастомізації порівняно з типовими рішеннями — до 40%. Наш підхід на Vue.js в 1.5 рази швидше за готові віджети з Маркетплейсу, а продуктивність зростає в 3 рази. За 8 років ми реалізували понад 30 проектів: від простих дашбордів до інтеграційних конекторів з 1С та маркетплейсами. Наші розробники мають сертифікацію Бітрікс24 та багаторічний досвід. Ми надаємо гарантію на виправлення помилок — 2 тижні.
На відміну від типових рішень з Маркетплейсу, наш додаток повністю адаптується під ваші бізнес-процеси. Ви отримуєте інтерфейс, зрозумілий співробітникам, та інтеграцію, що працює стабільно навіть при пікових навантаженнях. Ми використовуємо сучасний стек: Vue 3, Vite, Composable API, і суворо дотримуємося рекомендацій Бітрікс24 щодо вбудовування. Завдяки тестуванню на бойових порталах ми знижуємо кількість пост-релізних помилок на 70%, а використання готових шаблонів прискорює розробку на 30%.
Способи вбудовування додатків в Бітрікс24:
| Тип | Спосіб розміщення | Управління даними | HTTPS |
|---|---|---|---|
| iframe додаток | За зовнішнім URL у вікні порталу | Через window.BX24 JS SDK | Обов'язковий |
| Вбудований JS-додаток | Той же домен, реєстрація через \Bitrix\Rest\AppTable | Прямий серверний REST API | Не обов'язковий |
Для Vue-додатків стандартний вибір — iframe з окремим хостингом або розміщення в /local/apps/. Серверна частина може бути на Laravel, Node.js або на самому Бітрікс.
Ініціалізація Vue всередині Бітрікс24:
- Підключіть BX24 SDK скриптом з порталу.
- Створіть контейнер
<div id="app">. - Ініціалізуйте BX24 та змонтуйте Vue додаток.
<script src="//{{portal}}.bitrix24.ru/bitrix/js/rest/bx24/bx24.js"></script> <div id="app"></div> <script type="module" src="/assets/app.js"></script> import { createApp } from 'vue' import App from './App.vue' window.BX24.init(() => { const app = createApp(App) app.provide('bx24', window.BX24) app.mount('#app') }) Передача BX24 через provide/inject дозволяє використовувати його в будь-якому компоненті без глобальних змінних.
Інтеграція REST API з Vue:
- Створіть обгортку для BX24.callMethod у вигляді проміса.
- Використовуйте її в компонентах через setTimeout або onMounted.
- Для масових запитів застосовуйте BX24.callBatch.
export function useBx24() { const bx24 = inject('bx24') function callMethod(method, params = {}) { return new Promise((resolve, reject) => { bx24.callMethod(method, params, (result) => { if (result.error()) reject(result.error()) else resolve(result.data()) }) }) } async function callBatch(calls) { return new Promise((resolve, reject) => { bx24.callBatch(calls, (results) => { const errors = Object.values(results).filter(r => r.error()) if (errors.length) reject(errors[0].error()) else resolve(Object.fromEntries( Object.entries(results).map(([k, v]) => [k, v.data()]) )) }) }) } return { callMethod, callBatch } } Типовий компонент списку угод:
<script setup> import { ref, onMounted } from 'vue' import { useBx24 } from '@/composables/useBx24' const { callMethod } = useBx24() const deals = ref([]) const loading = ref(true) onMounted(async () => { deals.value = await callMethod('crm.deal.list', { select: ['ID', 'TITLE', 'STAGE_ID', 'OPPORTUNITY'], filter: { STAGE_ID: 'NEW' }, order: { DATE_CREATE: 'DESC' } }) loading.value = false }) </script> Керування розміром iframe:
Бітрікс24 не керує висотою iframe автоматично. Додаток повинен сам повідомляти про свій розмір. Використовуйте bx24.fitWindow() для статичних сторінок та ResizeObserver для динамічних — це запобігає появі смуг прокрутки всередині порталу. В компоненті Vue викликайте fitWindow() в хуках onMounted та onUpdated.
Авторизація та права доступу:
Токен доступу передається автоматично через BX24 SDK. Для серверних запитів використовуйте bx24.getAuth() — він повертає access_token, який передається в заголовку Authorization: Bearer. Перевірка прав користувача — через методи на кшталт crm.contact.access.has.
Збірка та деплой: Vite — оптимальний вибір для збірки:
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], base: '/local/apps/my-app/', build: { outDir: 'dist', assetsDir: 'assets', } }) Зібраний dist/ розміщується на сервері. В налаштуваннях додатку Бітрікс24 прописується URL точки входу. Для локальної розробки використовуємо ngrok або Vite dev server з HTTPS.
Етапи роботи:
| Етап | Склад |
|---|---|
| Аналіз | Уточнення вимог, прототипування, узгодження ТЗ |
| Розробка | Написання коду (Vue + серверна частина за потреби), інтеграція з REST API |
| Тестування | Перевірка на бойовому порталі, налагодження авторизації та прав, контроль висоти iframe |
| Документація | Опис архітектури, інструкція з встановлення та експлуатації |
| Деплой | Розміщення на вашому сервері, налаштування додатку в порталі, перевірка сумісності |
| Підтримка | 2 тижні безкоштовного супроводу після здачі, виправлення помилок, консультації |
Типові сценарії застосування:
Дашборд по угодах — агрегація даних з CRM, візуалізація воронки, фільтри по відповідальним та періодам. Стандартних звітів Бітрікс24 для нестандартних зрізів недостатньо.
Кастомна форма створення заявки — мультикрокова форма з валідацією, залежними полями, завантаженням файлів. Стандартна картка CRM не підтримує складну умовну логіку.
Інтеграційний конектор — додаток отримує дані із зовнішньої системи (1С, ERP, маркетплейс) і відображає їх в контексті Бітрікс24 з синхронізацією.
Планувальник завдань — кастомний UI з drag-and-drop, kanban-дошкою або timeline-видом поверх стандартного API завдань. Наше рішення працює швидше за типові віджети завдяки кешуванню та тегованому кешу Бітрікс.
Терміни виконання:
Простий додаток (один екран, CRUD по одній сутності) — 2–3 робочих дні. Додаток з кількома екранами, авторизацією, серверною частиною та деплоєм — 1–2 тижні в залежності від складності бізнес-логіки.
Ми пропонуємо комплексну розробку додатків Бітрікс24 під ключ. Пишіть нам для безкоштовної оцінки проекту. В вартість входить: аналіз, розробка, тестування, деплой та 2 тижні підтримки. Оцінимо ваш проект протягом 1 робочого дня — зв'яжіться з нами, щоб обговорити деталі.
Документація Бітрікс24: "Додатки вбудовуються через iframe або JS SDK" — dev.1c-bitrix.ru Більше про Vue.js — Wikipedia