How to Add Live Chat to Umbraco: Master Template and Razor Partial

To add live chat to Umbraco you need one small partial view, one line in your master template and a safe place to keep the script address. The partial holds the Talkmio snippet, the master template renders it just before the closing body tag, and a check on the environment keeps the widget out of your development and staging runs. For a site that already has a master template, the whole job takes about fifteen minutes.

Talkmio is an AI live chat for websites. Its assistant, Mio, answers visitors in their own language from your website, FAQ and uploaded documents, and hands the conversation to your team when it cannot answer. An Umbraco site is a good fit, because the pages Mio needs to read are normally rendered by Razor templates and are easy to crawl. This guide shows a clean way to add live chat to Umbraco and the problems to check afterwards.

What You Need Before You Start

Create a free account at app.talkmio.com, confirm your e-mail and add your website under Websites. You receive a site key and an install snippet. The examples below use the placeholder SCRIPT_ADDRESS_FROM_YOUR_SNIPPET for the script address. Copy the real value from your own snippet, and do not edit anything else in it.

You also need to know which template renders your public pages. In many Umbraco sites the page templates point to a shared layout, often called Master.cshtml in the Views folder, through a Layout line at the top. Open one of your page templates under Settings, Templates in the backoffice and read that line. The Umbraco documentation explains templates, layouts and partial views for your version. The steps are the same in spirit for older and newer versions, but file locations and syntax can differ, so use the guide for the version you run.

Ways to Add Live Chat to Umbraco

The snippet can reach the page in several ways. The table compares them, so you can choose before you write anything.

Method	Effort	Keeps the script address out of code	Best for
Paste the snippet into the master template	Lowest	No	Small sites and quick tests
Razor partial view included from the master template	Low	No	Most Umbraco sites
Partial view plus a value in appsettings.json	Medium	Yes	Teams with several environments
Loading through Google Tag Manager	Medium	Yes	Teams that already manage scripts in a container

The third row is the one we recommend when you can spare ten extra minutes. It keeps the value in configuration, so staging and production can differ, and it lets you switch the widget off without editing a template.

Step 1: Create the Partial View

Create the file Views/Partials/Talkmio.cshtml in your project, or add a partial view under Settings, Partial Views in the backoffice if your setup stores them there. Paste the snippet into it. The script is loaded asynchronously, so it does not block rendering.

@* Views/Partials/Talkmio.cshtml *@
<script async src="SCRIPT_ADDRESS_FROM_YOUR_SNIPPET"></script>

Now render it in the master template, just above the closing body tag.

@* Views/Master.cshtml *@
    @await Html.PartialAsync("Talkmio")
</body>
</html>

In older versions of Umbraco that use the previous Razor syntax, the call is @Html.Partial("Talkmio"). Reload a page and the chat bubble appears in the corner. If your master template has a scripts section at the end of the body, you can render the partial there, but a dedicated line is easier to find in a year.

Step 2: Show the Widget Only in Production

You do not want test chats from a developer’s machine or from a staging site to land in your team’s Inbox. In a modern ASP.NET Core based Umbraco site you can inject the hosting environment into the partial and check it. The Razor syntax reference explains injection and conditions.

@using Microsoft.AspNetCore.Hosting
@inject IWebHostEnvironment Env

@if (Env.IsProduction())
{
    <script async src="SCRIPT_ADDRESS_FROM_YOUR_SNIPPET"></script>
}

If your staging server also runs in the production environment but on a different host, use the configuration approach in the next step instead, so that staging does not show the widget.

Step 3: Keep the Script Address in Configuration

Hard-coded addresses are the usual source of the mistake where a staging site talks to the production account. Put the value in appsettings.json, or in an environment-specific file such as appsettings.Production.json, and read it in the partial.

// appsettings.Production.json
{
  "Talkmio": {
    "ScriptSrc": "SCRIPT_ADDRESS_FROM_YOUR_SNIPPET"
  }
}

@using Microsoft.Extensions.Configuration
@inject IConfiguration Config

@{ var src = Config["Talkmio:ScriptSrc"]; }
@if (!string.IsNullOrWhiteSpace(src))
{
    <script async src="@src"></script>
}

With this pattern, the widget appears only where the value is set. Leave it out of appsettings.Development.json and the local site stays quiet. On Umbraco Cloud or any other host, you can set the same key as an environment variable with the double-underscore form, Talkmio__ScriptSrc, and keep it out of the repository altogether.

Step 4: Control Which Pages Show the Chat

Some pages should not have a chat bubble. A checkout step with its own payment form, a members-only area or a printable view are common examples. In Umbraco you have two simple options. The first is a property on the document type, such as a true or false field named hideChat, which the master template reads from the current page before it renders the partial.

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@if (!Model.Value<bool>("hideChat"))
{
    @await Html.PartialAsync("Talkmio")
}

The second is to render the partial only from the master template that your public pages use, and not from a separate layout for landing pages or the checkout. Either way, editors can decide without touching code. If you also want to learn more about where the bubble works best, our guide to live chat widget placement explains the trade-offs by page type.

Step 5: Teach Mio Your Content

