Añade un agente de voz con IA a Statamic (guía 2026)

Cómo añadir AnveVoice a un sitio de Statamic

Statamic envuelve cada página en una vista de layout, así que añades la etiqueta de AnveVoice una sola vez en ese layout, cerca del final del body. Por defecto, el layout es resources/views/layout.antlers.html. Vacía la caché estática después si la usas. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: resources/views/layout.antlers.html (o layout.blade.php), justo antes de la etiqueta de cierre body
• Programación necesaria: Pegar una línea en un archivo de vista; hay que desplegar el archivo
• Límites del plan: Ninguno: los sitios de Statamic son tu propio código base de Laravel
• Tiempo: Unos 5 minutos

Antes de empezar

Regístrate en app.anvevoice.app (plan Free: 0 US$, 50.000 tokens al mes, un bot, sin tarjeta) y copia tu ID de incrustación. El panel de control de Statamic gestiona el contenido, no el marcado del front end, así que no hay ningún cuadro de scripts en el CP; el cambio vive en un archivo de vista de tu proyecto. La documentación de vistas de Statamic indica que las vistas se guardan en resources/views y que el layout contiene el marcado compartido, como la sección head, la cabecera, la navegación, el pie y las inclusiones de JavaScript. El contenido de la plantilla se inserta donde el layout coloca la variable {{ template_content }}. La documentación también muestra añadir una etiqueta script cerca del final del body del layout, que es el patrón que seguimos aquí.

• 1. Copia tu etiqueta de instalación — Sustituye YOUR_EMBED_ID por el ID que aparece en tu panel de AnveVoice (app.anvevoice.app). Los parámetros opcionales de URL son &position=bottom-left y &theme=dark. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: el layout Antlers por defecto

• 1. Abre el layout — Edita resources/views/layout.antlers.html. Statamic usa este archivo salvo que le indiques lo contrario.
• 2. Localiza el final del body — Ve a la etiqueta de cierre body. Cualquier script propio del sitio, como /js/site.js, normalmente estará justo encima.
• 3. Pega la etiqueta — Añade la etiqueta de AnveVoice en una línea nueva debajo de los scripts propios del sitio. La etiqueta no contiene llaves, así que Antlers la deja exactamente como está escrita.
• 4. Despliega y vacía las cachés — Sube el archivo a tu servidor. Después vacía las cachés de Statamic: en el panel de control abre Utilities (Utilidades) > Cache Manager (Gestor de caché), o ejecuta php please static:clear si usas caché estática, y php artisan view:clear para las vistas compiladas.

Método 2: un layout Blade u otro layout

Statamic renderiza las vistas que terminan en .blade.php con Blade en lugar de Antlers, así que un sitio Blade pondría la misma etiqueta en layout.blade.php. También puedes indicar a todo el sitio otro layout en config/statamic/system.php, y las entradas o secciones individuales pueden elegir otro layout mediante la variable layout. Dondequiera que añadas la etiqueta, recuerda que todo layout que uses la necesita; un segundo layout sin la etiqueta no mostrará el botón de voz. Si construyes con parciales, crea un pequeño parcial como _voice.antlers.html que contenga la etiqueta e inclúyelo desde cada layout con la etiqueta partial. Statamic recomienda un prefijo de guion bajo para los archivos que existen solo como parciales. Así el ID de incrustación queda en un solo lugar cuando hay varios layouts.

Particularidades de Statamic

La caché estática es la sorpresa habitual. Si sirves HTML pregenerado mediante la caché estática de Statamic, las páginas ya cacheadas mantienen su marcado antiguo hasta que se vacíe o regenere la caché, así que el botón parecerá faltar en algunas URL y estar presente en otras. Vaciar la caché estática después del despliegue resuelve el problema. Control por entorno: si solo quieres el asistente activo en producción, envuelve la etiqueta en una comprobación de tu entorno, por ejemplo una directiva @production de Blade o una condición de Antlers sobre un valor de configuración, para que el desarrollo local y el staging permanezcan en silencio. Statamic sin cabeza (headless): si usas Statamic solo a través de su API o GraphQL para un front end separado, el layout no interviene, y la etiqueta pertenece a ese otro front end.

Comprueba que funciona

• 1. Abre varias URL en una ventana privada — Prueba la página de inicio, una página de entrada y un índice de colección.
• 2. Usa el botón de voz — El botón redondo del micrófono debería aparecer abajo a la derecha. Permite el micrófono (se requiere HTTPS) y pregunta por tu contenido.
• 3. Revisa el HTML — Busca anvevoice.app/embed.js en el código fuente; debería aparecer una vez.

Problemas comunes en Statamic

• Falta el botón en algunas páginas: esas páginas usan otro layout, o se sirven desde una caché estática desactualizada.
• El cambio no está en vivo: el archivo de vista se editó en local pero no se desplegó, o las vistas compiladas están obsoletas; ejecuta php artisan view:clear.
• La etiqueta aparece dos veces: existe en el layout y en un parcial que el layout también incluye.
• Error de Antlers al guardar: se pegó una llave suelta junto a la etiqueta; la etiqueta en sí no contiene ninguna.
• No aparece el aviso del micrófono en una prueba local: los navegadores tratan localhost de forma distinta a un sitio HTTP en vivo; prueba en una URL HTTPS.

Fuentes

• Docs de Statamic: vistas, layouts y plantillas (https://statamic.dev/frontend/views) — consultado el 2026-10-14
• Docs de Statamic: vistas (versión en Markdown) (https://statamic.dev/frontend/views.md) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio de Craft CMS
• Cómo añadir AnveVoice a una aplicación Laravel
• Cómo añadir AnveVoice a un sitio de Umbraco
• Cómo añadir AnveVoice a un sitio de Drupal

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.