Add an About Box to a Blazor App

Live example

This is the About box of AboutTheApp itself. Switch the variant to see other layouts. The code below renders exactly this box. For your own app, change the alias.

<script src="https://aboutthe.app/embed/web/0.3.5/card.js" integrity="sha384-X3VGSEdTNGsfVKfVUx7sq9ICfpWsJW88HDQYidGPio1KjoxYCbSirTNqtbVfq1sj" crossorigin="anonymous" async></script>

<about-the-app alias="aboutthe.app" variant="card" api-base="https://aboutthe.app/api/v1" visual-style="default" palette="default" appearance="auto"></about-the-app>

Add it to a Blazor app in 3 steps

The About box is a Web Component that the browser renders after the page loads. It works the same in Blazor Server, Blazor WebAssembly and a Blazor Web App.

1. 1

   Create your product

   Create it in AboutTheApp and note its alias. The Integrate panel on the product card has the same code as the live example, already filled in with your alias.

2. 2

   Load the script

   Add the script tag to Components/App.razor in a Blazor Web App (.NET 8 and later), to wwwroot/index.html in standalone Blazor WebAssembly or to Pages/_Host.cshtml in Blazor Server on .NET 7 and earlier.

3. 3

   Place the element

   Put <about-the-app alias="aboutthe.app"></about-the-app> into MainLayout.razor or any other component.

@inherits LayoutComponentBase

<main>@Body</main>

<footer>
    <about-the-app alias="aboutthe.app" variant="footer" version="@AppVersion"></about-the-app>
</footer>

@code {
    private static readonly string AppVersion =
        typeof(Program).Assembly.GetName().Version?.ToString(3) ?? "";
}

Show the assembly version

The assembly version comes from the Version property in your .csproj file. ToString(3) keeps three parts, so the box shows 1.4.2 instead of 1.4.2.0.

If you use the informational version instead, note that the .NET 8 SDK appends the commit hash after a plus sign, for example 1.4.2+3f2a1c9. Release notes appear only when the version matches the product's version catalog exactly, so keep the same format in both places. If you're not sure which format to use, read app versioning schemes and examples.

Choose the layout and the look

The variant attribute picks the layout: card (default), footer, compact, dialog, support, version, maker, credits or link. You can try each one in the live example above.

If you set visual-style="host" and palette="host", the box takes the font, corner radius and colors from your app. The appearance attribute switches between light, dark and auto, which follows the system setting.

Frequently asked questions