El widget predeterminado de Heedback cumple su función, pero el App Builder te permite hacerlo tuyo. En lugar de una burbuja de chat genérica, puedes diseñar una pestaña de Inicio que guíe a los visitantes al recurso adecuado: iniciar una conversación, explorar FAQs, reservar una reunión o seguir un enlace personalizado. Todo sin escribir una sola línea de código.

Esta guía cubre todo, desde cómo acceder al constructor hasta publicar tu widget personalizado.

Requisitos previos

Antes de usar el App Builder, asegúrate de que:

Tienes una organización activa en Heedback con un plan Pro.
Tu cuenta tiene permisos de administrador o propietario.
El widget de Heedback ya está instalado en tu sitio web (consulta Configuración > Widget para obtener el fragmento de código).
Tienes una idea general de qué acciones quieres que realicen los visitantes — esto te ayuda a elegir los bloques adecuados.

Acceso al App Builder

Abre tu panel de Heedback y ve a Widget > App Builder en la barra lateral izquierda.
Verás un editor visual con el diseño actual de tu pestaña de Inicio a la izquierda y una paleta de bloques a la derecha.
El panel de vista previa en vivo a la derecha se actualiza en tiempo real a medida que haces cambios — lo que ves es exactamente lo que verán tus visitantes.

El App Builder funciona con un sistema de bloques. Cada bloque representa una acción o sección de contenido distinta que aparece en la pestaña de Inicio del widget.

Tipos de bloques disponibles

Heedback ofrece varios tipos de bloques, cada uno diseñado para un propósito específico:

Conversación: El clásico punto de entrada “Iniciar una conversación”. Los visitantes hacen clic para abrir una nueva conversación de soporte o continuar una existente. Es el bloque más común y normalmente va arriba.
FAQ / Base de conocimiento: Muestra tus artículos de ayuda más leídos directamente en el widget. Los visitantes pueden buscar y explorar sin salir de tu sitio. Requiere artículos publicados en la base de conocimiento.
Reserva de reuniones: Permite a los visitantes programar una llamada con tu equipo. Conecta tu proveedor de calendario (Calendly, Cal.com o una URL personalizada) y la interfaz de reserva aparece integrada.
Enlace personalizado: Un bloque flexible que enlaza a cualquier URL — tu sitio de documentación, un tablero de feedback, una página de destino específica o una herramienta externa. Añade un título, descripción e icono para hacerlo visualmente distintivo.
Changelog: Muestra tus últimas actualizaciones de producto directamente en el widget para que los usuarios vean las novedades sin navegar a otro lugar.

Cada bloque tiene sus propias opciones de configuración. Por ejemplo, el bloque de FAQ te permite elegir qué colecciones destacar, mientras que el bloque de Enlace personalizado soporta una URL externa y un icono personalizado.

Organización de bloques con arrastrar y soltar

Construir el diseño de tu pestaña de Inicio es sencillo:

Añadir un bloque: Haz clic en un tipo de bloque de la paleta para añadirlo a tu diseño.
Reordenar: Arrastra cualquier bloque hacia arriba o abajo para cambiar su posición. El orden importa — los bloques de arriba reciben más visibilidad y clics.
Configurar: Haz clic en el icono de engranaje de cualquier bloque para abrir su configuración. Rellena títulos, descripciones y cualquier opción específica del bloque.
Eliminar: Haz clic en el icono de papelera de un bloque para eliminarlo del diseño.

Una disposición práctica para la mayoría de productos SaaS: bloque de Conversación arriba (para problemas urgentes), seguido de FAQ (para autoservicio), luego Changelog (para mantener informados) y un Enlace personalizado a tu comunidad o documentación abajo.

Vista previa y pruebas

Antes de publicar, siempre previsualiza tus cambios:

La vista previa en vivo del App Builder se actualiza automáticamente mientras editas. Verifica que los bloques aparezcan en el orden correcto y que los títulos se lean claramente.
Haz clic en Previsualizar en el sitio para abrir una vista previa temporal en tu sitio web real. Esto muestra el widget exactamente como lo verán los visitantes, incluyendo tu imagen de marca, colores y posicionamiento.
Prueba la interacción de cada bloque: haz clic en el bloque de Conversación para verificar que abre el chat, comprueba que los artículos de FAQ se carguen correctamente y confirma que los enlaces personalizados navegan a las URLs correctas.

Vale la pena probar tanto en vistas de escritorio como de móvil — el widget se adapta al tamaño de pantalla y tu disposición de bloques debería sentirse natural en pantallas más pequeñas.

Publicación de los cambios

Una vez que estés satisfecho con el diseño:

Haz clic en el botón Guardar en el App Builder.
Los cambios se publican inmediatamente en tu widget activo. No hay un paso de despliegue separado — los visitantes verán la pestaña de Inicio actualizada en su próxima carga de página.
Puedes volver al App Builder en cualquier momento para añadir, eliminar o reorganizar bloques. Cada guardado sobrescribe el diseño anterior.

Si quieres revertir, no hay historial de versiones integrado, así que considera tomar una captura de pantalla de tu diseño actual antes de hacer cambios significativos.

Consejos y buenas prácticas

Mantén el enfoque. Tres a cuatro bloques es el punto ideal. Demasiadas opciones crean parálisis de decisión — los visitantes terminan sin hacer clic en nada.
Pon la acción de mayor valor primero. Si la mayoría de los visitantes necesitan ayuda, comienza con Conversación. Si la mayoría de las preguntas se responden en la documentación, comienza con FAQ.
Usa títulos descriptivos. “Obtener ayuda” es vago. “Chatea con nuestro equipo” o “Explora artículos de ayuda” le dice a los visitantes exactamente qué esperar.
Revisa trimestralmente. A medida que tu producto evoluciona, también debería hacerlo tu widget. ¿Lanzamiento de nueva función? Añade un bloque de Changelog temporalmente. ¿Campaña de contratación? Añade un Enlace personalizado a tu página de empleo.
Alinea con tu marca. El App Builder respeta la configuración de colores e imagen de marca de tu widget en Configuración > Widget. Asegúrate de que los títulos y descripciones de tus bloques coincidan con la voz de tu marca.

Funciones relacionadas

Configuración del widget: Establece colores, posición, imagen de marca y el fragmento de código que carga el widget en tu sitio.
Base de conocimiento: Alimenta el bloque de FAQ. Más artículos significan una experiencia de autoservicio más útil dentro del widget.
Changelog: El bloque de Changelog extrae de tus entradas publicadas — mantén tu changelog activo para máximo impacto en el widget.
Respuesta automática con IA: Cuando los visitantes abren una conversación desde el widget, la respuesta automática con IA puede gestionar las respuestas iniciales al instante.