Кастомный интерфейс чат-бота в Битрикс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% по нашим проектам). Один из клиентов сэкономил более $1.4k–1.9k в месяц на поддержке бота после внедрения нашего интерфейса.

Что входит в работу

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

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

Сроки выполнения

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

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