Installing the snippet gives you a chat window. The value comes from what Mio knows. In Talkmio, open Mio AI, then Knowledge base, and add your website. Mio reads every public page on the same domain and respects robots.txt, so a standard Umbraco site with clean URLs and rendered content is read without extra work. You can also add single pages, question and answer pairs, free text and files in PDF, DOCX, TXT, MD, CSV or HTML up to 15 MB each. The plan limits how many pages Mio can keep.

Two things are worth checking on an Umbraco site. First, content that appears only after JavaScript runs may not be read the same way as server-rendered text, so look at the page source of your most important pages. Second, content that sits in the backoffice as a draft or behind a login is not public and will not be read. Use the re-read option after you publish important changes, and use Try Mio to ask the ten questions your customers ask most before you go live. Our article on training an AI chatbot on website content shows what to add when the pages leave gaps.

Multilingual Umbraco sites deserve one more note. If your site has language variants under separate domains or paths, add each public domain you want Mio to read, and keep the widget language on auto-detect unless a site must always use one language. Mio replies in the language the visitor writes in, and the chat window itself is translated, so one knowledge base written in your main language can serve visitors who write in another.

Common Problems When You Add Live Chat to Umbraco

The bubble does not appear

Check the page source for the script tag. If it is missing, the page may use a different template or layout from the one you edited, or the environment check may be hiding it. If the tag is there, open the browser console and look for a blocked request.

A content security policy blocks the script

If your site sends a Content-Security-Policy header, add the Talkmio script host from your snippet to the script directive. Check the browser console for a message that names the blocked source, and ask your hosting team to allow it.

A caching layer shows an old page

Output caching or a CDN can serve the page without the new line for a while. Clear the cache after the change and test in a private browser window.

Cookie consent hides the chat

If your consent tool blocks scripts until a choice is made, the bubble waits for it as well. Read the article on chat widget cookies and consent before deciding how to configure your banner.

Test the Chat Before You Tell Anyone

After the partial is live, open your site in a private browser window and ask Mio two or three questions your customers often ask. Check that each answer comes from your own pages. If something is missing, add it to the website or the knowledge base and ask again. Then test the hand-off: write that you want to speak to a person and watch the conversation arrive in the Inbox with the needs-human badge. Reply from the Inbox and confirm that the answer reaches the visitor. Doing this once, before launch, takes ten minutes and catches most surprises.

Also test on a phone. Open a long page, scroll to the bottom and check that the bubble does not cover a cookie banner, a menu button or a call to action. If it does, change the position in the widget settings rather than the template. Our guide on mobile live chat widget UX lists the checks worth doing on small screens.

After the Install: Set Up the Team and the Widget

Invite your colleagues under Team. Agents handle conversations, Admins also manage websites, Mio, channels and settings, and the Owner handles billing. Each person sets a status of Online, Away or Offline. When Mio cannot answer, when the visitor asks for a person, complains or asks about an order, the chat gets a needs-human badge and your team gets a browser notification in the Inbox. If nobody is online, you receive an e-mail and a push notification on the mobile app, and the visitor is asked for an e-mail before the first message so you can reply later.

Under Websites, choose the widget colour and position, the assistant name, the welcome and offline texts, the pre-chat form, the language and the business hours. Changes apply within five minutes, so you do not need a new deployment of your Umbraco site to adjust them. Once the chat is live, the reports and analytics show conversations per day, the share Mio answered alone, hand-offs, first-reply time and busiest hours.

Frequently Asked Questions

Is there a Talkmio package for Umbraco?

The Talkmio widget is one script tag, and the integrations page lists ready modules for many platforms. For Umbraco, the simplest route is a partial view that renders the snippet from your master template, as shown in this guide. If you need a packaged solution, write to the address on the integrations page.

Where do I put the snippet in an Umbraco template?

Put it just before the closing body tag of the master template that your public pages use, preferably inside a partial view. That way every page that uses the layout shows the chat bubble, and you change the snippet in one place when needed.

Can I show the chat only on some pages?

Yes. Add a true or false property to a document type and let the partial check it, or render the partial only from the layout used by the pages that need the chat. Editors can then switch it off for a page without touching code.

Will Mio read my Umbraco pages?

Mio reads every public page on the same domain and respects robots.txt, so published, crawlable pages become part of its knowledge. Draft content and pages behind a login are not read. After important edits, use the re-read option and test answers with Try Mio.

Does the widget slow down my Umbraco site?

The snippet loads asynchronously, so it does not block the page from rendering. Keep it at the end of the body, test your key pages with your usual speed tools before and after, and read our guide on widget page speed if you want to measure the effect.

Can I use the free plan on an Umbraco site?

Yes. The Free plan includes one operator, one website, 50 AI answers a month, 50 tickets a month and 20 knowledge base pages, with no card needed. Paid plans add operators, websites, AI answers and the e-mail channel, so check the pricing page for the current figures.

The Bottom Line

To add live chat to Umbraco, create a partial view with the snippet, render it from your master template and keep the script address in configuration so each environment behaves correctly. Then spend your real effort on the knowledge base: the better Mio knows your pages, the fewer questions your team has to answer by hand. Start free with Talkmio, add your Umbraco website and see how many visitor questions Mio can answer on its own.