Embed the help widget

Add one script and a help button to your app, tell the widget where the user is, and the panel opens on the right help.

Before you begin

Embedding is turned on for your app's origin, for example https://console.example.com. Set OPEND_EMBED_ORIGINS and OPEND_EMBED_SECRET on your OpenD server. Ask the operator of your docs site.
Your backend has an endpoint that returns an embed token for the signed-in user. See Sign embed tokens in your backend.
Your app's users are registered as readers in OpenD, by email, in the right organization.

Load the widget script from the docs site.

<script src="https://docs.example.com/embed/opend-help.js"></script>

Initialise it once, with the docs URL, your app's name and a function that fetches a token.
```
<script>
  OpenDHelp.init({
    docsUrl: 'https://docs.example.com',
    app: 'opend-console',
    getToken: () => fetch('/api/opend-token').then((r) => r.text()),
  });
</script>
```
app must match the appname authors use and the app's entry in help-contexts.yaml.

Tell the widget the current route, on every route change.

// In a single-page app, call this from your router.
OpenDHelp.setContext({ path: location.pathname });
// Or name the context directly:
OpenDHelp.setContext({ key: 'tenants.detail' });

If the panel is open, it follows the new context straight away.

Add a help button where it fits your layout.

<opend-help-button></opend-help-button>
<!-- Or open a specific context: -->
<opend-help-button key="billing" label="Help with billing"></opend-help-button>

The button toggles the panel. You can also call OpenDHelp.open(), close() and toggle() from your own controls.

Results

The panel slides in from the side, 380 pixels wide (full width on small screens), and shows the help for the current context. It does not block the page. Escape or its close button closes it and returns focus to where it was.

The first time it opens, the panel asks your getToken for a token and exchanges it for its own short session. For every option and message, see Widget API and message protocol. the OpenD repository includes a runnable host app in examples/embed-host.