LanternDocs
Sign up

Umbraco Setup

Lantern integrates with Umbraco to show the feedback widget to logged-in Umbraco backoffice users on the frontend of the site. This is the recommended setup for Umbraco agency clients.

#Supported versions

The Lantern widget supports Umbraco v10 and later, including Umbraco v17 (the latest LTS).

#Installation options

There are two ways to install the widget on an Umbraco site:

  1. Umbraco package (recommended) — installs via NuGet, adds configuration in the Umbraco backoffice
  2. Script tag — manually add the script tag to your Umbraco view or layout

The Lantern Umbraco package handles the script tag installation and adds a Lantern section to the Umbraco backoffice for configuration.

See Umbraco Package for full installation and configuration instructions.

#Option 2: Manual script tag

If you prefer to install manually, add the script tag to your Umbraco layout view.

#Adding to your layout view

Open your main layout template file (typically Views/Layout.cshtml or similar) and add the script tag inside the <head> or just before </body>:

html
<script
  src="https://lanternhq.app/widget.js"
  data-key="YOUR_EMBED_KEY_HERE"
  defer
></script>

Replace YOUR_EMBED_KEY_HERE with your client's embed key from the Lantern workspace.

#Conditionally loading based on Umbraco context

If you only want the widget on certain page types:

cshtml
@if (someCondition)
{
    <script
        src="https://lanternhq.app/widget.js"
        data-key="YOUR_EMBED_KEY_HERE"
        defer
    ></script>
}

#How the Umbraco gate works

When someone logs into the Umbraco backoffice, Umbraco sets cookies in their browser (UMB_PREVIEW or UMB-BACKOFFICE). The widget checks for these cookies on page load.

  • Logged-in Umbraco backoffice users browsing the frontend see the widget button
  • Regular site visitors (not logged into Umbraco) do not see anything

This ensures that only your client's editors and developers see the widget — not the general public.

#Testing the installation

  1. Log into the Umbraco backoffice.
  2. Open a new browser tab and visit the frontend of the Umbraco site.
  3. You should see the Lantern widget button on the page.
  4. Click it, fill in the form, and submit a test issue.
  5. Check your Lantern workspace to confirm the issue appears under the correct client.

If the widget does not appear:

  • Confirm you are logged into Umbraco backoffice in the same browser session
  • Check that the embed key in the script tag is correct
  • Open the browser console and look for any errors from widget.js
  • Check that cookies are not being blocked (the widget looks for UMB_PREVIEW or UMB-BACKOFFICE cookies)

#Multi-site Umbraco setups

If you manage multiple sites within one Umbraco installation, you may want different embed keys per site domain. You can conditionally output the correct key in your view based on the current domain:

cshtml
@{
    var embedKey = Request.Host.Host.Contains("client-a.com")
        ? "client-a-embed-key"
        : "client-b-embed-key";
}
<script
    src="https://lanternhq.app/widget.js"
    data-key="@embedKey"
    defer
></script>

#Next steps