Un asistente web, construido dos veces

Una agencia de marca blanca me escribió para ofrecerme chatbots que podría poner en las webs de mis clientes con mi propio nombre. No contesté. Construí uno yo mismo, primero para mis propias webs, para conocer cada línea de lo que hace.

La primera fue WebDesign Costa Blanca, el servicio que llevo para negocios locales con webs a precio cerrado. La segunda fue esta.

Primero, una regla

El asistente solo responde con lo que dice la web en la que está. Cada vez que la web se actualiza, sus páginas se convierten en su material de lectura, así que no puede citar una oferta que la web ya no hace ni inventarse una que nunca hizo. Cuando la respuesta no está en las páginas, lo dice y te ofrece pasarme la pregunta.

Esa regla decidió casi todo lo demás. No hay una segunda base de datos que mantener al día ni un bot que alguien tenga que acordarse de actualizar, porque quien edita una página ya ha editado el asistente sin abrirlo nunca.

Lo que hace

• Responde en alemán, español o inglés, con el trato que usa cada web.
• Empieza con tres preguntas sugeridas, una de ellas sobre la página en la que estás, y después de cada respuesta propone dos o tres más: solo las que la web puede responder.
• Pasa la conversación a una persona: si das tu consentimiento, tu nombre, tu email y el chat llegan a mi bandeja de entrada, y te respondo yo. O me escribes por WhatsApp, con tu última pregunta ya en la primera línea.
• Muestra un aviso discreto por visita, y nunca encima del banner de cookies ni en la página de contacto.

Construido dos veces

Con frameone.es, una función se convirtió en un kit. El motor vive ahora en tres archivos que entran en una web sin cambios, y todo lo que hace que pertenezca a una web concreta está en los ajustes de esa web: un color de marca, las preguntas, la forma de llegar a mí y las reglas que sigue.

Las reglas cambian donde cambian los negocios. WebDesign Costa Blanca publica sus paquetes y sus precios, así que su asistente los menciona. FRAMEONE no publica precios, así que el asistente de aquí nunca da una cifra, ni siquiera un rango; explica cómo se factura y te ofrece pasarme la pregunta. También describe los proyectos con las palabras de la web, para que una marca en la que trabajé nunca se convierta en «mi cliente».

Lo que no hace

No te recuerda. La conversación vive en la pestaña de tu navegador y termina cuando la cierras. En el servidor, las preguntas y las respuestas se guardan seis meses sin direcciones IP, para que yo pueda ver qué pregunta la gente y dónde se queda corta la web.

No te hace visible en las búsquedas con IA. Responde a quien ya está en tu web. Que ChatGPT te mencione o no es otro problema, y una ventana de chat no lo resuelve.

Se puede equivocar. Detrás hay un modelo pequeño y rápido que lee un par de docenas de páginas, y lo dice debajo de cada conversación. Para todo lo que importa, responde una persona.

Tiene límites a propósito. Cada visitante puede hacer un número limitado de preguntas por hora, la web entera tiene un tope diario, y una conversación muy larga termina con la propuesta de hablar conmigo directamente. Así el coste se mantiene bajo y previsible, y nadie puede disparar la factura con un script.

Lo que salió mal

Hablaba como si fuera yo. Las dos webs están escritas en primera persona, «diseño, construyo», y el modelo lo copió, así que el asistente empezó a hablar como si fuera yo. Decirle que no lo hiciera no bastó. Enseñárselo, sí: unos cuantos pares de ejemplo del tipo «la web dice esto, el asistente dice aquello». En la primera prueba en vivo aquí todavía se colaron los títulos de mis pasos de trabajo, «Escucho» y «Propongo», así que los títulos tienen ahora sus propios ejemplos.

La respuesta llegaba de golpe. En frameone.es el servidor retenía cada respuesta y la soltaba entera al final: una pausa larga y luego un muro de texto. Entre PHP y el servidor web había un búfer que solo deja pasar los datos en bloques de 8 KB. Ahora el asistente envía el texto varias veces por segundo, cada vez con el relleno justo para atravesar ese búfer, y las primeras palabras aparecen más o menos un segundo después de la pregunta, que es casi todo lo que tarda el modelo en arrancar.

El primer diseño era demasiado tímido. Funcionaba, y casi nadie se habría fijado en él. La segunda versión sigue la investigación del Nielsen Norman Group sobre cómo usa la gente de verdad los chatbots en las webs: un botón con nombre y aspecto propio, una bienvenida que dice sobre qué puede responder, preguntas sugeridas, un camino visible hasta una persona y respuestas que empiezan arriba en vez de pasar de largo con el scroll.

El segundo diseño parecía cualquier otro producto de IA. Destellos, un orbe luminoso, degradados en las burbujas: el lenguaje visual de los chatbots de todas partes, y el mío también lo llevaba. La tercera versión toma como modelo el Liquid Glass de Apple. El botón, el aviso y la ventana del chat son láminas de cristal sobre la página, sin color propio mientras esperan; el color de la marca aparece solo en el botón de enviar, en los enlaces y en tus propios mensajes. La ventana crece desde el botón al abrirla y vuelve a encogerse dentro de él al cerrarla, y en Chrome y Edge su borde curva lo que pasa por detrás, como hace el cristal grueso. Los demás tonos salen de ese único color de marca con una comprobación de contraste, así que la próxima web tiene su propia versión con un solo ajuste.

Sobre el método

Lo hice con un agente de programación con IA. La primera versión estaba en marcha en WebDesign Costa Blanca 45 minutos después de decidir qué debía hacer y qué no, y frameone.es tuvo la suya unos 50 minutos después de empezar, con la prueba del servidor incluida. El diseño llevó más tiempo que el código, que es más o menos la proporción correcta.

El agente escribe código rápido. No decidió que el asistente solo puede responder con las páginas publicadas, que una web sin precios lleva un asistente sin precios, ni que el email de un visitante solo me llega con su consentimiento, y esas decisiones son justo la parte por la que paga un cliente.

Está en la esquina de esta página. Pregúntale algo.