Añade un agente de voz con IA a un sitio de Grav CMS

Cómo añadir AnveVoice a un sitio Grav

Grav no tiene un cuadro de administración para scripts de todo el sitio, así que la etiqueta va en la plantilla base Twig de tu tema, ya sea como HTML normal antes de la etiqueta de cierre body o a través del Asset Manager de Grav. Hazlo en un tema heredado para que una actualización del tema no la borre. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: templates/partials/base.html.twig en un tema hijo (heredado)
• Programación necesaria: Edición ligera de Twig; sin PHP
• Límites del plan: Ninguno. Grav es de código abierto y se ejecuta en tu propio alojamiento
• Tiempo: Unos 5 minutos, incluido el tema hijo

Cómo llegan los scripts a una página de Grav

Los temas de Grav son plantillas Twig. Las páginas extienden una plantilla base, y el Asset Manager, expuesto a Twig como el objeto assets, registra e imprime CSS y JavaScript. El patrón documentado en la guía del Asset Manager consiste en registrar los assets dentro de un bloque javascripts, imprimir el grupo de cabecera en un bloque assets diferido e imprimir un grupo llamado bottom justo antes de la etiqueta de cierre body, en un bloque bottom. Esa estructura importa porque tu línea de instalación es un único script. Puedes imprimirlo tú mismo o pasarlo por assets; ambas opciones son válidas. Copia primero tu ID de inserción (embed ID) desde app.anvevoice.app (el plan Free no requiere tarjeta) y, después, usa la etiqueta de abajo con tu propio ID.

• 1. Ten lista la etiqueta — Sustituye YOUR_EMBED_ID por el valor de tu panel de AnveVoice. Se pueden añadir al final parámetros de URL opcionales, como &position=bottom-left y &theme=dark. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Paso 1: usa un tema heredado

La guía de personalización de Grav recomienda la herencia de temas como vía segura para las actualizaciones. Los archivos que colocas en tu propia carpeta de tema tienen prioridad sobre el tema padre, y el tema padre puede seguir actualizándose. Si editas directamente las plantillas de Quark, una actualización del tema puede sobrescribir tu cambio.

• 1. Crea el tema hijo — Crea user/themes/mytheme/ con un archivo mytheme.yaml cuyo stream de tema liste user://themes/mytheme primero y user://themes/quark en segundo lugar, copia el blueprints.yaml del padre y define pages: theme: mytheme en user/config/system.yaml. La guía también muestra una ruta por línea de comandos mediante el plugin DevTools.
• 2. Copia la plantilla base — Copia templates/partials/base.html.twig del padre dentro de mytheme/templates/partials/. Como mytheme se busca antes que quark, tu copia tiene prioridad.

Paso 2: añade la etiqueta

Abre tu copia de base.html.twig. La versión de Quark termina con un bloque bottom que imprime el grupo bottom de assets justo antes del final del body. Es un buen lugar para la etiqueta. Las llamadas a assets.addJs dentro de un parcial incluido pueden no mostrarse donde esperas, porque la salida se produce en la plantilla que imprime el grupo. Mantén los registros en la plantilla base o en sus bloques.

• 1. Etiqueta simple (lo más sencillo) — Dentro del bloque bottom, después de la salida de assets.js('bottom'), pega la línea del script de AnveVoice exactamente como se muestra arriba. Twig deja intacto el HTML normal.
• 2. O a través del Asset Manager — Registra el archivo con assets.addJs y pasa loading: 'async' con position: 'after'. La guía indica que la opción loading solo surte efecto con las posiciones before o after, no con la posición predeterminada del pipeline, y muestra la salida async como una etiqueta script normal. Las URL externas no se combinan en el pipeline.
• 3. Guarda y actualiza — Guarda la plantilla y recarga una página de tu sitio. Los cambios en las plantillas suelen verse de inmediato mientras auto_reload de Twig esté activado.

Limítala a algunas páginas

Como la etiqueta vive en Twig, puedes envolverla en una condición. Por ejemplo, comprueba page.template o page.route e imprime el script solo en las páginas que coincidan. Las cabeceras de página de Grav no tienen una opción documentada por página para assets que hayamos podido confirmar, así que las condiciones de Twig son la vía fiable para controlar cada página.

Caché y ajustes de producción

Grav guarda en caché la salida renderizada. La guía de rendimiento explica que, con el método de comprobación de caché configurado en none, pensado para producción, debes borrar la caché manualmente después de cada cambio, y que Twig mantiene su propia caché de archivos controlada en la sección twig de system.yaml. Si defines auto_reload como false, Twig deja de vigilar los archivos de plantilla. Si tu cambio no aparece, borra la caché de Grav con la herramienta de línea de comandos de Grav o desde las herramientas del plugin Admin si lo usas, y luego recarga en una ventana privada.

Comprueba que funciona

• 1. Mira la página renderizada — Abre cualquier página pública y busca el botón del micrófono abajo a la derecha, o la posición que hayas definido.
• 2. Inspecciona el script — En las herramientas de desarrollo, confirma que una solicitud a anvevoice.app/embed.js se completa correctamente. Una solicitud bloqueada suele indicar una Content Security Policy que no incluye anvevoice.app en las fuentes de script.

Problemas habituales

• La etiqueta desaparece al actualizar Quark: editaste el tema padre. Pasa el cambio al tema heredado.
• Error fatal al crear el tema hijo: en Grav 1.7 los prefijos del stream de temas deben ir entre comillas simples, como advierte la guía de personalización.
• El botón falta solo en algunas páginas: una página usa una plantilla que no extiende tu plantilla base, así que añade la etiqueta también a esa plantilla.
• La solicitud del micrófono nunca aparece: sirve el sitio por HTTPS.

Fuentes

• Documentación de Grav: Asset Manager (addJs, JS en línea, grupos, carga async) (https://learn.getgrav.org/17/themes/asset-manager) — consultado el 2026-10-14
• Documentación de Grav: personalización y herencia de temas (https://learn.getgrav.org/17/themes/customization) — consultado el 2026-10-14
• Documentación de Grav: rendimiento y caché (borrado de caché, auto_reload de Twig) (https://learn.getgrav.org/17/advanced/performance-and-caching) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio ProcessWire
• Cómo añadir AnveVoice a un sitio de ExpressionEngine
• Cómo añadir AnveVoice a Xperience by Kentico
• Cómo añadir AnveVoice a un sitio web HTML sencillo

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.