Первоначально задача создания Telegram-бота для клиента возникла в рамках подготовки компании к отраслевой выставке в Москве. Однако клиенту нужен был, в том числе, полноценный инструмент, который будет работать и после мероприятия.

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

Чтобы сделать взаимодействие с ботом более живым и запоминающимся, мы добавили небольшой элемент геймификации. При первом запуске пользователя встречает приветственное сообщение с видео-презентацией. Также мы разработали уникальный геймификационный функционал, защищённый соглашением о неразглашении (NDA).

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

Так как это Telegram-бот, его дизайн мы сильно изменить не можем. Но каталог мы верстали отдельно, он представлен в виде Web App приложения, которое открывается в Telegram. Это позволило обойти ограничения мессенджера и реализовать удобный пользовательский интерфейс. При разработке дизайна мы использовали Tailwind CSS для быстрой и гибкой разработки.

Мы делали дизайн каталога сразу в мобильной версии, учли наличие тёмной и светлой темы.

В результате получился интуитивный каталог с карточками товаров и формой заявки.

Для управления всей системой была разработана отдельная админка — полноценный интерфейс с возможностью редактирования каталога, текстов сообщений, запуска рассылок, а также отслеживания действий пользователей в режиме реального времени. Когда пользователь оставляет заявку, она не только попадает в админку, но и моментально уходит менеджеру в Telegram. Это позволяет отвечать максимально быстро, поддерживать контакт и не терять клиентов.

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

В форме обратной связи можно оставить ИНН, e-mail, номер телефона — а если каких-то данных нет под рукой, их можно просто пропустить, поставив минус. Все поля проверяются, а перед отправкой пользователь подтверждает согласие на обработку персональных данных.

Мы сделали современный и компактный инструмент, который стал частью ежедневной работы команды клиента. Telegram-бот помогает быстро информировать клиентов, принимать заказы и поддерживать контакт, оставаясь при этом лёгким, мобильным и интуитивным в использовании.

Дизайн

• Tailwind CSS

Стек технологий

• Backend: Node.js
• Database: PostgreSQL
• Frontend (WebApp): HTML, JavaScript, CSS

• Проджект-менеджер
• Тимлид,
• Дизайнер,
• Разработчики,
• Тестировщик