Developing a chatbot interface using Vue.js for Bitrix24

Developing a Chatbot Interface on Vue.js for Bitrix24

Chatbots in Bitrix24 operate through two channels: open lines (external messengers) and the internal chat (im). The server-side of a bot is an event handler that receives messages via event.message.add webhook and replies via imbot.message.add. The standard bot configuration interface is an admin page with input fields. When a full-featured bot management UI is needed — scenario configuration, a visual response builder, dialog analytics — a Vue application is developed, embedded in Bitrix24 via placement or as a standalone admin panel.

Bot System Architecture with Vue Interface

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

Bot Registration and Event Subscription

// Registering the bot 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 Scenario Builder Component

A visual dialog tree editor — the core part 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: 'Hi! How can I help you?' }]
  })
  activeScenario.value = newScenario
}
</script>

Dialog Step Component

<!-- StepEditor.vue -->
<template>
  <div class="step-editor" :class="`step-type-${step.type}`">
    <div class="step-header">
      <select v-model="step.type" @change="onTypeChange">
        <option value="message">Message</option>
        <option value="question">Question with Buttons</option>
        <option value="condition">Condition</option>
        <option value="api_call">API Request</option>
        <option value="crm_create">Create in CRM</option>
      </select>
    </div>

    <div class="step-body">
      <MessageStep v-if="step.type === 'message'" v-model="step" />
      <QuestionStep v-if="step.type === 'question'" v-model="step" />
      <ConditionStep v-if="step.type === 'condition'" v-model="step" />
      <ApiCallStep v-if="step.type === 'api_call'" v-model="step" />
      <CrmCreateStep v-if="step.type === 'crm_create'" v-model="step" />
    </div>
  </div>
</template>

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 Lead', action: 'create_lead', color: '#29619b' },
    { label: 'Check Status', action: 'check_status', color: '#5a9b29' },
  ],
  [
    { label: 'Connect with Manager', action: 'connect_manager', color: '#9b2929' },
  ]
])

Dialog Analytics

Vue components for bot monitoring:

<!-- BotAnalytics.vue -->
<template>
  <div class="bot-analytics">
    <div class="metrics-grid">
      <MetricCard title="Dialogs Today" :value="metrics.dialogs_today" />
      <MetricCard title="Successful Completions" :value="metrics.completed" />
      <MetricCard title="Escalated to Manager" :value="metrics.escalated" />
      <MetricCard title="Avg Response Time" :value="metrics.avg_response_time + 's'" />
    </div>

    <div class="charts-row">
      <DialogsChart :data="metrics.dialogs_by_day" />
      <ScenariosChart :data="metrics.scenarios_usage" />
    </div>

    <div class="recent-dialogs">
      <h3>Recent Dialogs</h3>
      <DialogTable :dialogs="recentDialogs" @view="openDialog" />
    </div>
  </div>
</template>

Live Dialog Monitoring

For real-time monitoring — WebSocket or polling via Server-Sent Events:

// composables/useLiveDialogs.js
export function useLiveDialogs() {
  const dialogs = ref([])
  let eventSource = null

  function connect() {
    eventSource = new EventSource('/api/bot/dialogs/stream')
    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data)
      updateDialog(data)
    }
  }

  function updateDialog(update) {
    const idx = dialogs.value.findIndex(d => d.id === update.dialogId)
    if (idx >= 0) {
      dialogs.value[idx] = { ...dialogs.value[idx], ...update }
    } else {
      dialogs.value.unshift(update)
    }
  }

  onMounted(connect)
  onUnmounted(() => eventSource?.close())

  return { dialogs }
}

Timeline

A bot admin interface with a scenario builder and basic analytics — 6–10 business days. A full-featured platform with a visual dialog tree editor, live monitoring, and CRM integration — 3–6 weeks.