Añade un agente de voz con IA a una app de Spring Boot

Cómo añadir AnveVoice a una aplicación de Spring Boot

Spring Boot sirve HTML desde plantillas (Thymeleaf, FreeMarker, Mustache) o desde archivos estáticos. Pon la etiqueta de AnveVoice en un fragmento de plantilla compartido o en tu HTML estático. Si Spring Security envía una cabecera Content-Security-Policy, permite anvevoice.app en script-src. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Un fragmento de Thymeleaf en src/main/resources/templates, o HTML en src/main/resources/static
• Programación necesaria: Un archivo de fragmento y una línea de inclusión; una edición de la configuración de seguridad solo si defines una CSP
• Límites del plan: Ninguno por parte de Spring Boot; cualquier host JVM
• Tiempo: Unos 5 minutos

De dónde obtiene Spring Boot su HTML

La documentación de referencia de Spring Boot enumera los motores de plantillas que configura automáticamente: FreeMarker, Groovy, Thymeleaf y Mustache. Con la configuración por defecto, las plantillas se toman de src/main/resources/templates. El contenido estático procede de un directorio llamado /static (o /public, /resources, /META-INF/resources) en el classpath. La referencia también aconseja evitar las JSP siempre que sea posible. Revisa tu proyecto para ver cuál aplica. Un pom.xml o build.gradle con spring-boot-starter-thymeleaf significa Thymeleaf. Una carpeta src/main/resources/static con index.html y sin motor de plantillas significa un front end estático o de una sola página. Si la app web es una API REST pura con un front end separado, añade la etiqueta al HTML de ese front end. Los pasos usan Thymeleaf porque es el motor más común; la misma idea (una inclusión compartida) se aplica a FreeMarker y Mustache.

• 1. Obtén tu etiqueta de instalación — Crea el bot en app.anvevoice.app y copia el ID de incrustación en la URL. Mantén la URL como marcado simple; no la envuelvas en una expresión th:src, que está pensada para enlaces relativos a tu propia aplicación. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: un fragmento de Thymeleaf incluido por tu layout

El tutorial de Thymeleaf define marcado reutilizable con th:fragment y lo incluye con th:insert o th:replace; th:replace sustituye la etiqueta anfitriona por el fragmento. Poner la etiqueta en un único fragmento hace que todas las páginas que lo incluyen sean coherentes, y eliminarla es un cambio de un solo archivo.

• 1. Crea el fragmento — Añade src/main/resources/templates/fragments/voice-agent.html. Un elemento th:block no renderiza nada por sí mismo, así que no aparece ningún elemento envolvente adicional en la salida. <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <th:block th:fragment="voice"> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </th:block> </body> </html>
• 2. Inclúyelo en el layout de tu página — En la plantilla que envuelve tus páginas (o en cada página), coloca la inclusión justo antes de la etiqueta de cierre body. <th:block th:replace="~{fragments/voice-agent :: voice}"></th:block> </body>
• 3. Vuelve a compilar — Thymeleaf guarda las plantillas en caché fuera de desarrollo por defecto. Reinicia la aplicación o recompila el jar para que se recoja el nuevo fragmento.

Método 2: HTML estático

• 1. Edita los archivos de /static — Abre src/main/resources/static/index.html y cualquier otra página HTML que deba mostrar el botón. Pega la etiqueta encima de la etiqueta de cierre body.
• 2. Vuelve a empaquetar — Los recursos estáticos se copian al jar durante la compilación, así que ejecuta tu compilación (por ejemplo mvn package o gradle build) y vuelve a desplegar. En desarrollo, el IDE o Spring Boot devtools pueden servir los recursos actualizados sin una compilación completa.

Spring Security y Content-Security-Policy

La referencia de Spring Security indica que no añade una Content Security Policy por defecto, porque no se puede conocer una política razonable sin el contexto de la aplicación. Así que, si no configuras ninguna CSP, la etiqueta simplemente se carga. Si declaras una política, la documentación muestra contentSecurityPolicy con policyDirectives, y debes añadir el origen de AnveVoice a script-src o el navegador lo bloqueará. Mientras pruebas, hay disponible un modo de solo informe mediante reportOnly().

• 1. Permite el host en tu configuración de seguridad — Amplía el bean SecurityFilterChain existente con la directiva de abajo, combinándola con las que ya uses. http.headers(headers -> headers .contentSecurityPolicy(csp -> csp .policyDirectives("script-src 'self' https://anvevoice.app") ) );

Comprueba que funciona

• 1. Lee la respuesta — Carga una página en una ventana privada, revisa el código fuente y busca embed.js. Debería aparecer una vez cerca del final del body.
• 2. Haz clic en el botón — Usa el botón del micrófono de la esquina inferior derecha, concede el acceso (HTTPS o localhost) y haz una pregunta.

Problemas comunes

• Fragmento no encontrado: la ruta de la expresión th:replace no coincide con la ubicación del archivo dentro de templates, o la extensión del archivo difiere del sufijo configurado.
• La página estática muestra la versión antigua: el jar todavía contiene los recursos anteriores. Vuelve a compilar.
• No aparece nada y la consola muestra un error de CSP: añade https://anvevoice.app a script-src, como se indicó arriba.
• Falta el botón en las páginas de error: esas páginas usan una plantilla aparte; incluye también allí el fragmento.

Fuentes

• Referencia de Spring Boot: aplicaciones web de Servlet (motores de plantillas, contenido estático) (https://docs.spring.io/spring-boot/reference/web/servlet.html) — consultado el 2026-10-14
• Tutorial de Thymeleaf 3.1: uso de Thymeleaf (fragmentos, URL de enlaces) (https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html) — consultado el 2026-10-14
• Referencia de Spring Security: cabeceras de respuesta HTTP (Content Security Policy) (https://docs.spring.io/spring-security/reference/servlet/exploits/headers.html) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una app de ASP.NET Core
• Cómo añadir AnveVoice a una aplicación Laravel
• Cómo añadir AnveVoice a un proyecto de Django
• Cómo añadir AnveVoice a un sitio de Express (Node.js)

Prueba AnveVoice en tu sitio

Plan gratuito: 0 US$, 50.000 tokens al mes, sin tarjeta. Obtén tu ID de inserción en el panel y pega una etiqueta.