Розробка Telegram Mini App з інтеграцією 1С-Бітрікс

Розробка Telegram Mini App з інтеграцією 1С-Бітрікс

Нещодавно до нас звернувся власник інтернет-магазину на Бітрікс з каталогом 30 000 товарів. Після запуску Mini App конверсія в замовлення зросла на 25% за місяць. Клієнти купують прямо в Telegram, не встановлюючи додатки. Мобільна версія сайту часто програє в зручності — Telegram Mini App вирішує цю проблему. Типова ситуація: користувач клікає на товар у Telegram-каналі, але повільне завантаження мобільної версії збиває настрій. Mini App усуває перешкоди: все відбувається всередині месенджера, без перемикання контексту. Розробляємо міні-додатки для магазинів на 1С-Бітрікс під ключ: каталог, кошик, оплата. Наші інженери — сертифіковані спеціалісти з досвідом понад 5 років і десятками впроваджень. Один з наших клієнтів відзначив зростання продажів на 25% за місяць після запуску.

Як працює інтеграція Telegram Mini App з 1С-Бітрікс?

Архітектура: Mini App (React SPA) → HTTPS запити → Бітрікс API (REST або кастомні ендпоінти). Mini App не має доступу до бази — все через API. Бітрікс виступає бекендом, повертаючи JSON. Аутентифікація — через initData з Telegram WebApp (підпис HMAC-SHA256 за секретним токеном бота).

Telegram Client
  └─ Mini App (React SPA)
       └─ HTTPS запити → Бітрікс API
            └─ Валідація initData Telegram
                 └─ Бізнес-логіка: каталог, кошик, замовлення

Як аутентифікувати користувача без пароля?

При відкритті Mini App об'єкт window.Telegram.WebApp містить initData — рядок з даними користувача та хешем. Цей рядок потрібно передавати на сервер при кожному запиті та валідувати.

На стороні Mini App (React):

import { useEffect, useState } from 'react';

const tg = window.Telegram.WebApp;

export function useTelegramAuth() {
    const [token, setToken] = useState<string | null>(null);

    useEffect(() => {
        tg.ready();
        tg.expand();

        const initData = tg.initData;
        if (!initData) return;

        // Відправляємо initData на сервер для обміну на JWT-токен
        fetch('/api/telegram/auth', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ init_data: initData }),
        })
            .then(r => r.json())
            .then(data => setToken(data.token));
    }, []);

    return { token, user: tg.initDataUnsafe?.user };
}

На стороні Бітрікс — валідація підпису:

// /local/api/telegram/auth.php
namespace Local\TelegramMiniApp;

class InitDataValidator
{
    private string $botToken;

    public function __construct(string $botToken)
    {
        $this->botToken = $botToken;
    }

    public function validate(string $initData): bool
    {
        parse_str($initData, $params);
        $hash = $params['hash'] ?? '';
        unset($params['hash']);

        // Сортуємо ключі, будуємо data-check-string
        ksort($params);
        $dataCheckString = implode("\n", array_map(
            fn($k, $v) => "$k=$v",
            array_keys($params),
            array_values($params)
        ));

        // Секрет: HMAC-SHA256 від токена бота з ключем "WebAppData"
        $secretKey = hash_hmac('sha256', $this->botToken, 'WebAppData', true);
        $expected  = hash_hmac('sha256', $dataCheckString, $secretKey);

        // Перевіряємо timestamp (не старше 24 годин)
        $authDate = (int)($params['auth_date'] ?? 0);
        if (time() - $authDate > 86400) {
            return false;
        }

        return hash_equals($expected, $hash);
    }

    public function extractUser(string $initData): ?array
    {
        parse_str($initData, $params);
        return json_decode($params['user'] ?? '{}', true);
    }
}

При першому вході через Mini App ми зіставляємо Telegram user_id з покупцем у Бітрікс через користувацьке поле UF_TELEGRAM_ID. Якщо користувача не знайдено — створюється новий з групою «Покупці».

API-ендпоінти для Mini App

