Metabase docs++

Embed Metabase docs search

The <metabase-docs-search> element adds search and cited answers from the Metabase docs to any page. Add one script tag. The element uses its own Shadow DOM, so your page's styles do not change it, and it calls the free docs++ API, which allows any origin.

Try it

Add it to a page

<script type="module" src="https://docs.metabase.fyi/embed/v1/docs-search.js"></script>

<metabase-docs-search
  version="v0.64"
  context='{"deployment": "cloud", "plan": "pro"}'
  theme="auto">
</metabase-docs-search>

/embed/v1/docs-search.js stays compatible within version 1. The script is about 10 KB (gzipped) and needs no framework.

Attributes

Attribute Value Default
version The Metabase version to search, like v0.64. The newest version
context JSON with the reader's setup: version, edition, plan, deployment (cloud or self-hosted), surface (the screen they are on) and error (an error message they see). It changes the ranking and the answers. Never put instance data or personal data in it. None
theme light, dark or auto (follows the reader's system setting). auto
api-base The API to call. The origin of the script: https://docs.metabase.fyi
label The visible label of the search box. Search the Metabase docs
heading-level The level of the "Answer" heading, so that it fits your page's outline. 2

Events

docs-select
The reader chose a search result. event.detail.url is the docs URL with the section anchor. The element then opens it in the same tab; call event.preventDefault() to open it yourself, for example in a new tab.
docs-feedback
The reader rated an answer. event.detail has answer_id, rating (up or down), reason and comment. 
document.querySelector("metabase-docs-search").addEventListener("docs-select", (event) => {
  event.preventDefault();
  window.open(event.detail.url, "_blank", "noopener");
});

Accessibility

The search box is a combobox with a list of results that works with the keyboard (arrow keys, Enter, Escape). Answers are announced once, when they are complete, and each citation names its source. The element respects the reader's color scheme and reduced-motion settings.