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

Cómo añadir AnveVoice a un sitio de Craft CMS

En Craft CMS cargas el script desde tu plantilla de layout principal con la etiqueta Twig {% js %}, que registra un archivo externo y lo muestra al final del body. Como Craft muestra los assets registrados mediante endBody(), tu layout debe llamar a esa función. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Tu layout base en la carpeta de plantillas, con la etiqueta Twig {% js %} (o una etiqueta script normal antes del body de cierre)
• Código necesario: Una línea de Twig; se necesita acceso a las plantillas (código desplegado o el editor de archivos del host)
• Límites del plan: Ninguno por parte de Craft: las plantillas son tu propio código, aunque un hosting gestionado con restricciones puede requerir un despliegue
• Tiempo: Unos 5 minutos

Antes de empezar

Obtén tu ID de incrustación en app.anvevoice.app (plan gratuito: $0, 50.000 tokens al mes, un bot, sin tarjeta). Craft no tiene un cuadro de administración para scripts, porque todo el HTML del front-end sale de plantillas Twig que viven en la carpeta templates del proyecto. Eso convierte el cambio en un despliegue de código, así que hazlo en control de versiones y no directamente en un servidor de producción. Localiza tu layout base. La mayoría de los sitios de Craft tienen un archivo como _layout.twig que otras plantillas extienden con {% extends %}. Añadir la etiqueta una sola vez ahí cubre todas las plantillas construidas a partir de él. Si algunas plantillas son documentos HTML completos e independientes, también necesitan la etiqueta.

• 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: la etiqueta js de Twig (recomendado)

La referencia de Twig de Craft describe {% js %} como la etiqueta que registra un archivo JavaScript o un bloque de código en la página. Para registrar un archivo, el argumento debe empezar por https:// o http://, o terminar en .js. Por defecto el script se muestra al final del body, y puedes elegir otro lugar con palabras clave como at head o at beginBody. El parámetro with añade atributos HTML a la etiqueta script; el ejemplo de la propia página usa defer, y el mismo patrón admite async. Craft además muestra una URL repetida una sola vez, así que registrarla desde varias plantillas no la duplicará.

• 1. Abre el layout — Edita templates/_layout.twig (o el archivo que extiendan tus páginas).
• 2. Registra el script — Añade la etiqueta en cualquier punto del layout, fuera de cualquier condición que no quieras. Craft colocará por sí mismo la etiqueta script. {% js "https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" with { async: true } %}
• 3. Confirma que endBody está presente — La referencia de funciones de Craft indica que endBody() debe colocarse justo antes de la etiqueta de cierre body, y es el punto donde se muestran los scripts de final de body. Comprueba que tu layout contiene {{ endBody() }} ahí. Sin ello, el script registrado no tiene dónde imprimirse.
• 4. Despliega y borra las cachés — Despliega el cambio de plantilla. Si usas las cachés de plantilla de Craft o un plugin de caché estática, bórralas para que las páginas existentes incluyan el script.

Método 2: una etiqueta script normal

Como Twig deja pasar el HTML sin modificarlo, también puedes colocar la etiqueta estándar de AnveVoice en el layout, justo encima de la etiqueta de cierre body, exactamente como en el paso de instalación. Es sencillo y evidente para el siguiente desarrollador, pero no se beneficia de la deduplicación de Craft y no aparecerá en las plantillas que no compartan el layout. Elige un método por sitio. Si usas {% html %} en su lugar, Craft lo documenta como la forma de registrar HTML arbitrario, colocado por defecto justo antes de la etiqueta de cierre body.

Puntos específicos de Craft

Control por entorno: si quieres el agente de voz solo en producción, envuelve la etiqueta en una condición sobre craft.app.config.general.devMode o una variable de entorno, para que los sitios locales y de staging no lo carguen. Para un único tipo de página, coloca la etiqueta {% js %} dentro de la plantilla de esa página en lugar del layout. Configuraciones headless: si Craft se usa como CMS headless detrás de un front-end de JavaScript, no hay plantillas Twig en el proceso, así que la etiqueta debe ir en el shell HTML de ese front-end. Craft Cloud y otros hostings gestionados despliegan las plantillas desde tu repositorio, así que cuenta con el tiempo habitual de compilación y despliegue antes de revisar el sitio en vivo.

Comprueba que funciona

• 1. Abre la página en vivo en una ventana privada — Carga una página construida a partir de tu layout.
• 2. Busca el botón de voz — Un botón redondo con micrófono aparece abajo a la derecha de forma predeterminada. Haz clic, permite el micrófono (se requiere HTTPS) y haz una pregunta.
• 3. Inspecciona el HTML — Busca anvevoice.app/embed.js en el código fuente. Debería estar justo antes de la etiqueta de cierre body, con el atributo async.

Problemas frecuentes en Craft CMS

• Nada en el código fuente: falta endBody() en el layout, o la página no extiende el layout que editaste.
• Error de sintaxis en Twig: las comillas de la URL deben ser comillas rectas y el objeto with necesita llaves emparejadas.
• Solo aparece en producción tras un despliegue: los cambios de plantilla viven en el código, no en el panel de control.
• La etiqueta aparece dos veces: se añadieron tanto {% js %} como una etiqueta normal. Conserva una sola.
• No aparece la solicitud del micrófono: el sitio usa HTTP; usa HTTPS.

Fuentes

• Documentación de Craft CMS 5.x: etiquetas de Twig (js y html) (https://craftcms.com/docs/5.x/reference/twig/tags.html) — consultado el 2026-10-14
• Documentación de Craft CMS 5.x: funciones de Twig (beginBody, endBody) (https://craftcms.com/docs/5.x/reference/twig/functions.html) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio de Statamic
• Cómo añadir AnveVoice a un sitio de Drupal
• Cómo añadir AnveVoice a un sitio de Umbraco
• Cómo añadir AnveVoice a un sitio de Ghost

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.