Каталог товарів, кошик і замовлення реалізовані через кастомні REST-обробники Бітрікс. Типовий набір: каталог з пагінацією, додавання/видалення з кошика, створення замовлення. Приклад контролера каталогу:

class CatalogController
{
    public function index(Request $request): JsonResponse
    {
        $elements = \CIBlockElement::GetList(
            ['SORT' => 'ASC'],
            ['IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y'],
            false,
            ['nPageSize' => 20, 'iNumPage' => (int)$request->get('page', 1)],
            ['ID', 'NAME', 'PREVIEW_TEXT', 'PREVIEW_PICTURE', 'PROPERTY_PRICE', 'PROPERTY_ARTICLE']
        );

        $items = [];
        while ($row = $elements->GetNextElement()) {
            $fields = $row->GetFields();
            $props  = $row->GetProperties();
            $items[] = [
                'id'    => (int)$fields['ID'],
                'name'  => $fields['NAME'],
                'text'  => $fields['PREVIEW_TEXT'],
                'image' => \CFile::GetPath($fields['PREVIEW_PICTURE']),
                'price' => (float)($props['PRICE']['VALUE'] ?? 0),
            ];
        }

        return new JsonResponse(['items' => $items]);
    }
}

Покроковий процес розробки

1. Аналіз каталогу та вимог — вивчаємо інфоблоки, торгові пропозиції та ціни. Визначаємо набір функцій для MVP.
2. Проектування архітектури — розробляємо REST API на стороні Бітрікс, схеми даних для кошика та замовлень. Використовуємо ORM і теговане кешування для продуктивності.
3. Розробка Mini App — створюємо React-додаток з компонентами каталогу, кошика та оформлення замовлення.
4. Інтеграція з Бітрікс — підключаємо API, налаштовуємо аутентифікацію через initData та прив'язку користувачів.
5. Налаштування Telegram Payments — реєструємо провайдера, створюємо інвойси, обробляємо callback.
6. Тестування — перевіряємо на реальних користувачах, виправляємо баги.
7. Деплой та запуск — публікуємо Mini App через @BotFather, налаштовуємо моніторинг.
8. Підтримка — 30 днів безкоштовної підтримки після запуску.

Чому Telegram Mini App кращий за мобільний додаток?

Mini App поєднує низький поріг входу, швидке впровадження та високу конверсію завдяки вбудованому месенджеру. Це ідеальний варіант для інтернет-магазинів, які хочуть швидко запустити мобільні продажі без витрат на нативні додатки.

Оплата через Telegram Payments

Telegram підтримує вбудовану оплату через провайдерів (ЮKassa та ін.). На стороні Бітрікс створюється invoice через Bot API:

public function createInvoice(int $orderId, int $bitrixUserId): string
{
    $order = \Bitrix\Sale\Order::load($orderId);

    $response = $this->botApiPost('createInvoiceLink', [
        'title'          => 'Замовлення #' . $orderId,
        'description'    => 'Оплата замовлення ' . $order->getField('ACCOUNT_NUMBER'),
        'payload'        => json_encode(['order_id' => $orderId, 'user_id' => $bitrixUserId]),
        'provider_token' => PAYMENT_PROVIDER_TOKEN,
        'currency'       => 'RUB',
        'prices'         => [['label' => 'Разом', 'amount' => (int)($order->getPrice() * 100)]],
    ]);

    return $response['result']; // invoice_link
}

Після оплати Mini App отримує callback і оновлює статус замовлення в Бітрікс. Покупець отримує сповіщення через бота.

Що входить в роботу

• Реєстрація бота та налаштування Mini App через @BotFather
• Розробка React-додатку: каталог, картка товару, кошик, оформлення замовлення
• Валідація initData на стороні Бітрікс з захистом від підробки
• Прив'язка Telegram-користувача до покупця в Бітрікс (через UF_TELEGRAM_ID)
• REST API: каталог, кошик, замовлення, статуси, сповіщення
• (Опціонально) Інтеграція Telegram Payments для оплати одним дотиком
• Сповіщення покупцю через бота: зміна статусу замовлення, промокоди
• Документація по API та інструкція з експлуатації
• Навчання адміністраторів роботі з панеллю управління
• Підтримка протягом 30 днів після запуску

