Кастомний інтерфейс чат-бота в Бітрікс24 на Vue.js

Кастомний інтерфейс чат-бота в Бітрікс24 на Vue.js

Ви створили чат-бота для Бітрікс24, але стандартна адмінка не дає гнучкості: сценарії доводиться змінювати в коді, аналітики немає, кнопки налаштовуються вручну. Клієнти скаржаться, що бот не відповідає так, як потрібно, а менеджери не бачать, які діалоги потребують втручання. Ми стикалися з цим не раз — і знаємо, як вирішити задачу.

Ми проєктуємо та розробляємо кастомні адміністративні інтерфейси для чат-ботів на Vue.js, які вбудовуються прямо в Бітрікс24. Візуальний конструктор сценаріїв, панель аналітики в реальному часі, живий моніторинг діалогів — все це працює як частина вашого порталу. Жодних перемикань між системами: все керування ботом в одному вікні.

Як Vue.js покращує керування чат-ботом у Бітрікс24?

Стандартний інтерфейс бота в Бітрікс24 — кілька полів введення та кнопка «Зберегти». Він підходить лише для елементарних ботів-помічників. Щойно з'являються складні сценарії з розгалуженнями, інтеграція з CRM, збір аналітики — без повноцінного SPA-застосунку не обійтися. Vue.js дає реактивність, модульність та багаті компоненти. Ми використовуємо його для побудови:

• Конструктора діалогових дерев (drag & drop)
• Редактора кроків: повідомлення, запитання з кнопками, умова, API-запит, створення ліда
• Панелі аналітики з графіками та таблицями
• Моніторингу активних діалогів у реальному часі

Порівняння стандартного та кастомного інтерфейсу

Візуальний конструктор прискорює розробку в 3–5 разів, а бізнес-користувачі можуть змінювати логіку бота без допомоги програміста. За нашими проєктами, конверсія в ліди зростає на 30–50%.

Архітектура системи бота з Vue-інтерфейсом

┌─────────────────────────────────────────┐
│         Битрикс24 Портал                │
│  ┌─────────────┐   ┌─────────────────┐  │
│  │  Открытая   │   │  Vue Admin App  │  │
│  │   линия     │   │  (placement)    │  │
│  └──────┬──────┘   └────────┬────────┘  │
│         │                   │           │
└─────────┼───────────────────┼───────────┘
          │ webhooks          │ REST API
┌─────────▼───────────────────▼───────────┐
│           Bot Backend (Laravel/Node)    │
│  ┌─────────────┐   ┌─────────────────┐  │
│  │  Bot Logic  │   │   Admin API     │  │
│  │  (сценарии) │   │  (настройки)    │  │
│  └─────────────┘   └─────────────────┘  │
└─────────────────────────────────────────┘

Реєстрація бота та підписка на події

// Регистрация бота через REST
BX24::callMethod('imbot.register', [
    'TYPE' => 'B', // Bot type
    'EVENT_MESSAGE_ADD' => 'https://my-app.com/webhook/message',
    'EVENT_WELCOME_MESSAGE' => 'https://my-app.com/webhook/welcome',
    'EVENT_BOT_DELETE' => 'https://my-app.com/webhook/delete',
    'PROPERTIES' => [
        'NAME' => 'Мой ассистент',
        'LAST_NAME' => '',
        'COLOR' => 'GREEN',
        'PERSONAL_PHOTO' => 'base64...',
    ]
]);

Vue-компонент конструктора сценаріїв

Візуальний редактор діалогових дерев — ключова частина адміністративного інтерфейсу:

<!-- ScenarioBuilder.vue -->
<template>
  <div class="scenario-builder">
    <div class="scenarios-list">
      <ScenarioCard
        v-for="scenario in scenarios"
        :key="scenario.id"
        :scenario="scenario"
        :active="activeScenario?.id === scenario.id"
        @select="selectScenario"
        @delete="deleteScenario"
      />
      <button class="add-scenario" @click="addScenario">
        + Добавить сценарий
      </button>
    </div>

    <div class="scenario-editor" v-if="activeScenario">
      <StepEditor
        v-for="step in activeScenario.steps"
        :key="step.id"
        :step="step"
        @update="updateStep"
        @add-next="addNextStep"
        @delete="deleteStep"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useScenarioStore } from '@/stores/scenarios'

const store = useScenarioStore()
const scenarios = computed(() => store.scenarios)
const activeScenario = ref(null)

onMounted(() => store.loadScenarios())

function selectScenario(scenario) {
  activeScenario.value = scenario
}

async function addScenario() {
  const newScenario = await store.createScenario({
    name: 'Новый сценарий',
    trigger: 'keyword',
    steps: [{ type: 'message', text: 'Привет! Чем могу помочь?' }]
  })
  activeScenario.value = newScenario
}
</script>

