Linking help to a screen

The knowledge layer can surface the right guide directly inside the product, so users never hit a dead end.

How it works

1. Give the guide a stable screen key in its front-matter:

   ---
   title: Managing invoices
   screen: billing.invoices
   ---
   

2. Drop the ContextualHelp component on the matching screen:

   <ContextualHelp screen="billing.invoices" />
   

The component looks up the guide whose screen matches and renders a help link to it. If no guide matches that key, it renders nothing — so a screen never shows a broken help link.

Variants

<!-- Custom label -->
<ContextualHelp screen="billing.invoices" label="How invoicing works" />

<!-- Inline text link inside a sentence -->
See <ContextualHelp screen="billing.invoices" inline label="the invoicing guide" />.

This page itself is wired to the example.screen key as a live example.