Терміни розробки

Вартість розраховується індивідуально після аналізу вашого каталогу та вимог. Замовте інтеграцію — ми підготуємо комерційну пропозицію протягом 1-2 днів. Отримайте консультацію досвідченого інженера безкоштовно.

Наші гарантії: фіксована вартість на кожному етапі, прозорі терміни, здача кожного етапу з підписанням акту. Працюємо з 1С-Бітрікс, починаючи з актуальних версій, підтримуємо обмін CommerceML, REST API та високонавантажені каталоги до 500 000 товарів. Зв'яжіться з нами для оцінки вашого проекту.

Як відкриті лінії змінюють комунікацію?

Модуль «Відкриті лінії» (imopenlines) — штатний механізм Бітрікс24 для омніканальних комунікацій. Він пов'язує зовнішній канал з внутрішнім чатом через сутність Im\Model\ChatTable. Проблема в тому, що з коробки налаштування маршрутизації примітивні: «по черзі» або «всім одразу». Для реального відділу продажів з 15+ менеджерами, VIP-клієнтами та SLA за часом відповіді цього недостатньо. Ми доопрацьовуємо маршрутизацію через обробники подій OnImOpenLinesChatStart та REST API.

Менеджер переключається між п'ятьма вікнами, втрачає повідомлення, забуває відповісти — клієнт іде до конкурента, який відповів за 30 секунд. Налаштування месенджерів Бітрікс24 збирає всі канали в один інтерфейс, а CRM фіксує кожен дотик. Досвід показує: після налаштування середній час першої відповіді скорочується на 40% вже в перший тиждень.

Як ми реалізуємо інтеграцію месенджерів

Підключаємо Telegram, WhatsApp, Viber, VK, онлайн-чат, Email та інші канали через штатні конектори або REST API. Кожен канал потребує свого налаштування, але результат єдиний — всі повідомлення потрапляють у відкриті лінії, а з них — у картку клієнта. Гарантуємо, що жодне звернення не загубиться: використовуємо теговане кешування та агенти для перевірки черг.

Як підключити WhatsApp до Бітрікс24?

WhatsApp — головний бізнес-канал. Інтеграція через WhatsApp Business API з верифікованим акаунтом. Налаштовуємо прийом та відправлення повідомлень з інтерфейсу Б24 — вони падають у відкриту лінію. Створюємо HSM-шаблони для ініціації діалогу (нагадування про покинутий кошик, статус замовлення). Шаблони проходять модерацію Meta — закладайте 2-3 дні. Забезпечуємо передачу файлів, зображень, документів. Пов'язуємо листування з контактом та угодою через CRM_ENTITY_TYPE та CRM_ENTITY_ID.

Telegram: безкоштовний канал з високим охопленням

Telegram Bot API безкоштовний і добре документований — приємна рідкість серед месенджерів. Інтеграція в Бітрікс24 виконується через конектор imopenlines. Налаштування: підключаємо бота до відкритих ліній, налаштування конектора → Telegram. Прийом повідомлень, фото, відео, документів — все маппиться в чат Б24. Inline-кнопки та reply-клавіатури для навігації. Webhook для реєстрації конектора. Інтеграція з CRM: вхідне повідомлення створює лід через crm.lead.add або активність в угоді.

Telegram незамінний для:

• Підтримки через бота — типові питання закриваються без оператора (до 70% звернень).
• Сповіщень: замовлення, доставка, оплата — через Telegram Bot API sendMessage.
• Збору лідів: бот задає кваліфікуючі питання → створює лід.

Viber та VK: аудиторія 35+ та соцмережа

Viber тримає позиції в регіонах. Підключаємо бізнес-акаунт через конектор відкритих ліній. Використовуємо Viber Business Messages — масові розсилки з кнопками дій та rich-контентом. Прийом та відправлення з CRM працюють одразу.

