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

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

Umbraco renderiza las páginas a partir de plantillas Razor, y las plantillas hijas reutilizan un layout maestro. Añade la etiqueta de AnveVoice al layout maestro justo antes de la etiqueta de cierre body, ya sea en el editor de plantillas del backoffice o en el archivo .cshtml de tu carpeta Views, y vuelve a desplegar. Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: La plantilla de layout maestro (un archivo .cshtml en Views), encima de la etiqueta de cierre body
• Programación necesaria: Pegar una línea en una plantilla Razor; un despliegue si gestionas las plantillas en control de versiones
• Límites del plan: Ninguno por parte de Umbraco CMS; Umbraco Cloud sigue tu flujo de despliegue habitual
• Tiempo: Unos 5 minutos

Antes de empezar

Crea tu bot de AnveVoice en app.anvevoice.app (plan Free: 0 US$, 50.000 tokens al mes, un bot, sin tarjeta) y copia el ID de incrustación. La documentación de plantillas de Umbraco explica que las plantillas se basan en vistas Razor de ASP.NET MVC y son archivos .cshtml, que puedes gestionar desde la sección Settings (Configuración) del backoffice. Se registran en la base de datos de Umbraco, así que un archivo por sí solo no crea una plantilla. La misma página recomienda mantener las plantillas como archivos .cshtml en la carpeta Views bajo control de versiones para el trabajo continuo, y considerar el editor del backoffice útil para ediciones locales rápidas. Ese consejo decide qué método de abajo te conviene.

• 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>

Localiza el layout maestro

Una plantilla hija establece un layout, por ejemplo Layout = "MainView.cshtml";, lo que convierte el otro archivo en maestro. En el maestro, @RenderBody() marca el lugar donde se inserta el contenido de la hija, así que las cabeceras y pies definidos en el maestro aparecen en cada página que lo use. Poner la etiqueta en el maestro hace que todas las hijas la hereden. Distintos tutoriales usan nombres de maestro distintos (Master.cshtml, master.cshtml, _Layout.cshtml), así que revisa la línea Layout de cualquier plantilla de página para ver qué archivo usa la tuya. Los nombres pueden distinguir mayúsculas y minúsculas en hosts Linux.

Método 1: edita el archivo .cshtml y despliega (recomendado)

• 1. Abre el archivo maestro — En tu proyecto, abre Views/<master>.cshtml (por ejemplo Views/Master.cshtml o Views/Shared/_Layout.cshtml).
• 2. Coloca la etiqueta — Pega la etiqueta de AnveVoice en su propia línea justo encima de la etiqueta de cierre body, después de @RenderBody() y de las llamadas @RenderSection para scripts. La etiqueta no contiene símbolos @, así que Razor no intentará interpretarla.
• 3. Compila y despliega — Haz commit del cambio y despliega como haces normalmente. Umbraco sirve la vista actualizada cuando el sitio se reinicia o la vista se recompila.

Método 2: usar el editor de plantillas del backoffice

• 1. Abre Settings — Inicia sesión en el backoffice y abre la sección Settings (Configuración), y después el árbol Templates (Plantillas).
• 2. Selecciona la plantilla maestra — Haz clic en tu layout maestro. Las plantillas que lo usan muestran el maestro elegido mediante el botón Layout template (Plantilla de layout) encima del editor.
• 3. Añade la etiqueta y guarda — Pega la etiqueta encima de la etiqueta de cierre body y guarda. Si tu sitio se despliega desde control de versiones, copia la misma edición también en el archivo .cshtml de tu repositorio; de lo contrario, el siguiente despliegue la sobrescribirá.

Particularidades de Umbraco

Las plantillas solo se renderizan en los tipos de documento que las permiten, así que una página que de repente no tiene botón de voz puede usar otra plantilla o su propio Layout. La página de plantillas indica que se permite una plantilla en un Document Type (Tipo de documento) mediante su vista de espacio de trabajo Templates. Revisa cualquier página que se comporte de forma distinta. Secciones: si tu maestro declara una sección con nombre para scripts (por ejemplo @RenderSection("scripts", false)), también puedes poner la etiqueta en una sección de cada hija. Es más trabajo; el maestro es más sencillo. Ten en cuenta la advertencia de la documentación: una sección obligatoria que falte provoca errores en el sitio, así que no conviertas una sección en obligatoria solo para esto. Umbraco sin cabeza (headless): si sirves contenido mediante la Content Delivery API a un front end separado, el layout Razor no interviene. Pon la etiqueta en ese front end.

Comprueba que funciona

• 1. Abre el sitio en vivo en una ventana privada — Prueba la página de inicio y una página hija.
• 2. Usa el botón de voz — Un botón redondo de micrófono aparece abajo a la derecha por defecto; permite el micrófono (se requiere HTTPS) y haz una pregunta.
• 3. Revisa el HTML — Busca anvevoice.app/embed.js en el código fuente. Si falta, la página usa una plantilla sin tu layout o un CDN está sirviendo HTML antiguo.

Problemas comunes en Umbraco

• Añadida en el backoffice pero desaparece tras el despliegue: el archivo del control de versiones no recibió el cambio.
• Falta en un tipo de página: esa plantilla establece Layout = null o un maestro distinto.
• Error de compilación de Razor: la etiqueta se pegó dentro de un bloque de código (@{ }) en lugar de en la parte HTML del archivo.
• No se ve tras guardar: las salidas pueden estar en caché por la caché de salida o por un CDN; purgalas.

Fuentes

• Docs de Umbraco: plantillas (vistas Razor, layouts, RenderBody) (https://docs.umbraco.com/umbraco-cms/develop-with-umbraco/templating-and-rendering/templates) — consultado el 2026-10-14
• Tutorial de la documentación de Umbraco: crear una plantilla maestra (scripts antes de la etiqueta de cierre body) (https://docs.umbraco.com/umbraco-cms/17.latest/develop-with-umbraco/tutorials/creating-a-basic-website/creating-master-template-part-1) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a un sitio de Craft CMS
• Cómo añadir AnveVoice a Xperience by Kentico
• Cómo añadir AnveVoice a un sitio de DNN
• Cómo añadir AnveVoice a una app de ASP.NET Core

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.