Búsqueda IA en el sitio
Cómo convertir la barra de búsqueda de tu sitio en un chat con IA
Conecta un chat con IA a la búsqueda, valida el selector, conserva los resultados normales y prueba la accesibilidad móvil.
6 min de lectura
Un campo de búsqueda existente puede abrir respuestas de IA basadas en fuentes sin eliminar la búsqueda normal. Elige cómo aparece la IA, valida el input de destino, conserva una ruta a los resultados normales y prueba la calidad de las respuestas y el fallback antes del lanzamiento.
Michael Shamanoff, fundador de Achla AI. Esta guía se basa en la inspección del producto y el widget actuales, la investigación competitiva aprobada y un diseño reproducible de pruebas de aceptación. La IA ayudó a redactar; las afirmaciones materiales están vinculadas al claim ledger. Fuentes revisadas el 3 de agosto de 2026.
Elige qué ocurre cuando el visitante pulsa Enter
Una «barra de búsqueda con IA» puede ser attach, inline o bubble. La elección depende de la tarea y la estabilidad de la página. El código de Achla implementa los tres modos, pero no demuestra que funcionen con todos los theme, form, browser o assistive technology.
| Ubicación | Experiencia | Uso adecuado | Riesgo principal |
|---|---|---|---|
| Attach | El campo conocido abre un dialog al hacer submit. | input estable de tipo text o search. | Cambio de selector, conflicto del form, autocomplete, focus y pantalla estrecha. |
| Inline | Área de IA dedicada dentro de la página. | Página de contenido o ayuda. | Claridad, responsive layout y experiencias duplicadas. |
| Bubble | Un control flotante abre la interfaz. | No hay un campo fiable o attach no puede enlazarse. | Descubrimiento, solapamiento, mobile y recorrido keyboard. |
Attach conserva la entrada familiar; inline hace explícita la IA; bubble es independiente y útil como fallback, pero no siempre superior. Lee por qué algunos visitantes necesitan respuestas y no listas de páginas.
Conserva los resultados normales cuando resuelven la tarea
La búsqueda tradicional sirve para nombres exactos, títulos de documentos, términos similares a SKU, filters, facets, autocomplete y exploración exhaustiva. La IA ayuda con preguntas naturales y respuestas concisas con fuentes. Son funciones complementarias.
La implementación attach inspeccionada incluye “Show regular results”, que cierra la interfaz y envía el form anfitrión cuando existe un form nativo. Es un hecho actual, no una garantía. Un input sin formulario, resultados gestionados con JavaScript o un framework que sustituye submit requieren un browser test.
- conserva la URL y el comportamiento de envío originales;
- verifica autocomplete, filters, analytics y keyboard submission;
- facilita los resultados cuando falta una respuesta;
- no presentes la IA como cobertura exhaustiva;
- documenta cómo desactivar la interceptación.
Consulta cómo añadir búsqueda con IA sin crear un backend.
Configura attach como una prueba reversible
- Registra el baseline nativo: Enter, botón, autocomplete, URL, filters, analytics y focus en desktop y mobile.
- Identifica un input estable: el selector debe resolver exactamente un
inputtextosearchen cada template. - Valida el selector:
querySelector()lanzaSyntaxErrorcon CSS no válido y devuelvenullsin coincidencias, según MDN. - Usa contenido público verificable: define preguntas conocidas, páginas esperadas y casos no-answer; consulta cómo preparar encabezados para RAG.
- Activa en staging: repite el baseline en templates, breakpoints, zoom, rutas keyboard y al menos una assistive technology; revisa SPA y campos tardíos.
- Define pass, fail y rollback: aprueba solo si la búsqueda normal funciona, las fuentes respaldan respuestas conocidas, las preguntas no compatibles fallan con honestidad y focus/viewport son utilizables.
El widget cambia a bubble cuando el selector no es válido, no encuentra un input apropiado o no puede reclamar el objetivo. Este comportamiento defensivo necesita una prueba en el anfitrión real.
Prueba los fallos del selector antes de producción
| Condición | Resultado seguro esperado | Qué observar en el browser |
|---|---|---|
| CSS no válido | Attach no enlaza; fallback disponible. | Búsqueda intacta, sin error no controlado. |
| Sin coincidencia | No se captura otro elemento. | Aparece bubble/alternativa; búsqueda sin cambios. |
| Tipo incorrecto | Se rechaza el control no textual. | No se interceptan buttons, containers ni inputs ocultos. |
| Varios templates | Cada página cumple el contrato. | Header, mobile, contenido y locales coherentes. |
| Propiedad duplicada | No se reutiliza un objetivo ocupado. | Una interfaz, sin submit ni UI duplicados. |
| Input tardío/reemplazado | El lookup inicial puede omitirlo. | SPA, hydration, modal headers y retrasos probados. |
El éxito en una página no demuestra compatibilidad universal con themes o frameworks.
Haz que el dialog sea utilizable con teclado y lector de pantalla
El código contiene accessible name, controls etiquetados, una región aria-live="polite", Escape, retorno de focus y contención de Tab. Son mecanismos útiles, no un resultado de conformidad WCAG.
Usa el dialog pattern oficial de W3C: un modal mantiene Tab dentro, admite Escape, tiene nombre y gestiona focus. La interfaz usa role="dialog"; initial focus y modalidad deben decidirse y probarse. Comprueba labels, focus visible, Enter/Escape/Tab/Shift+Tab, anuncios, reduced motion y zoom. Consulta Status Messages y WCAG 2.2. Leer JavaScript no basta.
Ejecuta la prueba mobile a 320, 360, 390 y 412 CSS pixels
El código attach calcula un dropdown de al menos 360 pixels. A 320 CSS pixels existe riesgo real de overflow u obstrucción. Prueba zoom, ampliación de texto, virtual keyboard, sticky headers, landscape, cierre, desplazamiento, enlaces y vuelta a resultados. La guía Reflow de W3C usa el equivalente a 320 CSS pixels como objetivo; no es una afirmación de conformidad.
Evalúa las respuestas y la salida con las mismas consultas
| Tipo de consulta | Evidencia esperada |
|---|---|
| Respuesta conocida | La página pública esperada respalda el texto. |
| Paráfrasis | Fuente adecuada sin cambiar el significado. |
| Ambigua | Pide aclaración o evita exceso de seguridad. |
| No compatible | Estado no-answer honesto. |
| Página obsoleta/eliminada | Revela si investigar refresh/removal. |
| Título exacto/exploración | Permite salir hacia resultados normales. |
Registra pregunta, respuesta, cited URL, fuente esperada, no-answer, acción de resultados, viewport, browser y pass/fail. Consulta cómo las citas y los fallos honestos generan confianza.
Reconoce cuándo este no es el chatbot adecuado
El artículo trata respuestas basadas en contenido público. No demuestra soporte para respuestas privadas/account-aware, files/PDF, leads, CRM, live-agent, bookings, purchases, voice, omnichannel u open web. Tampoco afirma tiempo de setup, search volume, aumento de traffic, conversion, support deflection, compatibilidad browser universal o accessibility compliance.
Lanza solo después de que ambos caminos funcionen
El camino de IA solo está listo para human review cuando selector y fallback son observables, las respuestas conocidas tienen fuentes, las no compatibles fallan con honestidad y existen pruebas keyboard/mobile. La búsqueda normal debe conservar submit, resultados, autocomplete/filters y rollback documentado.
Si necesitas respuestas gestionadas y vinculadas a fuentes públicas, evalúa la configuración de Achla adecuada. Es un siguiente paso contextual, no una afirmación de pruebas de producción superadas.
Preguntas frecuentes
¿Puedo conservar autocomplete?
Quizá, pero verifica Enter, selección de sugerencias, focus y submit normal. Cualquier regresión es un fallo.
¿Qué ocurre si cambia el CSS selector?
La implementación puede pasar a bubble. Prueba navigation y client-rendered routes, vigila el campo tras cambios de theme y conserva la búsqueda normal.
¿Debe la IA sustituir la página de resultados?
No por defecto. Las respuestas ayudan con explicaciones; los resultados normales con títulos, productos, filters y exploración completa.
¿Qué debe ocurrir sin una respuesta respaldada?
Muestra un estado no-answer/error honesto, conserva las fuentes visibles y ofrece una ruta clara a resultados. No conviertas la ausencia de evidencia en seguridad.
¿Es bubble más seguro que attach?
Es más independiente y puede ser un buen fallback, pero exige pruebas keyboard, obstrucción, descubrimiento, mobile y theme.