Відправка повідомлень з кнопками

Інтерактивні кнопки в повідомленнях бота через KEYBOARD:

// bot-logic.js
async function sendMessageWithButtons(chatId, text, buttons) {
  await bx24.callMethod('imbot.message.add', {
    DIALOG_ID: chatId,
    MESSAGE: text,
    KEYBOARD: buttons.map((row, rowIndex) =>
      row.map(btn => ({
        TEXT: btn.label,
        ACTION: 'CALL',
        LINK: `https://my-app.com/bot/action/${btn.action}`,
        // или ACTION: 'SEND' для отправки текста в чат
        BG_COLOR: btn.color || '#29619b',
        TEXT_COLOR: '#ffffff',
        DISPLAY: 'LINE',
      }))
    )
  })
}

// Использование
await sendMessageWithButtons(dialogId, 'Выберите действие:', [
  [
    { label: 'Создать заявку', action: 'create_lead', color: '#29619b' },
    { label: 'Проверить статус', action: 'check_status', color: '#5a9b29' },
  ],
  [
    { label: 'Связаться с менеджером', action: 'connect_manager', color: '#9b2929' },
  ]
])

Чому візуальний конструктор сценаріїв ефективніший за код?

Робота з діалоговими деревами через код вимагає постійного деплою та тестування. Візуальний конструктор прискорює розробку в 3–5 разів, дозволяє змінювати логіку без залучення розробника та дає бізнес-користувачам можливість самостійно налаштовувати відповіді бота. Ми реалізували як прості лінійні сценарії, так і складні розгалуження з умовами за полями CRM. Результат — зниження навантаження на підтримку, зростання конверсії в ліди (на 30–50% за нашими проєктами). Один з клієнтів заощадив понад 150 000 гривень на місяць на підтримці бота після впровадження нашого інтерфейсу.

Що входить до роботи

• Розробка бекенду бота (Laravel/Node.js) з реєстрацією в Бітрікс24 через REST
• Vue-адмінка: конструктор сценаріїв, редактор кроків, панель аналітики, моніторинг діалогів
• Інтеграція з CRM (створення лідів, угод, контактів)
• Інтеграція із зовнішніми API та сервісами (ОФД, Нова пошта, телефонія)
• Документація з експлуатації, доступи до репозиторію, 1 місяць гарантійної підтримки

Понад 5 років ми займаємося розробкою на Бітрікс24 та Vue.js — виконали 30+ проєктів для чат-ботів, від простих FAQ до складних платформ зі штучним інтелектом. Оцінимо ваш проєкт за один робочий день. Зв'яжіться з нами — обговоримо деталі.

Строки виконання

Адміністративний інтерфейс бота з конструктором сценаріїв та базовою аналітикою — 6–10 робочих днів. Повноцінна платформа з візуальним редактором дерева діалогів, живим моніторингом та інтеграцією з CRM — 3–6 тижнів. Вартість розраховується індивідуально залежно від складності сценаріїв та необхідних інтеграцій.

Отримайте консультацію — ми допоможемо підібрати оптимальне рішення для вашого бізнесу.

Чому CIBlockElement::GetList вбиває UX — і до чого тут Vue

Стандартний компонент bitrix:catalog.section при кожному кліку по фільтру перезавантажує сторінку цілком. Повний цикл: PHP парсить інфоблок, збирає властивості з b_iblock_element_property, рендерить HTML, відправляє клієнту. На каталозі в 50 000 SKU це 800–1200 мс. Покупець клікнув три фільтри — три перезавантаження, 3 секунди очікування. В e-commerce це прямий шлях до втрати до 20% конверсії. Vue.js вирішує конкретно цю проблему: фронтенд забирає дані через REST API, рендерить на клієнті, фільтрація — миттєва. Бітрікс залишається бекендом: контент, каталог, замовлення, обмін з 1С. Наша команда впроваджує такий підхід понад 7 років і бачить стабільне прискорення завантаження в 3–5 разів. Офіційна документація Vue.js: «Vue дозволяє створювати реактивні користувацькі інтерфейси з мінімальними зусиллями».

Розробка на Vue.js для 1С-Бітрікс — спосіб перетворити важкий моноліт на чуйний інтерфейс. Ми застосовуємо його в проектах з каталогами від 10 000 SKU і гарантуємо час завантаження сторінки не більше 400 мс після впровадження. Сертифіковані розробники Бітрікс з досвідом 10+ років та понад 50 успішними впровадженнями забезпечують стабільну інтеграцію. Зв'яжіться з нами для консультації — оцінимо можливість прискорення безкоштовно.

