Set up your front end

The package ships two partial views, compiled directly into the package, so there's no markup to copy into your project to get them working:

Partial	Where it goes	What it does
UmbracoTranslator/LanguageSwitcher	Navigation, header or footer	Lets visitors switch between languages.
UmbracoTranslator/HreflangLinks	Inside <head>	Tells search engines about each language version of the page.

A typical layout uses both:

<head>
    <meta charset="utf-8" />
    <title>@Model.Name</title>
    @await Html.PartialAsync("UmbracoTranslator/HreflangLinks")
</head>
<body>
    <header>
        @await Html.PartialAsync("UmbracoTranslator/LanguageSwitcher")
    </header>
    @RenderBody()
</body>

Both read the current request's language and your configured language list at render time, so they always reflect what's set up in the backoffice, with no further wiring.

Nothing rendered?

Both partials only list languages on a licensed hostname (or localhost). On any other hostname the switcher renders with an empty list and the hreflang partial renders nothing, the same as when no languages have been added yet.

Language switcher

Render it

From any template (layout, navigation partial, footer, wherever you want it to appear):

@await Html.PartialAsync("UmbracoTranslator/LanguageSwitcher")

What it renders

A <nav> containing a native <details>/<summary> disclosure — no JavaScript required for the dropdown to open and close:

<nav class="weglot-language-switcher" data-wg-notranslate aria-label="Language switcher">
  <details class="weglot-language-switcher__toggle">
    <summary class="weglot-language-switcher__current">English</summary>
    <ul class="weglot-language-switcher__list">
      <li class="weglot-language-switcher__item">
        <a class="weglot-language-switcher__link" href="/fr/careers">Français</a>
      </li>
      <!-- ...one item per configured language, minus whichever one you're currently on -->
    </ul>
  </details>
</nav>

A few things worth knowing about the markup:

• The currently active language is never repeated inside the list. It's only shown as the closed <summary> label.
• Languages are listed alphabetically by their Name, so the order follows whatever names you give them in the backoffice.
• Every link points to the same page you're currently on, in that language — not the site homepage — using the same URL-building logic the package's own routing uses internally, so a link generated here is guaranteed to actually resolve.
• The data-wg-notranslate attribute on the wrapping <nav> stops the switcher's own language names from being swept up and translated by the package's translation pipeline — without it, a Spanish user viewing the switcher could see "Español" mistranslated into whatever the current target language's word for "Spanish" is. If you build your own switcher (see Creating your own selector), carry this attribute over.
• The link back to the untranslated version of the page is labeled with the file's own fallback label — "English" in the version shipped with the package — shown only while you're currently viewing a translated page. This package has no record of what your site's actual original/default language is (the languages table only ever holds translation targets), so if your site's original content isn't in English, edit that label directly in the partial (or override the file — see Creating your own selector).

Options

Two ViewData flags change its behavior. Set them in the calling template, on the line before you render the partial — partials read the caller's existing ViewData automatically, no wrapping required:

@{
    ViewData["WeglotOpenUpwards"] = true;
    ViewData["WeglotExcludeDefaultStyles"] = true;
}
@await Html.PartialAsync("UmbracoTranslator/LanguageSwitcher")

ViewData key	Effect
WeglotOpenUpwards	Opens the dropdown list upward instead of downward — useful if the switcher sits near the bottom of the viewport (e.g. a footer).
WeglotExcludeDefaultStyles	Skips the shipped <link> to the default stylesheet entirely. See Styling the switcher.

Both are read as false/unset by default, so rendering the partial with no ViewData at all gives you the normal drop-down, normally styled.

hreflang alternate links

Search engines use hreflang links to understand that your translated pages are versions of the same content, and to show visitors the right language in search results. Render them inside your layout's <head>:

@await Html.PartialAsync("UmbracoTranslator/HreflangLinks")

What it renders

One <link rel="alternate"> per language for the current page, each with a fully-qualified URL (scheme and host included, as search engines require). On https://www.example.com/about-us/ with French and Spanish configured, it renders:

<link rel="alternate" href="https://www.example.com/about-us/" hreflang="en-GB" />
<link rel="alternate" href="https://www.example.com/es/about-us/" hreflang="es" />
<link rel="alternate" href="https://www.example.com/fr/about-us/" hreflang="fr" />
<link rel="alternate" href="https://www.example.com/about-us/" hreflang="x-default" />

• The original language comes first, as en-GB by default, pointing at the un-prefixed URL.
• Each configured language follows, using its ISO code as the hreflang value and its URL prefix in the URL. New languages added in the backoffice appear automatically.
• x-default points at the original page, for visitors whose language you don't have.
• The output is the same on every language version of a page, so the original page and each translation all reference each other, as search engines expect.
• The host comes from Umbraco's absolute URL for the page: the domain assigned in Culture and Hostnames, or the current request's host if none is assigned.

Codes are written in their conventional case, so Weglot codes such as pt-br and sr-latn are output as pt-BR and sr-Latn.

Customising the hreflang values

Two ViewData keys change the output. Set them on the line before you render the partial:

@{
    ViewData["WeglotDefaultHreflang"] = "en-US";
    ViewData["WeglotHreflangMap"] = new Dictionary<string, string[]>
    {
        ["fr"] = ["fr-FR"],
        ["es"] = ["es-ES"],
        ["pt"] = ["pt-PT"],
        ["ar"] = ["ar-SA", "ar-AE", "ar-EG"],
    };
}
@await Html.PartialAsync("UmbracoTranslator/HreflangLinks")

ViewData key	Effect
WeglotDefaultHreflang	The hreflang of your site's original language. Defaults to en-GB.
WeglotHreflangMap	Per language ISO code (as configured in the backoffice, case-insensitive), the hreflang value(s) to output instead of the ISO code. Use it to target regions, or to point several regions at the same translated page. Languages not in the map keep their ISO code.

With the map above, the Arabic page is listed once per region, all pointing at the same URL:

<link rel="alternate" href="https://www.example.com/ar/" hreflang="ar-SA" />
<link rel="alternate" href="https://www.example.com/ar/" hreflang="ar-AE" />
<link rel="alternate" href="https://www.example.com/ar/" hreflang="ar-EG" />

Overriding either partial

ASP.NET Core looks for a view in your site before falling back to the package, so you can replace either partial entirely by creating a file at the same path in your own site project:

• Views/Partials/UmbracoTranslator/LanguageSwitcher.cshtml
• Views/Partials/UmbracoTranslator/HreflangLinks.cshtml

No package changes or configuration are needed. See Creating your own selector for a worked example.