Help Links

Turn any button or text link in your product into help that opens the right docs page, or asks the AI Assistant, right where users click.

Put help exactly where users need it. Add one attribute to any button or link in your product, and a click opens your docs or the AI Assistant in a panel right beside it. You don't need any JavaScript beyond init().

Add a help link

Add data-documentation-ai-navigate with the path of a docs page:

<p>
  Your logo and colors on shared boards.
  <a href="https://docs.example.com/customize/branding" data-documentation-ai-navigate="/customize/branding">
    How branding works
  </a>
</p>

Clicking How branding works opens the Branding page in a panel just below the link, without leaving the settings screen.

Choose what a click does

data-documentation-ai-navigatestring

A docs page's path, such as /billing or /guide/setup#requirements, or its full URL on your docs site. A click opens that page.

<a data-documentation-ai-navigate="/billing">About billing</a>

data-documentation-ai-askstring

A question. A click opens the AI Assistant and asks it.

<button data-documentation-ai-ask="How do I export my data?">Ask about exports</button>

data-documentation-ai-openstring

A click opens the widget as you set it up. With a value, it opens on that view.

<button data-documentation-ai-open>Help</button> or <button data-documentation-ai-open="assistant">Ask AI</button>

Allowed values:homeassistantdocs

If an element has more than one attribute, ask is used first, then navigate, then open.
In React, write data-documentation-ai-open="" for the attribute without a value. See Frameworks.

How the panel behaves

It opens beside the element, above or below it, wherever there's more room, and always inside the window. On phones, it fills the screen.
A second click on the element closes it.
The page it opens is the starting point, so there's no Back button to a previous page.
Elements added later work too, including in single-page apps. You don't need to call anything again.
The click stays on your page. The embed handles the click, so the link's href isn't followed. Keep a real href anyway: it's where the link goes if the script hasn't loaded.

Use only your own links

If your page has no floating widget, help links work on their own and no Help button of ours appears. init() is all you need:

DocumentationAI.init({ publishableKey: 'pk_...' });
// Every marked button and link now opens a panel beside itself.

To set up the panel, such as its greeting and links, add a floating widget with launcher: false. It still shows no Help button:

DocumentationAI.Widget({
  display: 'floating',
  launcher: false,
  greeting: 'Need a hand?',
});

With a Help button or an Ask AI bar on the page, help links work alongside it.

Open help from your code

When a button already has its own click handler, call the floating widget's methods instead:

const help = DocumentationAI.Widget({ display: 'floating', launcher: false });

importButton.addEventListener('click', () => {
  help.navigate('/guide/import-data');
});

ask(question), open(view) and close() work the same way. See Widget methods.

Ideas

A Learn more link next to a setting, opening the page that explains it.
A What's this? link beside a field that users often get wrong.
An Ask about this button on an error message, with the error in data-documentation-ai-ask.
An empty state that links to the getting-started page for that feature.

Next steps

Private docs

Show private pages to users signed in to your product.

Keys and origins

Manage your embed keys and the sites that use them.

Was this page helpful?