Telegram Business Assistant

Панель управления SaaS CRM

Войдите через Telegram для авторизации в системе.

Пользователь

@username

🌟

Активация подписки

Для продолжения работы требуется подписка.
Стоимость: 250 Telegram Stars за 30 дней.

Подключение Telegram Business

Проверка...

Подключите бота к своему личному профилю:

Перейдите в профиль бота и нажмите Start.
Перейдите в Настройки (Settings) > Telegram Business > Bots (Боты).
Выберите нашего бота и подтвердите подключение.

Привязка группы (Support Group)

Ожидание...

Настройте группу, в которую будут пересылаться сообщения:

Создайте новую группу (или выберите существующую).
В настройках группы включите режим "Темы" (Topics/Forum).
Добавьте нашего бота в группу в качестве администратора (дайте права на управление темами).
Перейдите в группу и отправьте команду /setgroup.

Создать быстрый ответ

Команда (например, /price):

Текст шаблона:

Ваши шаблоны

Загрузка шаблонов...

🔑

Интеграционный токен (API Key)

Используйте этот токен для авторизации запросов от вашей внешней CRM.

🔗

Настройка CRM Webhook URL

URL-адрес для уведомлений о новых сообщениях:

Документация разработчика

1. Получение уведомлений (Bot -> CRM Webhook):
При получении нового сообщения от клиента, бот отправит POST запрос на указанный вами Webhook URL с телом (JSON):

// Bot -> CRM Webhook Payload
{
  "event": "message",
  "business_connection_id": "conn_5e8f49ac",
  "message": {
    "message_id": 14502,
    "from_user_id": 12345678,
    "chat_id": 12345678,
    "text": "Salom! Narxlarni bilmoqchi edim.",
    "type": "text"
  }
}

2. Ответ клиенту (CRM -> Bot API):
Сделайте POST запрос на адрес:

POST https://<your-domain>/api/integration/send-message

Headers:
  Authorization: Bearer <YOUR_API_KEY>
  Content-Type: application/json

Body (JSON):
{
  "customer_chat_id": "CLIENT_CHAT_ID",
  "text": "Текст вашего ответа"
}

💬

Тест-драйв API (Демо-чат в стиле Telegram)

Введите ваш API Key, чтобы подключить интерактивный демо-чат. Это покажет, как ваши операторы будут общаться с клиентами из вашей CRM.

Выберите чат

Выберите чат из списка слева, чтобы начать переписку.

💾

Готовый код виджета для вашей CRM (HTML/JS)

Скопируйте этот готовый файл, чтобы мгновенно внедрить полноценный виджет чата в вашу CRM-систему:

<!-- Сохраните этот код как chat-widget.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CRM Chat Widget</title>
  <style>
    :root {
      --bg: #0f172a; --border: rgba(255,255,255,0.08); --primary: #3b82f6;
      --text: #f8fafc; --text-muted: #64748b; --incoming: #202c33; --outgoing: #005c4b;
    }
    body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
    .widget { display: flex; height: 100vh; overflow: hidden; }
    .sidebar { width: 300px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
    .chat-area { flex: 1; display: flex; flex-direction: column; background: #0b141a; }
    .chat-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: bold; }
    .msg-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
    .msg { max-width: 70%; padding: 8px 12px; border-radius: 12px; font-size: 0.9rem; }
    .msg.in { align-self: flex-start; background: var(--incoming); border-bottom-left-radius: 4px; }
    .msg.out { align-self: flex-end; background: var(--outgoing); border-bottom-right-radius: 4px; }
    .input-form { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
    .input-form input { flex: 1; padding: 10px; background: #020617; border: 1px solid var(--border); border-radius: 8px; color: #fff; }
    .input-form button { padding: 10px 16px; background: var(--primary); color: #fff; border: none; border-radius: 8px; cursor: pointer; }
    .chat-item { padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
    .chat-item:hover { background: rgba(255,255,255,0.02); }
  </style>
</head>
<body>
  <div class="widget">
    <div class="sidebar">
      <div style="padding: 12px; font-weight: bold;">Telegram Chats</div>
      <div id="chats"></div>
    </div>
    <div class="chat-area">
      <div class="chat-header" id="active-chat-title">Выберите чат</div>
      <div class="msg-list" id="messages"></div>
      <form class="input-form" onsubmit="sendMsg(event)">
        <input type="text" id="msg-input" placeholder="Напишите ответ..." disabled>
        <button type="submit" id="send-btn" disabled>Отправить</button>
      </form>
    </div>
  </div>

  <script>
    const API_KEY = "YOUR_API_KEY";
    const API_BASE = "https://your-domain.com/api/integration";
    let activeChatId = null;

    async function req(url, options = {}) {
      const res = await fetch(API_BASE + url, {
        ...options,
        headers: { "Authorization": `Bearer ${API_KEY}`, "Content-Type": "application/json", ...options.headers }
      });
      return res.json();
    }

    async function loadChats() {
      const data = await req("/chats");
      const box = document.getElementById("chats");
      box.innerHTML = data.map(c => `
        <div class="chat-item" onclick="openChat('${c.telegram_chat_id}', '${c.first_name}')">
          <div style="font-weight:bold">${c.first_name}</div>
          <div style="color:gray; font-size:0.8rem;">${c.last_message ? c.last_message.text : ""}</div>
        </div>
      `).join("");
    }

    async function openChat(chatId, name) {
      activeChatId = chatId;
      document.getElementById("active-chat-title").innerText = name;
      document.getElementById("msg-input").disabled = false;
      document.getElementById("send-btn").disabled = false;
      
      const msgs = await req(`/chats/${chatId}/messages`);
      const box = document.getElementById("messages");
      box.innerHTML = msgs.map(m => `
        <div class="msg ${m.is_from_business ? 'out' : 'in'}">${m.text}</div>
      `).join("");
      box.scrollTop = box.scrollHeight;
    }

    async function sendMsg(e) {
      e.preventDefault();
      const input = document.getElementById("msg-input");
      const text = input.value.trim();
      if (!text || !activeChatId) return;

      const res = await req("/send-message", {
        method: "POST",
        body: JSON.stringify({ customer_chat_id: activeChatId, text })
      });
      if (res.success) {
        input.value = "";
        openChat(activeChatId, document.getElementById("active-chat-title").innerText);
      }
    }

    loadChats();
    setInterval(() => { if (activeChatId) openChat(activeChatId, document.getElementById("active-chat-title").innerText); else loadChats(); }, 5000);
  </script>
</body>
</html>