VK (ВКонтакті) — найбільша соцмережа. Інтеграція через конектор imopenlines повідомлень спільноти. Обробка повідомлень та коментарів з єдиного інтерфейсу. Автостворення ліда — обробник OnImOpenLinesCrmCreate. Інтеграція з VK Рекламою для трекінгу джерел через UTM. Бот для авто-відповідей — VK Bot API + Callback API.

Чому важлива правильна маршрутизація звернень?

Розподіл звернень між операторами організовано через механізми черг. За замовчуванням — «хто вільний». У реальності потрібно складніше:

• Визначення відповідального за номером або email з CRM — im.chat.get + пошук по crm.contact.list.
• Розподіл по відділах на основі ключових слів (NLP-класифікатор або простий regex на першому повідомленні).
• Пріоритетна черга для VIP — по сегменту в CRM.
• Ескалація при таймауті 5 хвилин — автопереключення на наступного.
• Перехід на дзвінок прямо з чату — telephony.externalcall.register.

Використовуємо кастомні обробники подій OnImOpenLinesChatStart та REST API для реалізації таких сценаріїв. Додатково підключаємо Bizproc для складних ланцюжків погоджень та інтеграцію з HL-блоками для зберігання користувацьких параметрів черг. Результат: клієнт не чекає, оператор не перевантажений.

Що входить у роботу з інтеграції месенджерів

Чат-боти: сценарні та з NLP

Типи

Сценарні (rule-based): кнопкове меню, дерево рішень. «Як оплатити» → «Де моє замовлення» → «Години роботи». Передача на оператора при intent == 'unknown' → transfer_to_queue. Надійно, передбачувано, покриває 60-70% типових звернень.

З NLP: вільний текст на українській або російській. Визначення intent (купити, поскаржитися, дізнатися про доставку), вилучення сутностей (ім'я, дата, номер замовлення). Контекстний діалог — пам'ятає, про що говорили. Реалізуємо на Rasa або Dialogflow, інтеграція з Б24 через REST.

use Bitrix\Main\Loader;
use Bitrix\Imopenlines\Model\SessionTable;

Loader::includeModule('imopenlines');

$eventManager = \Bitrix\Main\EventManager::getInstance();
$eventManager->addEventHandler('imopenlines', 'OnImOpenLinesMessageReceive', function($event) {
    $message = $event->getParameter('message');
    $chatId = $event->getParameter('chatId');
    
    if (preg_match('/статус заказа (\d+)/i', $message, $matches)) {
        $orderId = $matches[1];
        // Отримуємо статус замовлення через API
        $order = \Bitrix\Sale\Order::load($orderId);
        if ($order) {
            $status = $order->getField('STATUS_ID');
            \Bitrix\ImOpenLines\Chat::sendMessage($chatId, 'Ваш заказ №' . $orderId . ' в статусе: ' . $status);
        }
    }
});

Сценарії та реальний ефект

Порівняння: сценарний бот обробляє запити в 5 разів швидше оператора, а NLP-бот знижує fallback rate до 15% після навчання на реальних діалогах. Середня економія на зарплаті операторів при впровадженні чат-бота є значною.

Процес розробки

1. Аналіз звернень — вивантажуємо історію з відкритих ліній, кластеризуємо за темами. Визначаємо 80% типових запитів.
2. Проектування діалогів — карта на miro/figma. Кожна гілка закінчується або відповіддю, або передачею оператору.
3. Розробка — логіка, інтеграція з CRM та зовнішніми API. Для сценарних — кінцевий автомат на станах. Для NLP — pipeline: tokenizer → featurizer → classifier → response selector.
4. Навчання NLP — на реальних діалогах (не менше 500 прикладів). Налаштування threshold confidence.
5. Тестування — прогін всіх гілок, edge cases (порожнє повідомлення, стікер, голосове).
6. Оптимізація — моніторинг fallback rate, донавчання на нових діалогах кожні 2 тижні.

Терміни

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