ИИ-поиск по сайту
Как превратить строку поиска на сайте в ИИ-чат
Как подключить ИИ-чат к поиску на сайте: проверить селектор, сохранить обычные результаты и протестировать мобильную доступность.
7 мин чтения
Существующее поле поиска может открывать обоснованные источниками ответы ИИ, не убирая обычный поиск. Чтобы безопасно превратить строку поиска на сайте в ИИ-чат, выберите способ показа интерфейса, проверьте целевое поле, сохраните путь к обычным результатам и до запуска протестируйте качество ответов и fallback.
Michael Shamanoff Основатель, Achla AI Как подготовлена статья: изучены текущий продукт и исходный код виджета Achla, одобренное исследование конкурентов и воспроизводимый план приёмочного тестирования. При написании использовался ИИ; каждое существенное фактическое утверждение связано с доказательством в claim ledger. Зачем статья нужна: владельцам сайтов нужна схема принятия решений и тестов, а не обещание, что один вариант подходит всем. Последняя проверка источников: 3 августа 2026 года.
Выберите, что произойдёт после нажатия Enter
«Строкой ИИ-поиска» называют три разных интерфейса. Выбор зависит от задачи посетителя и стабильности страницы. Текущий код Achla реализует режимы attach, inline и bubble, но наличие кода не доказывает совместимость с любой темой, формой, браузером или assistive technology.
| Размещение | Что видит посетитель | Когда подходит | Главный риск теста |
|---|---|---|---|
| Attach | Знакомое поле поиска открывает диалог ответа при отправке формы. | Стабильное поле text или search, где важна непрерывность. | Изменение селектора, конфликт формы, autocomplete, фокус и узкий экран. |
| Inline | Отдельная область ИИ-поиска встроена в страницу. | Контентная или справочная страница, где ответам нужно своё место. | Ясность размещения, адаптивность и дублирование поиска. |
| Bubble | Отдельная плавающая кнопка открывает интерфейс. | Нет надёжного поля поиска либо attach не может безопасно подключиться. | Обнаруживаемость, перекрытие элементов, мобильный экран и клавиатурный маршрут. |
Attach лучше сохраняет знакомый старт из формы. Inline явно отделяет ИИ и не перехватывает глобальный поиск. Bubble независим от формы и полезен как fallback, но не является универсально лучшим. Перед изменением прочитайте, почему посетителям иногда нужны ответы, а не список страниц.
Сохраняйте обычные результаты, когда они решают задачу
Обычный поиск полезен для точных названий, документов, SKU-подобных терминов, фильтров, фасетов, autocomplete и полного просмотра. ИИ полезен для вопроса естественным языком и краткого ответа с источниками. Эти задачи дополняют друг друга.
Проверенная реализация Achla attach содержит действие «Show regular results»: оно закрывает интерфейс и отправляет исходную форму, если доступна нативная форма. Это факт текущей реализации, не гарантия для каждого сайта. Поле без рабочей формы, JavaScript-страница результатов или framework с заменённой отправкой требуют браузерного теста.
До запуска определите выход:
- сохраните исходный URL результатов и поведение отправки;
- проверьте autocomplete, фильтры, аналитику и отправку с клавиатуры;
- сделайте обычные результаты доступными при отсутствии или недостаточности ответа;
- не выдавайте ИИ-ответ за исчерпывающее покрытие;
- запишите способ отключить перехват без переделки страницы.
См. также как добавить ИИ-поиск без собственного backend.
Настройте attach как обратимый тест
Относитесь к attach как к эксперименту с rollback.
- Зафиксируйте исходное поведение. На desktop и mobile запишите Enter, кнопку поиска, autocomplete, URL результатов, фильтры, событие аналитики и перемещение фокуса.
- Выберите одно устойчивое поле. Селектор должен находить ровно один нужный
inputтипаtextилиsearchна всех шаблонах. Главная страница, мобильное меню, локали и client-rendered routes могут различаться. - Проверьте селектор.
querySelector()выбрасываетSyntaxErrorдля неверного CSS-селектора и возвращаетnull, если совпадений нет, как описывает MDN. Код виджета защищает lookup и принимает только подходящие поля. - Используйте публичный проверяемый контент. Задайте вопросы с известными ответами, ожидаемые страницы и допустимые no-answer случаи. Подготовка заголовков для RAG объясняет роль структуры.
- Включите изменение на staging. Повторите baseline на шаблонах, ширинах, уровнях zoom, клавиатурных маршрутах и хотя бы с одной assistive technology. Поздно появляющиеся поля и SPA-навигация требуют отдельной проверки.
- Задайте pass, fail и rollback. Проходите тест, только если обычный поиск работает, известные ответы ссылаются на ожидаемые страницы, неподдерживаемые вопросы получают честный отказ, фокус управляем, а интерфейс помещается в viewport. Иначе отключите attach, исправьте интеграцию или используйте отдельно проверенное размещение.
При неверном селекторе, отсутствии поля или невозможности занять цель текущий виджет переходит к bubble. Это защитное поведение исходного кода, которое всё равно нужно проверить на реальном staging, особенно при поздней вставке поля.
Проверьте отказы селектора до production
| Условие | Ожидаемый безопасный результат | Что наблюдать в браузере |
|---|---|---|
| Неверный CSS | Attach не подключается; fallback доступен. | Поиск не сломан, нет необработанной ошибки или скрытого элемента. |
| Нет совпадения | Attach не занимает случайный элемент. | Появляется bubble/одобренная альтернатива; обычный поиск не меняется. |
| Неверный тип | Нетекстовый элемент отклонён. | Кнопки, контейнеры и скрытые inputs не перехватываются. |
| Несколько шаблонов | Каждая нужная страница выполняет контракт. | Header, мобильное меню, контент и локали ведут себя согласованно. |
| Повторный владелец | Уже занятое поле не используется снова. | Один интерфейс владеет полем; нет двойной отправки или UI. |
| Позднее/заменённое поле | Начальный lookup может его пропустить. | Явно тестируются SPA, hydration, modal headers и задержка навигации. |
Успех на одной странице не доказывает универсальную совместимость тем или frameworks.
Сделайте диалог удобным для клавиатуры и screen reader
В исходном коде найдены accessible name, подписанные controls, область ответа aria-live="polite", Escape, возврат фокуса при закрытии и удержание Tab внутри открытого интерфейса. Это полезные механизмы, но не результат соответствия WCAG.
Используйте официальный W3C dialog pattern как ориентир: modal удерживает Tab внутри, поддерживает Escape, имеет доступное имя, переносит фокус внутрь и обычно возвращает его после закрытия. Текущий интерфейс применяет role="dialog"; начальный фокус и необходимость modal-поведения нужно решить и проверить.
Проверьте понятное имя и labels, видимый фокус, Enter/Escape/Tab/Shift+Tab, фокус при открытии и закрытии, программные сообщения о поиске/ответе/ошибке/no-answer, имена ссылок и обычных результатов, reduced motion и browser zoom. Руководство W3C по status messages объясняет программное раскрытие изменений, а WCAG 2.2 содержит нормативные критерии. Одного чтения JavaScript недостаточно.
Запустите мобильный тест на 320, 360, 390 и 412 CSS pixels
Проверенный attach-код вычисляет ширину dropdown не менее 360 pixels. Поэтому при viewport 320 CSS pixels есть конкретный риск горизонтального переполнения или перекрытия; исходный код сам по себе не доказывает безопасность всех страниц.
На каждой ширине проверьте zoom, увеличение текста, виртуальную клавиатуру, sticky headers, landscape, кнопку закрытия, прокрутку ответа, ссылки и возврат к обычным результатам. Руководство W3C по reflow использует эквивалент 320 CSS pixels и требует избегать потери информации и двумерной прокрутки вне допустимых исключений. Это цель теста, а не заявление о соответствии.
Оценивайте ответы и выход в обычный поиск одними запросами
| Тип запроса | Ожидаемое доказательство |
|---|---|
| Известный ответ | Ответ ссылается на ожидаемую публичную страницу, поддерживающую формулировку. |
| Перефразирование | Другая формулировка находит подходящий источник без смены смысла. |
| Неоднозначный вопрос | Интерфейс уточняет или избегает чрезмерно уверенного ответа. |
| Неподдерживаемый вопрос | Появляется честное no-answer, а не выдумка. |
| Устаревшая/удалённая страница | Тест показывает необходимость исследования refresh/removal. |
| Точное название/просмотр | Посетитель может уйти из ИИ-пути к обычным результатам. |
Записывайте вопрос, видимый ответ, cited URL, ожидаемый источник, no-answer, действие обычного поиска, viewport, browser и pass/fail. Подробнее: как цитаты и честные отказы формируют доверие.
Знайте, когда нужен другой чат-бот
Статья касается обоснованных ответов по публичному контенту сайта. Она не подтверждает поддержку закрытых или account-aware ответов, файлов/PDF, лидов, CRM-действий, передачи оператору, бронирований, покупок, голоса, omnichannel или открытого интернета. Для них нужна отдельная оценка продукта и безопасности.
Также нет утверждений о времени настройки, search volume, росте трафика, конверсии, снижении обращений, универсальной совместимости браузеров или соответствии accessibility.
Запускайте только после успеха обоих путей
ИИ-путь готов лишь к human review, когда селектор стабилен, fallback наблюдаем, известные ответы цитируют подтверждающие страницы, неподдерживаемые вопросы честно отклоняются, а keyboard/mobile проверки записаны. Обычный путь должен сохранять отправку, результаты, autocomplete/фильтры и документированный rollback.
Если нужны управляемые ответы по публичному сайту со ссылками на источники, оцените подходящую конфигурацию Achla. Это контекстный следующий шаг, а не заявление о пройденном production-тесте.
Часто задаваемые вопросы
Можно ли сохранить autocomplete?
Возможно, но проверьте на сайте. Перехват attach совместим с привычным полем только при корректной работе Enter, выбора подсказки, фокуса и обычной отправки формы. Сначала запишите baseline; регрессия autocomplete означает провал теста.
Что произойдёт при изменении CSS-селектора?
Текущая реализация может перейти к bubble. Не полагайтесь на это молча: проверьте варианты навигации и client-rendered routes, наблюдайте за элементом после смены темы и сохраняйте обычный поиск.
Должен ли ИИ заменить страницу результатов?
По умолчанию нет. Ответы полезны для объяснений, а обычные результаты — для названий, продуктов, фильтров и полного просмотра. Решение должно опираться на реальные задачи и доказательства обоих путей.
Что делать, если подтверждённого ответа нет?
Покажите честное no-answer/error состояние, сохраните видимость источников и понятный путь к обычным результатам. Не превращайте отсутствие доказательств в уверенную формулировку.
Bubble безопаснее attach?
Bubble меньше зависит от существующего поля и полезен как fallback, но всё равно требует проверки клавиатуры, перекрытий, обнаруживаемости, mobile и темы. Отдельный интерфейс не становится автоматически доступным.
