How to Build a Custom Chat-bot Interface for Bitrix24 with Vue.js

You have created a chat bot for Bitrix24, but the standard admin panel does not give you the flexibility you need: scenarios have to be changed in code, analytics are missing, and buttons are configured manually. Clients complain that the bot does not respond as expected, and managers cannot see which dialogs require intervention. We have encountered this many times — and we know how to solve it.

We design and develop custom administrative interfaces for chat bots on Vue.js that integrate directly into Bitrix24. Visual scenario builder, real-time analytics panel, live dialog monitoring — all of it works as part of your portal. No switching between systems: all bot management in one window.

Benefits of Vue.js for Bitrix24 Chat Bot Management

The standard bot interface in Bitrix24 — a few input fields and a "Save" button. It is only suitable for basic helper bots. As soon as complex branching scenarios, CRM integration, or analytics collection appear, a full SPA application becomes necessary. Vue.js provides reactivity, modularity, and rich components. We use it to build:

• Dialog tree builder (drag & drop)
• Step editor: message, question with buttons, condition, API request, lead creation
• Analytics panel with charts and tables
• Real-time active dialog monitoring

Comparison of standard vs. custom interface

The visual builder speeds up development by 3–5x, and business users can change bot logic without a programmer. Visual builder is 3–5 times more efficient than manual code configuration. In our projects, lead conversion increases by 30–50%. One client's bot handles over 10,000 dialogs per month.

System architecture of a bot with a Vue interface

┌─────────────────────────────────────────┐ │ Bitrix24 Portal │ │ ┌─────────────┐ ┌─────────────────┐ │ │ │ Open │ │ Vue Admin App │ │ │ │ Line │ │ (placement) │ │ │ └──────┬──────┘ └────────┬────────┘ │ │ │ │ │ └─────────┼───────────────────┼───────────┘ │ webhooks │ REST API ┌─────────▼───────────────────▼───────────┐ │ Bot Backend (Laravel/Node) │ │ ┌─────────────┐ ┌─────────────────┐ │ │ │ Bot Logic │ │ Admin API │ │ │ │ (scenarios)│ │ (settings) │ │ │ └─────────────┘ └─────────────────┘ │ └─────────────────────────────────────────┘ 

How to Build a Custom Bot Interface

1. Register the bot in Bitrix24 via REST.
2. Create a Vue.js SPA for the admin panel.
3. Implement the scenario builder with drag-and-drop.
4. Add analytics and live monitoring dashboards.
5. Integrate with CRM and external APIs.
6. Deploy and provide documentation.

Registering the bot and subscribing to events

// Bot registration via 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' => 'My assistant', 'LAST_NAME' => '', 'COLOR' => 'GREEN', 'PERSONAL_PHOTO' => 'base64...', ] ]); 

Vue component of the scenario builder

The visual dialog tree editor is the core of the admin interface:

<!-- 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"> + Add scenario </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: 'New scenario', trigger: 'keyword', steps: [{ type: 'message', text: 'Hello! How can I help?' }] }) activeScenario.value = newScenario } </script> 

Sending messages with buttons

Interactive buttons in bot messages via 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}`, // or ACTION: 'SEND' to send text to chat BG_COLOR: btn.color || '#29619b', TEXT_COLOR: '#ffffff', DISPLAY: 'LINE', })) ) }) } // Usage await sendMessageWithButtons(dialogId, 'Choose an action:', [ [ { label: 'Create request', action: 'create_lead', color: '#29619b' }, { label: 'Check status', action: 'check_status', color: '#5a9b29' }, ], [ { label: 'Contact manager', action: 'connect_manager', color: '#9b2929' }, ] ]) 

Visual Scenario Builder Is More Effective Than Code

Working with dialog trees via code requires constant deployment and testing. A visual builder speeds up development by 3–5x, allows logic changes without a developer, and gives business users the ability to configure bot responses independently. We have implemented both simple linear scenarios and complex branching with conditions based on CRM fields. The result — reduced support load, increased lead conversion (by 30–50% in our projects). One client saved over 150,000 rubles per month on bot support after implementing our interface.

Deliverables

• Bot back-end development (Laravel/Node.js) with Bitrix24 REST registration
• Vue admin panel: scenario builder, step editor, analytics dashboard, dialog monitoring
• CRM integration (lead, deal, contact creation)
• Integration with external APIs and services (fiscal data operators, CDEK, telephony)
• Operational documentation, repository access, user training, and 1 month warranty support

We have been developing on Bitrix24 and Vue.js for over 5 years — completed 30+ projects for chat bots, from simple FAQs to complex AI-powered platforms. We will evaluate your project within one business day. Contact us to discuss the details.

Timeframes

Bot admin interface with scenario builder and basic analytics — 6–10 business days. Full platform with visual dialog tree editor, live monitoring, and CRM integration — 3–6 weeks. The cost is calculated individually based on the complexity of scenarios and required integrations.

Get a consultation — we will help you choose the best solution for your business.