Сайт провайдера, где клиент оставляет заявку голосом, а маркетолог правит цены из Telegram

Кейс лендинга интернет‑провайдера: голосовой AI-консультант сам заводит заявку в биллинге, а весь контент редактируется из Telegram — без CMS, базы данных и разработчика.

Представьте сайт интернет‑провайдера, к которому нельзя прикоснуться без разработчика. Поменять цену тарифа к выходным — заявка в поддержку, ожидание, деплой. Добавить новость об акции — то же самое. А первая линия поддержки в это время вручную перепечатывает в биллинг заявки, которые люди надиктовывают по телефону: «Здравствуйте, хочу подключиться, вот адрес, вот тариф».

Так выглядел старт проекта для волгоградского провайдера «РоборНЭТ». Статичный сайт‑визитка, любое движение — через программиста, поддержка занята рутиной вместо работы с клиентами. Задача звучала просто, но била в три болевые точки сразу:

  1. Сделать сайт, который выглядит как продукт 2026 года, а не как визитка 2011-го.
  2. Дать маркетингу править тарифы, новости и акции самостоятельно, без разработчика.
  3. Снять нагрузку с поддержки — большинство обращений это «какой тариф выбрать» и «хочу подключиться».

Ниже — как это решилось. Главное в кейсе не 3D-графика на первом экране (хотя она есть), а две вещи, которых на первый взгляд не видно: AI, который сам заводит заявку из голоса, и контент, который живёт вообще без базы данных.

Обновлённый сайт: не визитка, а продукт

Прежде чем перейти к главному, коротко про то, что видит посетитель.

3D вместо стоковой картинки. На первом экране — не фотография из фотобанка, а живая анимированная сцена: вращающийся каркас ракеты в поле частиц, реагирующий на движение мыши. Технически это WebGL-сцена на библиотеке Three.js, но для посетителя это просто ощущение «здесь всё по‑современному». Важная деталь: тяжёлая 3D-графика подгружается с внешнего CDN и не утяжеляет сам сайт — страница остаётся лёгкой и быстрой.

Интерактивный каталог ТВ. Больше 140 телеканалов, разложенных по категориям с превью‑обложками. Клик по категории раскрывает сетку логотипов — не унылый список текстом, а витрина, по которой хочется полистать.

Светлая и тёмная тема. Переключается одним кликом, вся палитра построена аккуратно, без «сломанных» цветов в одном из режимов.

Кнопка «Подключить» на карточке тарифа при этом ведёт не на форму, а сразу открывает AI-чат с уже вписанным вопросом. И вот здесь начинается самое интересное.

Главное №1: голосовой AI, который сам заводит заявку в биллинге

Это центр всего проекта. На сайте живёт AI-консультант, и он умеет два режима: обычный текстовый чат и полноценный голосовой разговор.

Консультанта зовут Алексей. Он знает актуальные тарифы, состав ТВ‑пакетов, контакты и ответы на частые вопросы — причём берёт всё это из тех же живых данных, что видит пользователь на странице. Если маркетолог только что поменял цену через Telegram (об этом ниже), Алексей назовёт новую цену — без всякой пересборки сайта.

В консультанте зашито одно жёсткое правило — один вопрос за раз. Без него модель сваливалась в анкету: «назовите имя, адрес, тариф и телефон». Люди от такого отваливаются. А по одному вопросу — это уже нормальный человеческий диалог, а не форма в три экрана.

Но главное — что происходит в конце разговора.

Клиент поговорил — заявка уже в биллинге

В голосовом режиме человек просто рассказывает своими словами: хочу подключиться, живу там‑то, интересует такой‑то тариф. Консультант отвечает голосом, уточняет по одному вопросу. А параллельно с аудио система копит текстовую расшифровку разговора.

Когда разговор завершается, из этой расшифровки автоматически извлекаются имя, телефон, адрес, тариф и описание вопроса — и уходят прямиком в биллинг как готовая заявка.

Человек просто поговорил с сайтом голосом — и у него уже заведён тикет. Никто ничего не перепечатывал. Поддержка не тратила время на приём и ввод данных. Менеджеру остаётся перезвонить по готовой карточке.

Вот как выглядит этот поток, если упростить до сути:

sequenceDiagram
    participant U as Клиент
    participant W as Сайт (AI-консультант)
    participant G as Голосовая модель
    participant B as Биллинг

    U->>W: «Начать разговор»
    W->>W: спросить доступ к микрофону

    loop Разговор голосом
        U->>W: говорит своими словами
        W->>G: передаёт речь
        G-->>W: отвечает голосом + расшифровка
        W->>U: проигрывает ответ
    end

    U->>W: «Завершить»
    W->>W: разобрать расшифровку<br/>(имя, телефон, адрес, тариф)
    alt данные распознаны
        W->>B: создать заявку
        B-->>U: менеджер перезвонит
    else ничего не распознано
        W->>W: заявку не создаём
    end

Технически под капотом двусторонний стриминг аудио: микрофон режется на кусочки, уходит в модель, ответ приходит обратно голосом и играется в браузере, а расшифровка накапливается параллельно. Но для бизнеса важна не механика, а результат: сайт перестал быть витриной и стал первой линией приёма заявок, которая работает круглосуточно и не устаёт.

Отдельная деталь, которая показывает уровень проработки: доступ к микрофону запрашивается явно, и на каждую возможную проблему — «отказано в доступе», «микрофон не найден», «занят другой программой» — свой понятный текст. Никаких «что‑то пошло не так».

Главное №2: контент правится из Telegram — без CMS и базы данных

Вторая боль из брифа: маркетинг не должен зависеть от разработчика. Классический ответ — поставить CMS с админкой. Но здесь это было бы стрельбой из пушки по воробьям: контента мало, редакторов двое, бюджет на инфраструктуру — ноль.

