VitePress

VitePress offers two clean ways to inject the widget: a head entry in the site config (simplest), or the enhanceApp hook in your theme if you need runtime control.

head entry (recommended)
enhanceApp hook

Open .vitepress/config.ts (or .js)

Open .vitepress/config.ts (or config.mts / config.js) at the root of your VitePress project.

Add to the head array

Add a script entry to the head array in your defineConfig call:

.vitepress/config.ts

import { defineConfig } from "vitepress";

export default defineConfig({
  // ...your existing config...

  head: [
    [
      "script",
      {
        async: "",
        src: "https://widget.beforequery.com/beforequery-widget.js",
        "data-knowledge-base-id": "kb_xxx",
        "data-client-key": "bq_pk_...",
      },
    ],
  ],
});

VitePress head entries are tuples of [tag, attrs, innerHTML?]. The async attribute is boolean — pass an empty string "" to emit it without a value.Replace kb_xxx and bq_pk_... with your actual values.

Run the dev server

Run npm run docs:dev (or vitepress dev). Inspect the rendered <head> to confirm the tag is present and verify the launcher appears on the page.

Use this approach when you need to load the script conditionally or control timing from JavaScript.

Open or create .vitepress/theme/index.ts

Open .vitepress/theme/index.ts (create it if it does not exist, extending the default theme).

Inject the script in enhanceApp

.vitepress/theme/index.ts

import DefaultTheme from "vitepress/theme";
import type { EnhanceAppContext } from "vitepress";

export default {
  ...DefaultTheme,
  enhanceApp({ router }: EnhanceAppContext) {
    if (typeof document !== "undefined") {
      const script = document.createElement("script");
      script.src =
        "https://widget.beforequery.com/beforequery-widget.js";
      script.async = true;
      script.dataset.knowledgeBaseId = "kb_xxx";
      script.dataset.clientKey = "bq_pk_...";
      document.head.appendChild(script);
    }
  },
};

Replace kb_xxx and bq_pk_... with your actual values.

Get your keys — your knowledge base ID and public client key (bq_pk_...) are in the BeforeQuery dashboard under Knowledge Base → Integration. Add your VitePress site’s domain to the key’s origin allowlist.

For all widget configuration options, see Widget reference.

Get Started

Knowledge Sources

Knowledge Connectors

Community Sources

Helpdesk Tickets

Deploy

Platform

Account Management