How to Add Live Chat to ASP.NET Core: Layout, Environment and CSP

To add live chat to ASP.NET Core, you paste the Talkmio install snippet into a partial view, render that partial from the shared layout just before the closing </body> tag and limit it to the production environment. That is the whole integration, and it takes about fifteen minutes. The details worth getting right are which layout your pages actually use, how to read the site key from configuration, how the Environment tag helper keeps the chat out of development, and what to change if you send a content security policy header. This guide covers each of them for MVC, Razor Pages and Blazor.

Talkmio is an AI live chat. Its assistant, Mio, reads your website and the documents you upload, answers visitors in their own language and hands the chat to your team when it cannot answer from your content. On the ASP.NET Core side, all that is needed is to deliver one script to the browser.

What You Need Before You Start

You need an ASP.NET Core application you can deploy, a free account at app.talkmio.com and a site key. In Talkmio, open Websites, choose Add and enter your domain. Talkmio then shows the site key and the install snippet. This guide uses a placeholder instead of printing the snippet, so you always paste the current version from your own account.

No NuGet package is needed, because the snippet is a plain script tag. The steps are the same for recent versions of the framework and for sites hosted on Windows, Linux, containers or Azure, because the integration lives in your views and not in your server configuration.

Add Live Chat to ASP.NET Core in the Shared Layout

Create a partial view for the snippet, for example Views/Shared/_Talkmio.cshtml in an MVC project or Pages/Shared/_Talkmio.cshtml in Razor Pages, and paste the snippet from Websites into it. Then render it from your layout, usually _Layout.cshtml, just before the closing body tag:

<environment include="Production">
    <partial name="_Talkmio" />
</environment>
</body>

Deploy, open a page and the chat bubble should appear in the corner. If your application has more than one layout, for example one for the public site and one for an admin area, add the partial only to the public one. The layout documentation explains how layouts are selected through _ViewStart.cshtml and the Layout property, which is the first thing to check when a page does not show the bubble.

Keep It Out of Development With the Environment Tag Helper

A chat widget on your laptop is noise: you will open conversations from your own test visits and teach yourself to ignore the bubble. The Environment tag helper shown above renders its content only when the hosting environment matches the names you list. With include="Production" the snippet is skipped in Development and Staging. If you want Staging to behave like production, list both names, and if staging should use a separate Talkmio website with its own key, put the two keys in each environment’s settings. The environments documentation describes how the environment name is set.

Approach	How	Best for
Environment tag helper	Wrap the partial in <environment include="Production">	Most MVC and Razor Pages sites
Configuration flag	Add a Talkmio:Enabled value in appsettings and check it in the layout	Turning chat off without a deploy in some hosts
Separate key per environment	Create a second website in Talkmio for staging	Teams that want to test the chat before launch

Read the Site Key From Configuration

Hard-coding the site key in a view works, but it ties the view to one environment. A better pattern is to store the key in appsettings.json under a section such as Talkmio and in the environment-specific files where it differs, and to read it in the partial with @inject IConfiguration Configuration. Then the same code deploys everywhere and only the setting changes. On a host that uses environment variables, the double-underscore form, Talkmio__SiteKey, maps to the same setting.

A site key is meant to appear in the page source, because the browser needs it, so this is about tidiness and per-environment values, not secrecy. Never put an account password or an API token in a view or in a public setting. If you also use Talkmio’s API on the server, keep that token in a secret store such as user secrets in development and your host’s secret settings in production.

Razor Pages and Blazor

Razor Pages use the same layout idea, with Pages/Shared/_Layout.cshtml and the partial in Pages/Shared. If a page overrides the layout, the partial must be added there too. In Blazor Server and Blazor Web Apps, add the snippet to the host page or root component that renders the <body>, such as App.razor or _Host.cshtml, and not to an individual routable component. The root document persists while the visitor moves between routes, so the widget loads once.

Blazor WebAssembly apps usually have a static wwwroot/index.html. Paste the snippet there before the closing body tag. As with every single-page app, test navigation: click through several routes without a full reload and confirm that exactly one bubble stays visible and a conversation you start continues. For apps that use React on the front end, our guide to adding live chat to Next.js and React shows the equivalent component approach.

Content Security Policy in ASP.NET Core

Many ASP.NET Core sites send a Content-Security-Policy header, either through middleware, a reverse proxy or the host. A strict script-src blocks scripts from hosts it does not know, so the chat bubble does not appear and the browser console shows a violation. The fix is to allow the host the snippet loads its script from, which you can read from the snippet itself.