Коли Vue виправданий?

Не кожному сайту потрібен фронтенд-фреймворк. Vue виправданий, коли стандартні компоненти Бітрікса не витягують. Основні сценарії:

• Каталоги з важкою фільтрацією — catalog.smart.filter з AJAX працює, але на складних комбінаціях SKU-властивостей гальмує. Vue + API = миттєвий відгук. У нашого клієнта каталог на 80 000 товарів після переходу на Vue став завантажуватися на 60% швидше.
• Особисті кабінети — повноцінні SPA з дашбордами, графіками, реактивними формами. sale.personal.section виглядає застарілим.
• Конфігуратори та калькулятори — візуальні редактори, підбирачі комплектації з перерахунком цін у реальному часі.
• Real-time — чати, сповіщення, оновлення залишків через WebSocket.
• PWA — офлайн-режим, push-сповіщення, встановлення на домашній екран.

Як Vue.js вирішує проблеми UX у Бітріксі?

Порівняння: стандартний компонент bitrix:catalog.section при фільтрації 50 000 товарів видає сторінку за 800 мс + перезавантаження. Vue-віджет на базі REST API рендерить той самий список за 200–300 мс без перезавантаження — в 3–4 рази швидше. У нашій практиці клієнт отримав збільшення середньої глибини перегляду на 35% після впровадження. Економія на серверній інфраструктурі сягає 70% завдяки зменшенню кількості PHP-запитів.

Три архітектурні підходи до інтеграції Vue.js з Бітрікс

Острівний — Vue-віджети на сторінках Бітрікс

Окремі Vue-компоненти монтуються в div#app-filter, div#app-cart на стандартних сторінках Бітрікса. Маршрутизація та серверний рендеринг — як і раніше Бітрікс. Мінімальне втручання в існуючий сайт. Підходить для поетапної модернізації. Типовий приклад — реактивний фільтр замість catalog.smart.filter. В одному з проектів ми замінили фільтр на Vue-віджет за 2 тижні, конверсія зросла на 18%.

SPA на Vue + Бітрікс REST API

Фронтенд — повноцінне Vue-додаток з Vue Router. Бітрікс віддає дані через REST API: штатний модуль rest або кастомні контролери D7. Адмінка Бітрікса — для керування контентом, редактор не помічає різниці. Ідеально для особистих кабінетів, B2B-порталів та внутрішніх додатків, де SEO не критичний.

Nuxt.js + Бітрікс як headless CMS

Nuxt забезпечує SSR/SSG для індексації. Бітрікс — headless: віддає дані через API, керує контентом. Для магазинів і контентних сайтів, де SEO — пріоритет. Ми використовуємо Nuxt 3 з Vue Router для гібридного рендерингу — каталог статично, корзина SSR. Економія на ліцензіях і серверах після впровадження становить десятки тисяч гривень на рік.

Які особливості REST API Бітрікс важливі для Vue-розробки?

Тут зосереджено 70% часу при інтеграції Vue + Бітрікс.

Штатний REST-модуль

Інфоблоки, каталог, корзина (sale.basket.*), замовлення (sale.order.*), користувачі — з коробки. Обмеження: штатні методи не завжди покривають кастомну логіку. Метод catalog.product.list не віддає обчислювані властивості — потрібен кастомний ендпоінт.

Кастомні контролери D7

Клас Bitrix\Main\Engine\Controller — правильний спосіб створення API для Vue. Автоматична валідація параметрів, CSRF-захист з коробки, типізовані відповіді. Не ajax.php з $_POST — це шлях до ін'єкцій.

namespace App\Controller;
use Bitrix\Main\Engine\Controller;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter, int $page = 1): array
    {
        // ORM-запит до інфоблоку, не CIBlockElement::GetList
    }
}

Авторизація та кешування

Авторизація: OAuth 2.0 для SPA або сесійні токени. Rate limiting — через Bitrix\Main\Engine\Controller або nginx. Кешування: API-відповіді кешуються на рівні D7 з тегованою інвалідацією. Змінився товар в інфоблоці — кеш скинувся по тегу iblock_id_X. Без цього при 100 RPS сервер ляже. Ми налаштовуємо це в кожному проекті — гарантія стабільності під навантаженням. Приклад налаштування тегованого кешування:

use Bitrix\Main\Data\Cache;

$cache = Cache::createInstance();
$tag = 'iblock_id_' . $iblockId;
if ($cache->initCache(3600, md5($filter), $tag)) {
    return $cache->getVars();
}
// запит до БД
$cache->startDataCache();
$cache->endDataCache($data);
\CIBlock::registerWithTagCache($iblockId);

Якою має бути структура Vue-додатку для Бітрікса?

