Add a Voice AI Agent to an ASP.NET Core App
Add the AnveVoice voice agent to ASP.NET Core Razor Pages, MVC or Blazor with one script tag in _Layout.cshtml or App.razor, plus CSP notes.
How to add AnveVoice to an ASP.NET Core app
In ASP.NET Core the shared page shell is _Layout.cshtml for Razor Pages and MVC, and App.razor for a Blazor Web App. Paste the AnveVoice tag there, after the page body, rebuild, and the voice button appears on every page that uses the layout. Steps checked against the official documentation on 2026-10-14.
At a glance
- Where the code goes: Pages/Shared/_Layout.cshtml (Razor Pages), Views/Shared/_Layout.cshtml (MVC), Components/App.razor (Blazor Web App)
- Coding needed: One line of markup; no NuGet package
- Plan limits: None from ASP.NET Core; any host that runs the app (IIS, Kestrel, Azure App Service, containers)
- Time: About 3 minutes
Pick the layout file for your app type
Microsoft's layout documentation says that by convention the default layout is named _Layout.cshtml, located in Pages/Shared for Razor Pages and in Views/Shared for controllers with views. It also notes that apps do not need a layout and may define several, each view choosing its own through the Layout property, usually set once in _ViewStart.cshtml. The layout calls RenderBody() where the view's content goes and may call RenderSection to let views add optional content such as scripts. Blazor is different. The Blazor project structure article says that in a Blazor Web App the head and body content, and the Blazor script, are in Components/App.razor, while in a standalone Blazor WebAssembly app they are in wwwroot/index.html. Those are the files to edit. The steps below use ASP.NET Core 10, the current documentation release; earlier supported versions use the same files.
- 1. Get your install tag — Create a bot in the AnveVoice dashboard (app.anvevoice.app) and copy the embed ID into the URL. Razor treats @ as a code marker, but this tag contains none, so it needs no escaping. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>
Method 1: Razor Pages or MVC layout
The older RenderSection call shown in Microsoft's article works identically; templates in recent projects use the async variant.
- 1. Open the layout — Edit Pages/Shared/_Layout.cshtml or Views/Shared/_Layout.cshtml. If your project has several layouts, edit each one that should show the button.
- 2. Place the tag before the Scripts section — Put it near the end of the body, ahead of the RenderSection call that the template already contains. Code: <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. Rebuild and run — Razor views compile with the app. Restart with dotnet run or redeploy; hot reload also applies the change in development.
Method 2: a section for selected pages
Microsoft documents sections as the way a view contributes content to a layout: the layout declares RenderSection("Scripts", required: false) and a page supplies @section Scripts { ... }. Use that if only some pages should carry the voice agent. One rule from the documentation matters: sections defined in a view are available only to its immediate layout, and they cannot be referenced from partials or view components.
- 1. Add the section in the page — In Pages/Pricing.cshtml or a view: Code: @section Scripts { <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> }
Method 3: Blazor
The Blazor JavaScript location article lists loading a script in the body markup as a supported approach and describes placing the tags inside the closing body element after the Blazor script reference. It cautions against placing script tags inside Razor components, because behavior can differ under interactive rendering or enhanced navigation, so keep the AnveVoice tag in App.razor or index.html rather than in a page component.
- 1. Edit the host file — In Components/App.razor (Blazor Web App) or wwwroot/index.html (WebAssembly), add the tag after the Blazor script. Code: <script src="_framework/blazor.web.js"></script> <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script> </body>
Security headers and caching
- ASP.NET Core does not add a Content Security Policy for you. If your middleware or reverse proxy sets one, allow https://anvevoice.app in script-src.
- Blazor Server and the interactive render modes keep a long-lived connection; the voice button is plain page markup and is unaffected, but avoid modifying DOM elements that Blazor renders.
- Response caching: if you use output or response caching, clear it after the deploy.
- Environment tag helper: wrap the tag in <environment include="Production"> to keep it off local and staging copies.
Check that it works
- 1. Inspect the output — Open the site in a private window, view source and look for embed.js once, near the end of the body.
- 2. Talk to it — Click the microphone button in the bottom-right corner, allow the microphone (HTTPS or localhost) and ask a question.
Common problems
- No button on some pages: they use another layout, or set Layout = null. Check _ViewStart.cshtml and the page itself.
- Runtime error about sections: a view defines @section Scripts but its layout never calls RenderSection for it.
- Button vanishes after Blazor navigation: the tag was placed inside a component. Move it to App.razor.
- Stale page: browser or CDN cache, or an old publish folder on IIS.
Sources
- Microsoft Learn: Layout in ASP.NET Core (https://learn.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-10.0) — checked 2026-10-14
- Microsoft Learn: Introduction to Razor Pages in ASP.NET Core (https://learn.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-10.0) — checked 2026-10-14
- Microsoft Learn: JavaScript location in ASP.NET Core Blazor apps (https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/location-of-javascript?view=aspnetcore-10.0) — checked 2026-10-14
- Microsoft Learn: ASP.NET Core Blazor project structure (https://learn.microsoft.com/en-us/aspnet/core/blazor/project-structure?view=aspnetcore-10.0) — checked 2026-10-14
Related
- How to add AnveVoice to a Spring Boot application
- How to add AnveVoice to an Express (Node.js) site
- How to add AnveVoice to a Laravel application
- How to add AnveVoice to a WordPress site
Try AnveVoice on your site
Free plan: $0, 50,000 tokens a month, no card. Get your embed ID in the dashboard, then paste one tag.