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

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