Интеграция с сайтом, мессенджерами и CRM

Введение

AI-ассистент — это не изолированный инструмент. Чтобы получить максимальную пользу, его нужно интегрировать во все точки контакта с клиентом: сайт, мессенджеры, CRM. В этом уроке мы создадим единую систему.

Общая схема интеграции

Клиент обращается:
    ↓
[Сайт] → [Telegram] → [WhatsApp] → [ВКонтакте]
    ↓
        AI-ассистент (OpenAI API)
    ↓
    [CRM / Google Sheets / Email]
    ↓
        Менеджер получает лида

Интеграция 1. Веб-виджет на сайт

Способ 1. Готовые сервисы (быстро, но платно)

Tidio:

1. Регистрация на tidio.com

2. В настройках подключить OpenAI API

3. Скопировать код виджета

4. Вставить код на сайт перед закрывающим тегом </body>

Код виджета Tidio:

<script src="//code.tidio.co/ваш_ключ.js" async></script>

Elfsight:

1. Создать виджет в elfsight.com

2. Выбрать тип «AI Chat Widget»

3. Настроить промпт

4. Скопировать код

5. Вставить на сайт

Способ 2. Собственный виджет (сложно, но бесплатно)

Создайте простой HTML-виджет, который отправляет запросы к вашему API.

<!-- Вставить в любое место сайта -->
<div id="ai-chat" style="position: fixed; bottom: 20px; right: 20px; width: 300px;">
  <div id="chat-header" style="background: #0088cc; color: white; padding: 10px;">
    Чат с поддержкой
  </div>
  <div id="chat-messages" style="height: 300px; overflow-y: auto; background: white; border: 1px solid #ccc;">
  </div>
  <input id="chat-input" placeholder="Напишите вопрос..." style="width: 100%; padding: 10px;">
</div>

<script>
  const chatInput = document.getElementById('chat-input');
  const chatMessages = document.getElementById('chat-messages');
  
  async function sendMessage() {
    const message = chatInput.value;
    // Добавляем сообщение клиента в чат
    chatMessages.innerHTML += `<div><b>Вы:</b> ${message}</div>`;
    
    // Отправляем запрос к вашему бэкенду
    const response = await fetch('https://your-api.com/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: message })
    });
    
    const data = await response.json();
    // Добавляем ответ ассистента
    chatMessages.innerHTML += `<div><b>Ассистент:</b> ${data.answer}</div>`;
    chatInput.value = '';
  }
  
  chatInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') sendMessage();
  });
</script>

Интеграция 2. Telegram бот

Пошаговая настройка через Make (без кода):

1. Создать бота через @BotFather (см. урок 3)

2. В Make создать новый сценарий

3. Добавить модуль Telegram → Watch Updates

4. Вставить токен бота

5. Добавить модуль OpenAI → Complete Conversation

6. Вставить API-ключ OpenAI

7. Вставить системный промпт (из урока 4)

8. Добавить модуль Telegram → Send Message

9. Включить сценарий

Готово! Бот отвечает автоматически.

Как добавить клавиатуру в Telegram бота:

{
  "reply_markup": {
    "keyboard": [
      [{"text": "Каталог"}, {"text": "Цены"}],
      [{"text": "Доставка"}, {"text": "Контакты"}]
    ],
    "resize_keyboard": true
  }
}

Интеграция 3. WhatsApp (сложнее, есть ограничения)

Проблема: WhatsApp не даёт просто так создать бота. Нужно использовать официальный WhatsApp Business API или неофициальные решения.

Варианты для WhatsApp:

Рекомендация: Начинайте с Telegram — он проще и бесплатен. WhatsApp подключайте, когда поймёте, что это нужно вашим клиентам.

Интеграция 4. ВКонтакте (VK)

ВКонтакте позволяет создавать сообщества и подключать к ним ботов.

Пошаговая настройка бота ВКонтакте:

1. Создайте сообщество ВК

2. Перейдите в Управление → Сообщения → Настройки для ботов

3. Включите «Возможности ботов»

4. Получите токен сообщества

5. В Make используйте модуль VK → Get Messages

6. Настройте ответ через OpenAI → Send Message

Интеграция 5. Автоматическая передача в CRM

Схема передачи лида:

Клиент оставляет контакты в диалоге с AI
    ↓
AI распознаёт номер телефона и имя
    ↓
Make/Zapier создаёт сделку в CRM
    ↓
Менеджер получает уведомление (Telegram/email)
    ↓
Менеджер связывается с клиентом

Настройка через Make (AmoCRM):

1. Триггер: Telegram → New Message

2. Фильтр: Текст содержит номер телефона (regex \+?\d{10,12})

3. Парсинг: Извлечь имя и телефон из текста

4. Действие: AmoCRM → Create Lead

5. Поля:

   • Name → {{имя}}

   • Phone → {{телефон}}

   • Status → «Новый лид от AI»

6. Действие: Telegram → Send Message менеджеру

Уведомление менеджеру в Telegram:

🔔 НОВЫЙ ЛИД ОТ AI-АССИСТЕНТА

Имя: {{имя}}
Телефон: {{телефон}}
Товар: {{товар}}
Бюджет: {{бюджет}}

Свяжитесь с клиентом в ближайшее время!

Полная архитектура готового решения

┌─────────────────────────────────────────────────────────────┐
│                        КЛИЕНТ                                │
└─────────────────────────────────────────────────────────────┘
         │              │              │              │
         ↓              ↓              ↓              ↓
    [Сайт]        [Telegram]     [WhatsApp]       [ВК]
    (виджет)        (бот)          (бот)          (бот)
         │              │              │              │
         └──────────────┼──────────────┼──────────────┘
                        ↓
                  ┌──────────┐
                  │   Make   │ ← платформа автоматизации
                  │   или    │
                  │  Zapier  │
                  └──────────┘
                        │
            ┌───────────┼───────────┐
            ↓           ↓           ↓
      ┌──────────┐ ┌──────────┐ ┌──────────┐
      │ OpenAI   │ │ Google   │ │  AmoCRM  │
      │   API    │ │ Sheets   │ │ Bitrix24 │
      └──────────┘ └──────────┘ └──────────┘
            │           │           │
            └───────────┼───────────┘
                        ↓
              Менеджер получает лида

Бюджет на полную интеграцию (месяц):

Резюме урока

Вы можете подключить AI-ассистента ко всем каналам коммуникации:

• Сайт — через виджет (Tidio или самодельный)

• Telegram — бесплатный бот за 15 минут

• WhatsApp — сложнее, лучше начинать с Telegram

• ВКонтакте — через сообщества

• CRM — автоматическая передача лидов через Make

Полноценная система обойдётся примерно в 1200₽ в месяц.

Контрольные вопросы

1. Какие есть способы добавить AI-ассистента на сайт?

2. Как создать Telegram-бота и подключить к нему AI?

3. Почему WhatsApp сложнее Telegram для интеграции?

4. Как настроить автоматическую передачу лидов в CRM?

5. Сколько стоит полная интеграция всех каналов в месяц?