Añade un agente de voz con IA a una app ASP.NET Core

Cómo añadir AnveVoice a una app de ASP.NET Core

En ASP.NET Core, la estructura compartida de la página es _Layout.cshtml en Razor Pages y MVC, y App.razor en una Blazor Web App. Pega ahí la etiqueta de AnveVoice, después del cuerpo de la página, vuelve a compilar y el botón de voz aparecerá en todas las páginas que usen ese diseño (layout). Pasos comprobados con la documentación oficial el 2026-10-14.

En resumen

• Dónde va el código: Pages/Shared/_Layout.cshtml (Razor Pages), Views/Shared/_Layout.cshtml (MVC), Components/App.razor (Blazor Web App)
• Código necesario: Una línea de marcado; sin paquete NuGet
• Límites del plan: Ninguno por parte de ASP.NET Core; cualquier host que ejecute la app (IIS, Kestrel, Azure App Service, contenedores)
• Tiempo: Unos 3 minutos

Elige el archivo de diseño según el tipo de app

La documentación de Microsoft sobre layouts indica que, por convención, el diseño predeterminado se llama _Layout.cshtml y está en Pages/Shared para Razor Pages y en Views/Shared para controladores con vistas. También señala que las apps no necesitan un diseño y pueden definir varios, y que cada vista elige el suyo mediante la propiedad Layout, que normalmente se configura una vez en _ViewStart.cshtml. El diseño llama a RenderBody() en el lugar donde va el contenido de la vista y puede llamar a RenderSection para que las vistas añadan contenido opcional, como scripts. Blazor es distinto. El artículo sobre la estructura de proyectos de Blazor indica que, en una Blazor Web App, el contenido de head y body, así como el script de Blazor, están en Components/App.razor, mientras que en una app independiente de Blazor WebAssembly están en wwwroot/index.html. Esos son los archivos que hay que editar. Los pasos siguientes usan ASP.NET Core 10, la versión actual de la documentación; las versiones compatibles anteriores usan los mismos archivos.

• 1. Obtén tu etiqueta de instalación — Crea un bot en el panel de AnveVoice (app.anvevoice.app) y copia el ID de incrustación en la URL. Razor trata @ como marca de código, pero esta etiqueta no contiene ninguno, así que no necesita escape. <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Método 1: diseño de Razor Pages o MVC

La llamada RenderSection más antigua que muestra el artículo de Microsoft funciona exactamente igual; las plantillas de proyectos recientes usan la variante async.

• 1. Abre el diseño — Edita Pages/Shared/_Layout.cshtml o Views/Shared/_Layout.cshtml. Si tu proyecto tiene varios diseños, edita cada uno que deba mostrar el botón.
• 2. Coloca la etiqueta antes de la sección Scripts — Ponla cerca del final del body, antes de la llamada a RenderSection que ya incluye la plantilla. <script src="~/js/site.js" asp-append-version="true"></script> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> @await RenderSectionAsync("Scripts", required: false) </body> </html>
• 3. Vuelve a compilar y ejecutar — Las vistas de Razor se compilan con la app. Reinicia con dotnet run o vuelve a publicar; la recarga en caliente también aplica el cambio en desarrollo.

Método 2: una sección para páginas concretas

Microsoft documenta las secciones como la forma en que una vista aporta contenido a un diseño: el diseño declara RenderSection(“Scripts”, required: false) y la página proporciona @section Scripts { ... }. Úsalo si solo algunas páginas deben incluir el agente de voz. Hay una regla de la documentación que importa: las secciones definidas en una vista solo están disponibles para su diseño inmediato y no se pueden referenciar desde parciales ni desde componentes de vista.

• 1. Añade la sección en la página — En Pages/Pricing.cshtml o en una vista: @section Scripts { <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> }

Método 3: Blazor

El artículo de Blazor sobre la ubicación de JavaScript indica que cargar un script en el marcado del body es un enfoque compatible, y describe colocar las etiquetas dentro del elemento body de cierre, después de la referencia al script de Blazor. Advierte que no se deben colocar etiquetas script dentro de componentes Razor, porque el comportamiento puede variar con el renderizado interactivo o la navegación mejorada, así que mantén la etiqueta de AnveVoice en App.razor o en index.html y no en un componente de página.

• 1. Edita el archivo host — En Components/App.razor (Blazor Web App) o en wwwroot/index.html (WebAssembly), añade la etiqueta después del script de Blazor. <script src="_framework/blazor.web.js"></script> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </body>

Cabeceras de seguridad y caché

• ASP.NET Core no añade por ti una Content Security Policy. Si tu middleware o tu proxy inverso establece una, permite https://anvevoice.app en script-src.
• Blazor Server y los modos de renderizado interactivos mantienen una conexión de larga duración; el botón de voz es marcado normal de la página y no se ve afectado, pero evita modificar elementos del DOM que Blazor renderiza.
• Caché de respuestas: si usas caché de salida o de respuesta, bórrala después de desplegar.
• Tag helper de entorno: envuelve la etiqueta en el tag helper environment con include “Production” para que no aparezca en copias locales ni de pruebas (staging).

Comprueba que funciona

• 1. Inspecciona el resultado — Abre el sitio en una ventana privada, ve el código fuente y busca embed.js una vez, cerca del final del body.
• 2. Habla con él — Haz clic en el botón del micrófono de la esquina inferior derecha, permite el micrófono (HTTPS o localhost) y haz una pregunta.

Problemas frecuentes

• No aparece el botón en algunas páginas: usan otro diseño o definen Layout = null. Revisa _ViewStart.cshtml y la propia página.
• Error en tiempo de ejecución sobre secciones: una vista define @section Scripts, pero su diseño nunca llama a RenderSection para esa sección.
• El botón desaparece tras navegar en Blazor: la etiqueta se colocó dentro de un componente. Muévela a App.razor.
• Página obsoleta: caché del navegador o de un CDN, o una carpeta de publicación antigua en IIS.

Fuentes

• Microsoft Learn: diseños (layouts) en ASP.NET Core (https://learn.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-10.0) — consultado el 2026-10-14
• Microsoft Learn: introducción a Razor Pages en ASP.NET Core (https://learn.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-10.0) — consultado el 2026-10-14
• Microsoft Learn: ubicación de JavaScript en apps de Blazor de ASP.NET Core (https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/location-of-javascript?view=aspnetcore-10.0) — consultado el 2026-10-14
• Microsoft Learn: estructura de proyectos de Blazor en ASP.NET Core (https://learn.microsoft.com/en-us/aspnet/core/blazor/project-structure?view=aspnetcore-10.0) — consultado el 2026-10-14

Relacionado

• Cómo añadir AnveVoice a una aplicación de Spring Boot
• Cómo añadir AnveVoice a un sitio de Express (Node.js)
• Cómo añadir AnveVoice a una aplicación Laravel
• Cómo añadir AnveVoice a un sitio WordPress

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.