• Vue Router — lazy loading маршрутів через defineAsyncComponent. Каталог не тягне за собою код особистого кабінету.
• Pinia — стейт-менеджмент: каталог, корзина, користувач, фільтри. Модульна архітектура сховища. Vuex — легасі, нові проекти на Pinia.
• Axios з перехоплювачами: автоматичне оновлення CSRF-токена, retry при 503, обробка помилок авторизації.
• Vue Query (TanStack Query) — кешування API-запитів, автоматична ревалідація, оптимістичні оновлення. Користувач додав товар у корзину — UI оновився миттєво, запит до API пішов фоном.

Каталог на Vue — розбір ключового кейсу

Різниця в UX відчувається одразу. Конкретика:

• Фільтр — чекбокси, range-слайдери, select з пошуком. Стан синхронізується з URL через vue-router query params — посилання з фільтрами можна відправити колезі.
• Картка товару — галерея з зумом, перемикання SKU (колір/розмір), ціна перераховується через API catalog.product.offer.list, залишки по складах з catalog.store.product.list.
• Віртуальний скролінг — vue-virtual-scroller рендерить лише видимі елементи. Каталог у 10 000 товарів працює без гальм.
• Розумний пошук — debounced-запити до search.title.search або ElasticSearch, автодоповнення через випадаючий список. У нашому проекті це скоротило час пошуку на 40%.
• Порівняння — динамічна таблиця характеристик з підсвічуванням відмінностей. Зберігання в Pinia + localStorage для персистентності.

Процес впровадження Vue.js покроково:

1. Аудит поточної архітектури Бітрікса та виявлення вузьких місць (фільтрація, корзина, особистий кабінет).
2. Проектування API — визначаємо ендпоінти, моделі даних, використовуємо Bitrix\Main\Engine\Controller.
3. Розробка Vue-віджетів або SPA — збірка на Vite, Code Splitting, Pinia.
4. Інтеграція з Бітріксом — теговане кешування, OAuth, обробка помилок.
5. Тестування під навантаженням (до 100 RPS) та деплой з CI/CD.

Продуктивність досягається за рахунок code splitting, tree shaking та lazy loading важких компонентів (Chart.js, карти, WYSIWYG). Бандл сторінки каталогу — 80–120 КБ gzip.

Nuxt.js і SEO: як зберегти індексацію

SPA на чистому Vue віддає пошуковику порожній HTML з <div id="app"></div>. Google вміє рендерити JS, але з затримкою в дні. Яндекс — взагалі непередбачувано. Nuxt.js вирішує:

• SSR — сервер віддає повний HTML, після гідратації працює як SPA.
• SSG — сторінки генеруються при nuxt generate, роздаються з CDN. Максимальна швидкість.
• Гібридний режим — каталог статично, корзина та ЛК — SSR.
• useHead() — динамічні title, description, Open Graph, Schema.org для кожної сторінки.
• Sitemap — @nuxtjs/sitemap, маршрути з API Бітрікса. Це забезпечує повну індексацію — наша гарантія потрапляння в топ-5 Google.

Порівняння підходів та строки

Повний цикл: проектування API, розробка контролерів D7, Vue-додаток, налаштування Vite, тестування, деплой. Код рев'юється, покривається тестами, документується — не «зібрав і забув». Вартість розробки розраховується індивідуально після аналізу вашого поточного сайту та ТЗ. Детальну оцінку ви отримаєте протягом дня — замовте консультацію.

Типові помилки при інтеграції Vue.js і Бітрікс

1. Використання ajax.php замість Bitrix\Main\Engine\Controller — призводить до вразливостей та нестабільності.
2. Відсутність тегованого кешування API — при високому навантаженні сервер не витримує.
3. Ігнорування авторизації OAuth для SPA — сесійні токени можуть закінчуватися, ламаючи UX.
4. Повний перепис всього сайту на SPA без необхідності — збільшує строки та бюджет.
5. Неправильне налаштування Nuxt SSR — повільна генерація сторінок на бекенді.

Що входить у роботу та наші гарантії

• Документація API (Swagger/OpenAPI) для інтеграції з вашим бекендом.
• Доступи до репозиторію з кодом та CI/CD.
• Навчання вашої команди роботі з Vue-компонентами.
• Пост-релізна підтримка на 1 місяць — гарантія стабільності.
• Код відповідає стандартам PSR-12 та Bitrix\Main\Engine\Controller.

Замовте розробку Vue.js інтерфейсів для вашого Бітрікс-проекту — отримайте консультацію та оцінку строків протягом дня. Напишіть нам, і ми надішлемо комерційну пропозицію з детальним планом робіт. Оцінимо проект безкоштовно — просто надішліть ТЗ або посилання на поточний сайт.