El widget de chat de Kookee tenía una sola tarea, y la hacía bien: un visitante hace una pregunta, el asistente responde a partir del centro de ayuda y cita el artículo que usó. Luego el visitante hace clic en la cita, y el widget le falla. La página navega a otra dirección, o se abre una pestaña nueva, y la conversación que produjo la respuesta queda en algún lugar a sus espaldas.
El clic que debía ser el mejor momento del intercambio era el que lo terminaba.
Así que rehíce el widget. Ya no es solo un chat: tiene tres pestañas, Inicio, Preguntar a la IA y Ayuda, y un lector de artículos. Salió hoy, y estas son las reglas con las que lo construí.
1. Un artículo se abre donde se hizo la pregunta
Una fuente bajo una respuesta, un enlace dentro de ella, un artículo de una lista: ahora todos se abren dentro del widget, en un lector con botón para volver. La página de detrás no se mueve, y la conversación tampoco.
El lector es la página de artículo del centro de ayuda a tamaño de widget: un índice, la misma votación «¿Te resultó útil este artículo?» y un botón Preguntar sobre este artículo que lleva el título del artículo al chat. Una entrada del blog o del registro de cambios se abre igual y tiene botones de reacción en lugar de la votación.
Si tu sitio ya gestiona por su cuenta los clics en las fuentes, nada cambia: tu manejador sigue teniendo prioridad, y el lector no se interpone.
2. No todas las visitas empiezan con una pregunta
Un chat vacío le pide al visitante que haga primero lo más difícil: poner el problema en palabras. Mucha gente abre un widget de soporte para echar un vistazo, para ver si algo está roto, qué cambió o si hay un artículo con un título más o menos acertado.
Inicio es para ellos. Muestra tu último anuncio, tus propios enlaces, las entradas más recientes del registro de cambios y del blog, y los artículos de ayuda más vistos, con un cuadro de preguntas arriba para quien sí sabe qué preguntar. Ayuda es el centro de ayuda en sí: un cuadro de búsqueda y tus colecciones, cada una con su número de artículos.
Nada de esto es contenido nuevo. Inicio y Ayuda se construyen con lo que ya publicas, y una lista sin elementos se omite en lugar de mostrarse vacía.
Preguntar a la IA es el chat de siempre, con tu saludo y algunas preguntas sugeridas para empezar con un solo toque.
3. Cualquier enlace de tu página puede abrir un artículo
El mejor lugar para la ayuda está junto a lo que explica: un signo de interrogación al lado de un campo de configuración, un enlace «¿Cómo funciona la facturación?» en la página de precios. Hasta ahora, ese enlace tenía que llevar a otra parte.
Dale a cualquier elemento un atributo, y un clic abre el artículo en el widget:
<a href="/help/getting-started" data-kookee-article="getting-started">Cómo empezar</a>Aquí importan dos detalles. El href se queda, así que el enlace sigue funcionando cuando el widget está bloqueado o aún no ha cargado. Y un clic con Ctrl, Cmd o Shift presionada, o con el botón central, se deja tal cual: quien pide una pestaña nueva recibe una pestaña nueva. Las reglas completas están en Abre artículos de ayuda dentro del widget.
4. Los textos viven en el panel; el aspecto, en tu código
Le di muchas vueltas a esto. Un widget tiene dos tipos de configuración, y cada uno pide vivir en un lugar distinto.
Lo que dice (sus pestañas, el título, el saludo, las preguntas sugeridas y los enlaces) cambia a menudo y rara vez lo decide un desarrollador. Eso se guarda en el panel, en la pestaña Personalizar, con vista previa en vivo, y un cambio guardado llega a tu sitio en un minuto aproximadamente, sin desplegar nada.
Cómo se ve (tema, posición, color de acento, lanzador) no se guarda en ninguna parte. Se queda en el fragmento de código de tu sitio. Un aspecto que llega del servidor aparece cuando el lanzador ya se ha dibujado, así que parpadea; además, el mismo proyecto a menudo funciona en más de un sitio, y no todos deben verse igual. El panel ayuda de todos modos: la pestaña Instalación es un pequeño generador con vista previa que escribe el fragmento por ti.
Donde los dos se solapan, gana el código, clave por clave. Un sitio en varios idiomas pasa los textos traducidos en su código y deja que el panel decida el resto.
5. La petición de configuración nunca debe ser la razón de que el widget falle
Con la configuración guardada, el widget ahora tiene que pedírsela al servidor, y una petición nueva es una nueva forma de fallar. Así que le di el menor poder posible:
Se hace una vez por carga de página, y el navegador guarda la respuesta durante un minuto.
No cuenta para tu cuota mensual de la API. Una cuota no está pensada para una consulta de configuración en cada vista de página.
Si falla, el widget vuelve a ser el chat sencillo de antes. Un visitante ve menos pestañas, nunca un error.
Lo que dejé fuera
Esto no es un chat en vivo. No hay ningún agente esperando al otro lado: el asistente responde a partir de tus artículos, y tus instrucciones le dicen adónde enviar a la gente cuando no puede responder.
Tampoco se activa solo. Cada widget ya instalado sigue siendo un chat sencillo hasta que marques las pestañas en el panel.
Cómo activarlo
Con la etiqueta script, llega sin tocar tu sitio. En React, actualiza a @kookee/react 1.11.0 y @kookee/sdk 1.11.0. Luego abre Widget del sitio → Personalizar en tu proyecto y activa las pestañas. Añade las pestañas Inicio y Ayuda a tu widget explica cómo hacerlo, e Instala el widget del sitio en tu web cubre una primera instalación.