Решение получилось радикально простым. Весь редактируемый контент сайта — тарифы, новости, вопросы‑ответы и промо‑окно — лежит в четырёх обычных файлах рядом с сайтом. А редактирует их Telegram-бот.

Маркетолог открывает бота с телефона, командой заходит в раздел провайдера, меняет цену тарифа или текст новости — и всё. Правка появляется на сайте при следующей загрузке страницы. Ни деплоя, ни перезапуска сервера, ни разработчика.

flowchart LR
    M["Маркетолог<br/>(телефон)"] -->|"меняет цену / новость"| BOT["Telegram-бот"]
    BOT -->|"перезаписывает"| JSON[("4 файла:<br/>тарифы, новости,<br/>вопросы, промо")]
    JSON -->|"сайт читает при загрузке"| UI["Страница провайдера"]
    JSON -.->|"те же данные"| AI["AI-консультант"]

Обратите внимание на пунктирную стрелку: те же самые файлы, из которых сайт рисует карточки тарифов, читает и AI-консультант. Поэтому когда маркетолог правит цену, она автоматически становится правильной и на странице, и в устах Алексея. Одна правка — согласованность везде.

И ещё важное про надёжность: каждый из четырёх файлов может не загрузиться — сеть подвела, кто‑то сохранил битый текст. На этот случай в сам сайт вшита резервная копия данных на момент последней сборки. Поэтому пустого экрана посетитель не увидит никогда: в худшем случае он увидит чуть более старые цены, но рабочий сайт.

Архитектура, которой не видно

Если собрать всё вместе, вырисовывается любопытная картина. У этого проекта нет базы данных. Нет CMS. Нет админ‑панели. Нет сложной серверной части.

flowchart TB
    subgraph front["Что видит клиент"]
        HERO["3D-первый экран"]
        SECTIONS["Тарифы · ТВ · Новости · FAQ"]
        CHAT["AI-консультант<br/>текст + голос"]
    end

    subgraph data["Контент"]
        JSON[("4 файла +<br/>резервная копия")]
    end

    subgraph ops["Управление"]
        BOT["Telegram-бот"]
        BILL["Биллинг"]
    end

    BOT --> JSON
    JSON --> SECTIONS
    JSON --> CHAT
    CHAT -->|"заявка из голоса"| BILL
    SECTIONS -->|"«Подключить» открывает чат"| CHAT

Вся «инфраструктура» — это несколько текстовых файлов и Telegram-бот. При этом маркетолог правит контент с телефона, а клиент оставляет заявку голосом, и она сама падает в биллинг.

Здесь стоит сказать честно и про ключ доступа к AI-модели: он не зашит в код сайта. Сайт запрашивает его в момент работы через отдельный сервис‑посредник, через который же идёт и весь обмен с моделью. Это значит, что ключ нельзя вытащить из исходников страницы, а поменять его можно, ничего не пересобирая.

Иногда самое инженерное решение — то, которого не видно. Заказчик получает результат: быстрый сайт, самостоятельный маркетинг, разгруженную поддержку. А под капотом — минимум движущихся частей, которые могут сломаться.

Честно: что бы я улучшил

Я всегда показываю не только витрину, но и техдолг — потому что кейс без слабых мест выглядит как реклама, а не как разбор. Вот что в этом проекте сделано «достаточно», но не идеально:

  • Нет автотестов. Сейчас их нет вообще — это осознанный долг. Первым делом покрыл бы тестами два самых хрупких места: загрузку контента из файлов и разбор заявки из расшифровки разговора.
  • Заявка из голоса разбирается по шаблонам. Извлечение имени, телефона и адреса из расшифровки построено на текстовых шаблонах (регулярных выражениях). Работает, но живую речь они ловят не идеально: скажешь адрес нестандартно — можно промахнуться. Правильнее отдать это самой AI-модели, чтобы она возвращала уже структурированные поля. Это следующий логичный шаг.
  • Ручной деплой. Обновление сайта пока выкладывается руками. Простейшая автоматизация выкладки окупится с первого же релиза и уберёт риск человеческой ошибки.

Ни один из этих пунктов не мешает сайту работать сегодня. Но именно из таких мелочей потом складывается разница между «работает» и «работает надёжно годами».

Вывод

Этот кейс — про то, что AI в бизнесе полезнее всего там, где он снимает рутину, а не там, где им хвастаются на главной.

Голосовой консультант ценен не тем, что «на сайте есть нейросеть». Он ценен тем, что забирает у поддержки самую нудную работу: приём и перепечатывание заявок. Клиент поговорил — тикет готов.

А редактирование из Telegram ценно не технологией, а свободой: маркетинг перестаёт стоять в очереди к разработчику и начинает двигаться со скоростью бизнеса. Захотел поменять акцию к пятнице — поменял к пятнице, а не «когда у программиста будет окно».

И всё это — без базы данных, без CMS, без раздутой инфраструктуры. Четыре файла и бот. Иногда именно так и выглядит зрелое инженерное решение.


Как это выглядит

Главный экран сайта с 3D-анимацией

Голосовой режим AI-консультанта

Диалог с AI: рекомендация тарифа и кнопки быстрых ответов

Тарифные планы — кнопка «Подключить» открывает AI-чат

Интерактивный каталог из 140+ телеканалов

Светлая тема

Мобильная версия

Посмотреть вживую

Перейти на сайтrobornet.ru Телеграм‑бот@Smit34AIAssistant_bot

Следующий шаг: хотите сайт, где клиент оставляет заявку голосом, а вы правите цены из Telegram, напишите мне в Telegram.

Комментарии

Войдите через Telegram, чтобы оставить комментарий:

Пока нет комментариев. Будьте первым.