Kiwicodes.Beacon.HelpCenter.Wpf 1.2.5

Beacon Help Center (WPF)

A drop-in, themeable customer help center control for WPF — a faithful port of the Blazor Kiwicodes.Beacon.HelpCenter, packaged as a control library you can embed in any WPF app. It renders the knowledge base, the request form and the ticket tracker from a single control. Point it at your Beacon API and your app's portal key, set a brand colour, and you're done.

It's built on Kiwicodes.Beacon.Sdk's BeaconPublicClient, so all calls go through the same public (/public/*) endpoints — no admin credentials, no HMAC signing required on the client.

The knowledge base opens on a category list (each with a book icon and an article count). It's a two-level accordion: clicking a category expands it to show any articles that sit directly under it, plus its folders (folder icon); clicking a folder expands its articles (document icon). Folders are a single level deep and optional — articles with no folder appear right under their category, and articles with no known category are grouped under General. Typing in the search box lists matching articles across everything.

Install

dotnet add package Kiwicodes.Beacon.HelpCenter.Wpf

This pulls in Kiwicodes.Beacon.Sdk automatically. The project targets net8.0-windows with WPF.

WebView2 runtime

Article bodies are HTML, so they're rendered with the embedded WebView2 control (Microsoft.Web.WebView2). Most up-to-date Windows machines already have the Evergreen WebView2 Runtime; if a target machine doesn't, install it from Microsoft (it ships with current Windows 10/11 and Edge). If the runtime is missing the control degrades gracefully to a plain-text rendering of the article.

Quick start (XAML)

The control is fully self-contained — it manages its own navigation between the article list, an article, the request form and the ticket tracker. Drop it into any window or page:

<Window ...
        xmlns:bk="clr-namespace:Beacon.HelpCenter.Wpf;assembly=Beacon.HelpCenter.Wpf">
    <bk:BeaconHelpCenter BaseUrl="https://your-beacon/api/"
                         PortalKey="pk_live_xxxxxxxx"
                         PrimaryColor="#e8590c" />
</Window>

• BaseUrl — your Beacon API base, including the route prefix (e.g. .../api/).
• PortalKey — your app's portal key (the public key from Beacon's Settings → API Keys). This is what scopes the help center to your app's articles and tickets.
• PrimaryColor — your brand colour. The header gradient, buttons, links and accent tints are all derived from it.

With dependency injection (optional)

If you'd rather not repeat BaseUrl on every instance, register a client once and hand the provider to the control:

// App startup
var services = new ServiceCollection();
services.AddBeaconHelpCenter("https://your-beacon/api/");
BeaconHelpCenter.Services = services.BuildServiceProvider();

<bk:BeaconHelpCenter PortalKey="pk_live_xxxxxxxx" PrimaryColor="#e8590c" />

The control resolves its data source in this order: an explicit Client property → a BeaconPublicClient resolved from BeaconHelpCenter.Services → a client built from BaseUrl.

Verified users

If your app already knows who the user is, pass their name and email. The request form then pre-fills both fields, makes them read-only, and shows a Verified user badge — so signed-in users don't retype (or mistype) their details:

<bk:BeaconHelpCenter BaseUrl="https://your-beacon/api/"
                     PortalKey="pk_live_xxxxxxxx"
                     VerifiedUserName="{Binding User.DisplayName}"
                     VerifiedUserEmail="{Binding User.Email}" />

Verified mode switches on as soon as VerifiedUserEmail is non-empty. Leave these unset for anonymous portals and the fields stay editable as normal.

Attachments

Customers can attach files to a new request (up to 10 MB each by default) using the native Windows file picker. Attachments upload after the ticket is created and appear on the ticket view.

<bk:BeaconHelpCenter BaseUrl="https://your-beacon/api/"
                     PortalKey="pk_live_xxxxxxxx"
                     AllowAttachments="True"
                     MaxAttachmentBytes="10485760" />

Set AllowAttachments="False" to hide attachments entirely.

Theming

For most apps, PrimaryColor is all you need. For full control, assign a HelpCenterTheme — anything you leave unset keeps its default (or is derived from the primary colour):

helpCenter.Theme = new HelpCenterTheme
{
    PrimaryColor   = "#0d9488",
    PageBackground = "#f7faf9",
    GradientAngle  = 135,
    CardRadius     = 18,
    FontFamily     = "Segoe UI",
};

Each theme value is emitted as a WPF resource (Bk.*) merged into the control, so the markup references them via {DynamicResource Bk.Primary} etc. — the direct analogue of the Blazor version's --bk-* CSS custom properties. Colour properties accept 3/6-digit hex or any WPF named colour.

Control properties

Notes on the port

This library mirrors the Blazor help center's behaviour and visual design as closely as WPF allows: the same view flow, theming model, knowledge-base accordion, search, request form with live suggestions, and token-gated ticket tracker. The two deliberate platform differences are that article HTML renders through WebView2 (WPF has no native HTML renderer) and attachments use the Windows file picker (there is no MAUI camera option).