Виджет заявок на сайт с CRM и перепиской: как превратить форму в диалог
Обычная форма на сайте — это чёрный ящик: клиент нажал «Отправить» и ждёт, пока его письмо кто-то прочитает и вручную перенесёт в CRM. Виджет заявок ЦУП ААТех делает иначе: форма на вашем сайте и карточка на доске — это одна и та же сущность, а клиент может вести переписку с вами прямо внутри тикета.
Статья о виджете для сайта, интеграции с CRM, переписке в заявке, уведомлениях на почту и установке на Tilda, WordPress, Битрикс.
Зачем виджет, а не обычная форма
Классическая форма обращения на сайте — <form action="mailto:...">, самописная форма HTML на PHP или плагин «обратной связи» — решает одну задачу: отправить письмо. Всё остальное команда делает вручную.
Типичная цепочка обработки заявки с сайта без виджета:
- Клиент заполнил форму — письмо улетело на info@.
- Секретарь увидел письмо, открыл CRM, скопировал данные руками.
- Менеджер получил задачу — созвонился с клиентом.
- Клиент вспомнил, что нужно уточнить, и написал ещё раз на ту же почту.
- Никто не связал второе письмо с первым — в CRM появился дубль.
- Через неделю менеджер увольняется, история переписки теряется.
Итог: потерянные заявки, задержка ответа на часы и дни, недовольный клиент, который пошёл к конкуренту. Самое дорогое, что может случиться с бизнесом — как увеличить конверсию сайта, который приводит 100 заявок, если половина из них пропадает в ящике info@.
Виджет заявок для сайта от ЦУП ААТех убирает всю ручную обработку. Как только посетитель нажал «Отправить», в CRM уже лежит карточка с правильным типом, на нужной доске, в стартовой колонке, с автоматически подписанными менеджерами. Клиенту улетает вежливое подтверждение и ссылка на личный кабинет, где он видит статус своей заявки и может писать уточнения. Никакого Excel, никакого «перешлите мне снова, потерялось».
Главная идея
Обычная форма на сайте — это труба в почту. Виджет заявок ЦУП ААТех — входная точка в производственный процесс: форма, CRM-карточка, подписчики, личный кабинет и переписка — одна связка.
Заявка уходит в CRM — автоматом
Главная польза виджета — честная интеграция сайта с CRM, без ручных копипастов. За 200 миллисекунд после нажатия «Отправить» происходит вот это:
- 1Данные формы летят на защищённый endpoint
POST /api/v1/public/widget/submitс вашим API-ключом в заголовкеX-Widget-Key. - 2Сервер валидирует ключ, проверяет rate-limit, санирует поля и создаёт карточку типа «Входящий запрос» — отдельный тип с голубым цветом, чтобы заявки с сайта мгновенно различались на доске.
- 3Карточка попадает на доску, которую вы выбрали при настройке виджета, в стартовую колонку («Новая заявка», «Входящие», «Первичный контакт» — как назовёте).
- 4В карточке сохраняются имя, email, телефон, сообщение, источник
source: 'widget'и ID конфигурации виджета — можно понять, с какого лендинга пришёл клиент, даже если виджетов у вас десяток. - 5Подписчики из списка
notifyUserIdsполучают push-уведомление и карточку в разделе «Уведомления» — заявка не потеряется. - 6В истории карточки фиксируется событие «Создана из виджета» — неизменяемая запись, по которой спустя месяцы можно восстановить картину.
Настройка делается один раз в интерфейсе ЦУП ААТех — без кода и без разработчика. Менеджер самостоятельно выбирает:
- пространство и доску для заявок (например, «Продажи → Новые заявки»);
- стартовую колонку, в которую падают новые обращения;
- заголовок карточки по умолчанию — с шаблоном вида «Заявка с сайта от {name}»;
- сотрудников, которым уведомлять о новых обращениях;
- тему оформления формы (Классика, Корпоратив, Мягкая, Тёмная, Контраст) и основной цвет;
- заголовок, описание и текст кнопки формы.
Безопасность ключей
Каждый виджет работает по своему API-ключу с префиксом wk_.... В базе данных хранится только SHA-256 хэш ключа — даже утечка базы не раскроет действующий ключ. Если ключ скомпрометирован, одна кнопка «Регенерировать» — и старый ключ мгновенно перестаёт работать.
Переписка в заявке — не чат, а диалог в тикете
Тут принципиальное отличие от живых чатов с клиентом на сайт. Jivo, Tawk, Chatra, битрикс-виджет — все они про реальное время: оператор должен сидеть у экрана и отвечать сразу, иначе клиент уходит. Это модель B2C-магазина: «здесь и сейчас, или я иду к конкуренту».
В B2B, в производстве, в проектных продажах всё иначе. Клиент пишет «интересует партия 500 штук, нужен КП до пятницы» — это не чат, а тикет. Менеджер должен согласовать цену с закупками, дождаться ответа производства, собрать коммерческое — и вернуться через день-два. Чат-окно с мигающей точкой «оператор печатает...» здесь только мешает.
Виджет ЦУП ААТех реализует модель заявка = тикет с перепиской:
- После отправки формы клиент получает email со ссылкой на личный кабинет клиента.
- Вход без паролей — по 6-значному OTP-коду на email.
- В кабинете клиент видит свою карточку, статус, все комментарии менеджеров.
- Может дописать уточнение, прикрепить файл (до 10 вложений, 50 МБ каждое), задать вопрос.
- Менеджер видит тот же диалог в карточке на доске CRM — ничего не теряется.
- Каждый ответ менеджера улетает клиенту на email с кнопкой «Ответить».
- Клиент может ответить с почты или из кабинета — комментарий появляется в карточке.
Технически это реализовано на специальной роли client. У клиента нет доступа к вашим внутренним доскам, сотрудникам и настройкам — он видит только конкретные карточки, которые открыли ему через entity-level permissions. Multi-tenant изоляция гарантирована на уровне каждого SQL-запроса: один клиент никогда не увидит заявку другого.
Для клиента всё выглядит знакомо — обычная форма в стиле сайта. Но за ней стоит полноценный тикет-системный диалог, а не «ушло письмо и привет».
Уведомления на почту — и у вас, и у клиента
Уведомление о получении заявки — самая критичная точка в отношениях с клиентом. Если подтверждения нет 2-3 часа, клиент уже сомневается, что его услышали, и идёт к конкуренту. Виджет ЦУП ААТех решает это на двух уровнях.
Клиенту
- «Заявка #123 принята» — мгновенно после отправки.
- Email на каждый комментарий менеджера.
- Уведомление о смене статуса карточки.
- В каждом письме —
List-Unsubscribeдля отписки.
Команде
- Push в приложение всем подписчикам виджета.
- Карточка в разделе «Уведомления» и «Мои задачи».
- Сообщение в Telegram-канал (если подключён).
- Еженедельный дайджест директору.
Важный нюанс: email-уведомления не дублируют реал-тайм. Если клиент уже открыл личный кабинет и прочитал комментарий — письмо ему не уйдёт. Принцип «не спамить активного пользователя», как в нормальных современных мессенджерах.
Чем отличается от Jivo, битрикс-виджета и обратного звонка
Все эти инструменты про одно и то же на первый взгляд — «оставить заявку с сайта». Но модели работы у них разные. Сравним.
| Параметр | Обратный звонок | Jivo / Tawk | Битрикс-виджет | Виджет ЦУП ААТех |
|---|---|---|---|---|
| Интеграция с CRM | нет | через API/Zapier | только с Битрикс24 | встроенная: заявка → карточка |
| Переписка с клиентом | только звонок | живой чат | чат + тикеты | тикет с перепиской + email |
| Работа 24/7 | нет, по расписанию | при наличии оператора | при наличии оператора | асинхронно, клиент пишет когда удобно |
| Защита от спама на форму | слабая | rate-limit | есть | IP + email + валидация |
| Личный кабинет клиента | нет | нет | нет | есть, с историей и файлами |
| Вложения в заявке | нет | ограничены | есть | до 10 файлов, 50 МБ |
| Цена | от 990 ₽/мес | от 990 ₽/мес | от 2990 ₽/мес | в подписке ЦУП ААТех |
Главное отличие: виджет — не отдельный продукт, а входная точка в CRM. Вы не платите за второй сервис «для сайта», не склеиваете его через Zapier, не копируете данные между системами. Форма на сайте и доска в CRM — это одно целое.
Второе отличие — модель работы. Обратный звонок и Jivo рассчитаны на «прямо сейчас, пока клиент на сайте». Битрикс-виджет — тоже реальное время. Виджет ЦУП работает как профессиональная служба поддержки: вы не обязаны отвечать в секунду, но обязаны ответить в тикете — и у клиента есть гарантия, что его сообщение не потерялось.
Как установить на сайт
Интеграция — одна строчка кода. Виджет работает на любом сайте, поддерживающем вставку JS: Tilda, WordPress, Битрикс, Joomla, статический HTML, React, Next.js, Vue — проверено на всех.
<script src="https://app.aatex.ru/widget/v1/widget.js" data-key="wk_ваш_ключ" ></script>
Tilda (виджет обратной связи тильда)
- В настройках виджета в ЦУП ААТех скопируйте embed-код.
- В Tilda добавьте блок T123 HTML-код в нужном месте страницы.
- Вставьте код и сохраните.
- Опубликуйте страницу — форма появится в точке вставки.
WordPress
- Gutenberg — блок «Пользовательский HTML», вставьте embed-код.
- Классический редактор — вкладка «Текст», код в HTML.
- В шаблон — плагин Insert Headers and Footers или Code Snippets.
Битрикс
- В визуальном редакторе переключитесь в режим «Код».
- Вставьте embed-код в нужное место HTML.
- Сохраните. Виджет работает внутри вёрстки без конфликтов — Shadow DOM изолирует стили.
React / Next.js
'use client';
import Script from 'next/script';
export function ContactForm() {
return (
<Script
src="https://app.aatex.ru/widget/v1/widget.js"
data-key="wk_ваш_ключ"
strategy="lazyOnload"
/>
);
}Защита от спама встроена
- Rate-limit по IP — не более 10 обращений в час.
- Rate-limit по email — не более 3 обращений в час.
- Валидация email-формата на клиенте и сервере.
- Опционально — honey-pot или reCAPTCHA v3 в настройках.
FAQ: виджет формы для сайта
+Как защититься от спама на форме?
Виджет использует трёхуровневую защиту. Первый — rate-limit по IP-адресу: не более 10 заявок в час с одного IP. Второй — rate-limit по email: не более 3 заявок в час на один email. Третий — валидация формата email и санация полей. Для сайтов с высоким трафиком можно подключить reCAPTCHA v3 или honey-pot поле в настройках виджета.
+Можно ли использовать виджет обратной связи на Tilda?
Да. Скопируйте embed-код из настроек виджета в ЦУП ААТех и вставьте его в блок T123 (HTML-код) в Tilda. Виджет встраивается через Shadow DOM — CSS Tilda и стили формы не конфликтуют, вёрстка страницы не ломается.
+Можно ли стилизовать форму под брендбук сайта?
Да. В настройках виджета выбирается тема (Классика, Корпоратив, Мягкая, Тёмная, Контраст), основной цвет, заголовок формы, описание, текст кнопки и сообщение об успешной отправке. Для сложной кастомизации доступен CSS override через переменные виджета.
+Что произойдёт, если форма HTML уже есть на сайте?
Ничего — виджет работает независимо. Можно оставить старую форму html как бэкап-канал, а новую (виджет) подключить как основную точку входа. Обычно после недели параллельной работы старую форму убирают — виджет надёжнее и не требует ручной обработки.
+Подходит ли виджет как онлайн-консультант для сайта?
Зависит от модели. Если вы B2C-магазин и нужен живой чат в реальном времени — лучше Jivo или Tawk. Если вы B2B-производство, проектный бизнес, сложные услуги с длинным циклом сделки, где важна фиксация обращения и история переписки — виджет ЦУП подходит лучше: это тикет-система, а не чат.
+Работает ли виджет на мобильных?
Да. Адаптивная вёрстка, поддержка тёмной темы, тач-жесты, корректная работа с виртуальной клавиатурой — поля не перекрываются на iOS и Android.
+Как посетитель заходит в личный кабинет без регистрации?
По OTP — одноразовому коду на email. Клиент вводит свой email, получает 6-значный код, входит. Без паролей, без «зарегистрируйтесь на нашем сайте». Это стандарт для современных SaaS — Notion, Figma, Vercel используют тот же подход.
+Есть ли API для своей интеграции вместо виджета?
Да. Endpoint POST /api/v1/public/widget/submit с X-Widget-Key принимает JSON и создаёт карточку — можно отправлять заявки из своего фронта, из Telegram-бота, из чужой CRM, из скриптов. Виджет.js — просто удобная обёртка над этим API.
+Сколько виджетов можно создать?
Без лимита. Каждый виджет — отдельный API-ключ, отдельная доска/колонка, отдельный список подписчиков. Удобно делить трафик: «Заявки с лендинга А», «Заявки с лендинга Б», «Обращения в техподдержку», «Вопросы дистрибьюторам» — все в одной CRM, но в своих потоках.
+Какие уведомления на почту с сайтов приходят клиенту?
Первое письмо — подтверждение получения заявки. Затем — на каждый комментарий менеджера. Отдельно — уведомления о смене статуса карточки (например, «В работе», «Готовим КП», «Закрыта»). Клиент может отписаться от части уведомлений одним кликом в футере письма.
Виджет — это часть ЦУП ААТех
Без отдельной оплаты, без Zapier, без «ещё одного сервиса». Форма на сайте и доска в CRM — это одно целое. Заявка с сайта в CRM попадает мгновенно, клиент ведёт переписку в тикете, вы не теряете ни одного обращения.