MkDocs’s extra_javascript list does not support setting arbitrary HTML attributes like async or data-* on injected script tags. The two reliable approaches are: override the theme’s main.html block to paste the full script tag, or use a small shim JS file that injects the widget script programmatically.
Works with MkDocs Material and any theme that exposes Jinja2 block overrides.
1

Create the override directory

In your project root, create a docs/overrides/ directory (or wherever your custom_dir points).
2

Create main.html

Create docs/overrides/main.html with the following content — it extends the base theme and appends the widget script to the scripts block:
docs/overrides/main.html
Replace kb_xxx and bq_pk_... with your actual values.
3

Register the override in mkdocs.yml

Point custom_dir at your overrides folder:
mkdocs.yml
4

Build and preview

Run mkdocs serve. Inspect the rendered HTML to confirm the script tag is present with the correct attributes.
MkDocs Material’s extra_javascript supports an object form ({path: "...", defer: true}) but does not expose data-* attributes directly, which is why the template override or JS shim approaches above are required for the BeforeQuery widget.
Get your keys — your knowledge base ID and public client key (bq_pk_...) are in the BeforeQuery dashboard under Knowledge Base → Integration. Add your MkDocs site’s domain to the key’s origin allowlist.
For all widget configuration options, see Widget reference.