Кастомний інтерфейс чат-бота в Бітрікс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 тижнів. Вартість розраховується індивідуально залежно від складності сценаріїв та необхідних інтеграцій.

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