Start with the report-only header, load a page, read the console reports and allow only what is reported. If you use nonces, generate one per request, add it to the policy and give the snippet the same nonce attribute. The MDN guide to content security policy explains each directive. Our article on chat widget cookies and consent covers the privacy side of loading third-party scripts.

Caching, Bundling and Other Gotchas

Output caching and response caching store the snippet together with the page, which is fine because it is the same for every visitor. The only problem arises if you wrap the snippet in a condition that depends on the user, such as showing it to anonymous visitors only, and then cache the result for everyone. Base the condition on the environment, not on the visitor, or vary the cache correctly.

Do not add the snippet to your script bundles. The widget loads its script from Talkmio, so you never need to update a vendored copy, and a new release of the widget reaches your site without a deployment. Keep the snippet as a separate tag after your own scripts, and do not minify or reorder it. If your site sits behind a CDN that rewrites HTML, check the rendered page source in the browser to confirm that the script tag arrived unchanged.

Testing and Deploy Checklist

A short checklist prevents most surprises. Before the release, confirm that the partial exists in the shared folder, that the layout renders it inside the Environment tag helper and that the site key setting exists in the production configuration. After the release, open the live site in a private window, confirm that the bubble appears and opens, send a test message from a phone and check that it reaches the Talkmio Inbox. Then open your site on the smallest screen you support and confirm that the bubble does not cover a primary button, a cookie banner or a checkout control.

If you use feature or integration tests, add a simple assertion that the rendered production layout includes the partial. It protects the integration against later template changes by people who did not set it up, and it takes a few lines. Add one more line to your release notes whenever the layout is refactored, because a refactor that moves the closing body tag is the most common way for a chat widget to vanish without anyone noticing for weeks.

Plan for the people side too. Decide who owns the chat after launch: usually the support lead owns the knowledge and the Inbox, while a developer owns the partial and the configuration. Write that down in the repository readme, with the three facts a future developer needs: where the partial lives, which setting holds the site key and which environments render it. A few lines of documentation save an hour of searching when someone new joins the team or the hosting changes next year.

Teach Mio Before You Announce It

With the widget visible, spend your time on the knowledge. In Talkmio, open Mio AI and then Knowledge base, add your website and Mio reads every public page on the same domain while respecting robots.txt. Add the documents that do not live on a page, such as a PDF price list or terms of service. Talkmio accepts PDF, DOCX, TXT, MD, CSV and HTML files up to 15 MB. Then write business instructions that state what Mio must not promise, for example never to quote a delivery date, and use Try Mio to test answers and see which knowledge pieces were used.

Our guide to testing an AI chatbot before launch has a list of questions to try. When the bubble does not appear, check in order: is the partial in the layout the page actually uses, is the Environment condition true where you are testing, does the page source show the script tag and does the console report a blocked request. Plans and limits are on the Talkmio pricing page, and the Free plan, with one operator, one website and 50 AI answers a month, is enough to prove that the integration works.

Frequently Asked Questions

Do I need a NuGet package to add live chat to ASP.NET Core?

No. The Talkmio install snippet is a plain script tag. You paste it into a partial view and render the partial from your layout, so there is nothing to add to your project file, your bundles or your dependency injection setup.

Where should the snippet go in an ASP.NET Core layout?

Just before the closing body tag of the layout that wraps your public pages, usually _Layout.cshtml. Keep it out of layouts used for admin or internal screens unless you want visitors or staff to reach your team from there.

How do I hide the widget in development?

Wrap the partial in the Environment tag helper with include set to Production, or check a configuration value. With the tag helper, the snippet is skipped in Development and Staging. A separate Talkmio website with its own key works for staging tests.

Does it work with Blazor?

Yes. Add the snippet to the host page or root component, such as App.razor, or to index.html in Blazor WebAssembly, not to a routable component. Then click through several routes and confirm that one bubble stays visible and conversations continue.

What do I change if I send a content security policy?

Allow the host the snippet loads its script from in script-src, or add your nonce to the snippet. Start with the report-only header, read the console reports, allow only what is reported and then switch to the enforcing header.

Is it free to try?

Yes. The Free plan includes one operator, one website, 50 AI answers and 50 tickets a month, with no card needed. Pro adds three operators, three websites, 1,000 AI answers a month, unlimited tickets and the e-mail channel.

The Bottom Line

You can add live chat to ASP.NET Core with one partial, one render call and one environment check. Keep the site key in configuration, test navigation in Blazor and single-page setups and allow the script in your content security policy if you use one. Then put your time into teaching Mio from your own pages and documents. Start free with Talkmio, paste the snippet into your layout and see the bubble on your site today.