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

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

Drupal no permite pegar un script en un cuadro de configuración. Su forma documentada de cargar un script externo es una biblioteca: declara la URL de AnveVoice en el libraries.yml de tu tema con type external y luego adjúntala desde el info.yml del tema, para que se cargue en todas las páginas. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: THEME.libraries.yml (declaración) y THEME.info.yml (adjunto global) en un tema personalizado o subtema
• Código necesario: Dos pequeñas ediciones de YAML y una reconstrucción de caché; se requiere acceso a la carpeta del tema
• Límites del plan: Ninguno: Drupal autoalojado permite editar tu propio tema. Las plataformas de Drupal alojadas pueden restringir el acceso a archivos
• Tiempo: Unos 10 minutos

Antes de empezar

Necesitas un ID de incrustación de AnveVoice (plan gratuito: $0, 50.000 tokens al mes, un bot; regístrate en app.anvevoice.app) y la capacidad de editar archivos en tu tema activo. No edites directamente un tema del núcleo ni un tema aportado por la comunidad, porque al actualizarlo se sobrescribirá tu cambio. Usa un tema personalizado o un subtema del que uses. En los ejemplos, mytheme representa el nombre de máquina de ese tema. Drupal no carga nada que no hayas solicitado de forma explícita, por eso pegar una etiqueta script simple en un bloque o en el cuerpo de un nodo no es fiable. Los formatos de texto como Basic HTML eliminan las etiquetas script, e incluso los formatos permisivos son un mal lugar para código de todo el sitio. El sistema de bibliotecas es la forma documentada y resistente a las actualizaciones.

• 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. Para Drupal solo necesitas la parte de URL, https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID, que va en un archivo YAML. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: declarar una biblioteca externa (recomendado)

La documentación de temas de Drupal.org indica que todas las bibliotecas de assets se definen en un archivo *.libraries.yml dentro de la carpeta del tema, que un archivo externo usa su URL completa como clave con type: external, y que atributos como async se renderizan como atributos HTML simples. Por defecto, el JavaScript se añade en el pie, que es donde debe ir un widget. Si estableces header: true, se moverá al head, así que no lo pongas.

• 1. Define la biblioteca — Abre mytheme.libraries.yml (créalo si el tema no tiene uno) y añade una entrada. Entrecomilla la URL porque contiene un signo de interrogación y un signo igual. anvevoice: version: 1.0 js: "https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID": type: external attributes: async: true
• 2. Adjúntala a todas las páginas — Abre mytheme.info.yml y añade la biblioteca bajo la clave libraries. Combínala con las entradas que ya haya. libraries: - mytheme/anvevoice
• 3. Reconstruye las cachés — En el panel de administración ve a Configuration > Development > Performance y haz clic en Clear all caches (o ejecuta drush cr). Las definiciones de bibliotecas están en caché, así que el nuevo asset solo aparece tras una reconstrucción.
• 4. Recarga el sitio — Abre el front-end en una ventana privada y busca el botón del micrófono.

Mostrarlo solo en páginas concretas

Adjuntarlo mediante info.yml pone el script en todas las páginas que usan el tema. Si solo quieres el agente de voz en, por ejemplo, tus páginas de soporte o de precios, omite la entrada de info.yml y adjunta la biblioteca desde una plantilla. La documentación de Drupal menciona la función Twig attach_library() para esto: añade {{ attach_library('mytheme/anvevoice') }} a la plantilla Twig de ese tipo de página, como una plantilla de nodo para un tipo de contenido concreto. Una función preprocess con la propiedad de renderizado #attached hace lo mismo en PHP.

Método 2: un módulo que inyecta scripts

El módulo contribuido Asset Injector permite a los administradores inyectar CSS y JavaScript según reglas configurables sin editar un tema. Su página de proyecto indica la versión 8.x-2.21 para Drupal 10.3 y 11, la marca como de solo correcciones de mantenimiento y muestra que está cubierto por la política de avisos del Security Team. Sus entradas de JavaScript contienen código de script, no una etiqueta script, así que cargar un archivo externo mediante él supone escribir unas pocas líneas de código de carga. Para una instalación de una sola línea es más trabajo que el método de bibliotecas, así que úsalo solo si no puedes tocar el tema.

Comprueba que funciona

• 1. Usa una ventana privada — Cierra sesión o usa una ventana privada; algunas cachés sirven un marcado distinto a los administradores.
• 2. Busca el botón y prueba el micrófono — El botón redondo aparece abajo a la derecha de forma predeterminada. Haz clic, permite el micrófono (se requiere HTTPS) y haz una pregunta.
• 3. Inspecciona el código fuente si no aparece — Busca anvevoice.app/embed.js en el HTML renderizado. Si falta, comprueba que el tema es el activo, que la sangría del YAML es correcta y que se borraron las cachés.

Problemas frecuentes en Drupal

• El script no se muestra: la biblioteca está declarada pero nunca se adjuntó. Confirma que mytheme/anvevoice aparece bajo libraries en el info.yml del tema activo.
• Error de análisis YAML tras editar: un tabulador o una sangría incorrecta. YAML necesita espacios, y la clave de URL entre comillas debe ir en su propia línea.
• Funciona para los administradores, no para los visitantes: la caché de página de Drupal o un CDN sirve la página antigua. Borra todas las cachés y purga el CDN.
• Se pierde al cambiar de tema: las bibliotecas adjuntas en el info.yml de un tema solo se aplican a ese tema. Añade la entrada también al nuevo tema.
• Pegado en un bloque y no pasa nada: el formato de texto eliminó la etiqueta. Usa el método de bibliotecas.

Fuentes

• Drupal.org: añadir assets (CSS, JS) a un tema de Drupal mediante *.libraries.yml (https://www.drupal.org/docs/theming-drupal/adding-assets-css-js-to-a-drupal-theme-via-librariesyml) — consultado el 2026-10-14
• Drupal.org: página del proyecto Asset Injector (https://www.drupal.org/project/asset_injector) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio Joomla
• Cómo añadir AnveVoice a un sitio WordPress
• Cómo añadir AnveVoice a un sitio de Craft CMS
• Cómo añadir AnveVoice a un sitio de TYPO3

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.