Add a Voice AI Agent to Umbraco (2026 Guide)

How to add AnveVoice to an Umbraco site

Umbraco renders pages from Razor templates, and child templates reuse a master layout. Add the AnveVoice tag to the master layout just before the closing body tag, either in the backoffice template editor or in the .cshtml file in your Views folder, and redeploy. Steps checked against the official documentation on 2026-10-14.

At a glance

• Where the code goes: The master layout template (a .cshtml file in Views) above the closing body tag
• Coding needed: Paste one line into a Razor template; a deploy if you manage templates in source control
• Plan limits: None from Umbraco CMS itself; Umbraco Cloud follows your normal deployment flow
• Time: About 5 minutes

Before you start

Create your AnveVoice bot at app.anvevoice.app (Free plan: $0, 50,000 tokens a month, one bot, no card) and copy the embed ID. Umbraco's templating documentation explains that templates build on ASP.NET MVC Razor views and are .cshtml files, which you can manage from the Settings section of the backoffice. They are registered in the Umbraco database, so a file alone does not create a template. The same page recommends keeping templates as .cshtml files in the Views folder under source control for ongoing work, treating the backoffice editor as handy for quick local edits. That advice decides which method below suits you.

• 1. Copy your install tag — Replace YOUR_EMBED_ID with the ID shown in your AnveVoice dashboard (app.anvevoice.app). Optional URL parameters are &position=bottom-left and &theme=dark. Code: <script src="https://anvevoice.app/embed.js?embedId=YOUR_EMBED_ID" async></script>

Find the master layout

A child template sets a layout, for example Layout = "MainView.cshtml";, which makes the other file a master. In the master, @RenderBody() marks where the child's content is inserted, so headers and footers defined in the master appear on every page that uses it. Put the tag in the master and every child inherits it. Different tutorials use different master names (Master.cshtml, master.cshtml, _Layout.cshtml), so look at the Layout line of any page template to see which file yours uses. Names can be case-sensitive on Linux hosts.

Method 1: edit the .cshtml file and deploy (recommended)

• 1. Open the master file — In your project open Views/<master>.cshtml (for example Views/Master.cshtml or Views/Shared/_Layout.cshtml).
• 2. Place the tag — Paste the AnveVoice tag on its own line directly above the closing body tag, after @RenderBody() and any @RenderSection calls for scripts. The tag contains no @ symbols, so Razor will not try to interpret it.
• 3. Build and deploy — Commit the change and deploy as you normally do. Umbraco serves the updated view once the site restarts or the view recompiles.

Method 2: use the backoffice template editor

• 1. Open Settings — Sign in to the backoffice and open the Settings section, then the Templates tree.
• 2. Select the master template — Click your master layout. Templates that use it show the master chosen through the Layout template button above the editor.
• 3. Add the tag and save — Paste the tag above the closing body tag and save. If your site is deployed from source control, copy the same edit into the .cshtml file in your repository too, otherwise the next deployment will overwrite it.

Umbraco-specific points

Templates only render on document types that allow them, so a page that suddenly has no voice button may use a different template or its own Layout. The templating page notes that you allow a template on a Document Type through its Templates workspace view. Check any page that behaves differently. Sections: if your master declares a named section for scripts (for example @RenderSection("scripts", false)), you can alternatively put the tag in a section of each child. That is more work; the master is simpler. Notice the docs' warning that a missing mandatory section causes errors on the site, so do not make a section mandatory just for this. Headless Umbraco: if you serve content through the Content Delivery API to a separate front end, the Razor layout is not involved. Put the tag in that front end.

Check that it works

• 1. Open the live site in a private window — Test the home page and a child page.
• 2. Use the voice button — A round microphone button appears bottom-right by default; allow the microphone (HTTPS required) and ask a question.
• 3. Check the HTML — Search the source for anvevoice.app/embed.js. If it is missing, the page uses a template without your layout or a CDN is serving old HTML.

Common problems on Umbraco

• Added in the backoffice but gone after deployment: the file in source control did not get the change.
• Missing on one page type: that template sets Layout = null or a different master.
• Razor compile error: the tag was pasted inside a code block (@{ }) rather than in the HTML part of the file.
• Not visible after saving: outputs may be cached by output caching or a CDN; purge them.

Sources

• Umbraco docs: Templates (Razor views, layouts, RenderBody) (https://docs.umbraco.com/umbraco-cms/develop-with-umbraco/templating-and-rendering/templates) — checked 2026-10-14
• Umbraco docs tutorial: creating a master template (scripts before the closing body tag) (https://docs.umbraco.com/umbraco-cms/17.latest/develop-with-umbraco/tutorials/creating-a-basic-website/creating-master-template-part-1) — checked 2026-10-14

Related

• How to add AnveVoice to a Craft CMS site
• How to add AnveVoice to Xperience by Kentico
• How to add AnveVoice to a DNN site
• How to add AnveVoice to an ASP.NET Core app

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.