Skip to content

Updated website search by integrating kapa.ai search functionality #896

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
n-boshnakov wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Updated website search by integrating kapa.ai search functionality #896

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
35c3cad
Added kapa.ai search functionality
n-boshnakov Mar 12, 2026
3d6ea9d
Switched integration ID to testing
n-boshnakov Mar 13, 2026
b5f20d9
Disabled consent popup for search
n-boshnakov Mar 16, 2026
933cbe4
Added custom script for separating implementations
n-boshnakov Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion .vitepress/config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,11 +297,16 @@ function getHeadConfig(){
'data-modal-header-bg-color': '#009f76',
'data-modal-title-color': '#FFFFFF',
'data-project-logo': 'https://gardener.cloud/gardener-logo-white.svg',
'data-search-mode': 'integrated',
'data-consent-required': 'true',
'data-consent-screen-disclaimer': 'This AI assistant uses your questions to provide answers based on Gardener documentation. Your questions and interactions may be anonymously collected and analyzed to improve the search functionality and overall user experience. We don\'t collect any personally identifiable information. By clicking "Accept", you consent to using this AI-powered feature and the collection of your data. AI-generated responses may contain inaccuracies - please verify important information with the official documentation.',
'data-consent-screen-accept-button-text': 'I agree, let\'s chat!',
'data-consent-screen-reject-button-text': 'No, not interested',
'data-modal-example-questions': "How do I access my shoot cluster after it's created?,What happens during the daily maintenance window?,How do I configure worker nodes for my cluster?"
'data-modal-example-questions': "How do I access my shoot cluster after it's created?,What happens during the daily maintenance window?,How do I configure worker nodes for my cluster?",
'data-search-mode-enabled': 'true',
'data-modal-override-open-selector-search': 'div#local-search',
'data-modal-open-on-command-k': 'true',
'data-modal-command-k-search-mode-default': 'true'

@coderabbitai coderabbitai Bot Mar 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

cat -n .vitepress/config.mts | sed -n '295,315p'

Repository: gardener/documentation

Length of output: 1721

🏁 Script executed:

# Search for any documentation or comments about the consent behavior in the config file
rg -A 5 -B 5 'data-consent-required' .vitepress/config.mts

Repository: gardener/documentation

Length of output: 1299

🏁 Script executed:

# Check if there are any PR descriptions or commit messages that explain the search behavior
git log --oneline -20 -- .vitepress/config.mts

Repository: gardener/documentation

Length of output: 108

🌐 Web query:

kapa.ai widget data-consent-required integrated search mode behavior documentation

💡 Result:

data-consent-required (Kapa website widget)

  • Set data-consent-required="true" to require a consent screen before a user can chat. When enabled, the widget sets a kapa_consent cookie in the user’s browser. You can also customize the consent screen title/disclaimer and accept/reject button text via the data-consent-screen-* parameters. [1]

“Integrated search mode” behavior (Kapa website widget)

  • Enable Search Mode: data-search-mode-enabled="true" adds a Search tab/mode so users can toggle between AI chat and search inside the widget. [2]
  • Make search the default view: data-search-mode-default="true" opens the widget directly in search mode (instead of Ask AI). [1], [2]
  • Integrate with your existing site search UI (open widget in search mode):
    • Use data-modal-override-open-selector-search="<css selector>" to bind an existing “Search” UI element (button/search bar) so it opens the Kapa widget in search mode. [1], [2]
    • (The FAQ also describes overriding an existing search trigger via the modal override selector approach.) [3]
  • Keyboard shortcut for search: data-modal-open-on-command-k="true" plus data-modal-command-k-search-mode-default="true" opens the widget with Cmd/Ctrl+K directly into search mode. [1], [2]
  • Programmatic control: window.Kapa.open({ mode: "search" }) (optionally with query) opens the widget directly in search mode. [2]

Sources

[1] Kapa Docs — Website Widget: Configuration (consent + search parameters) (docs.kapa.ai)
[2] Kapa Docs — Website Widget: Search Mode feature (docs.kapa.ai)
[3] Kapa Docs — Website Widget: FAQ (search mode / overriding existing search trigger) (docs.kapa.ai)

Citations:

🌐 Web query:

kapa.ai search widget consent configuration how it works

💡 Result:

To require end-user consent in the kapa.ai Website Widget (including when you use it as a “search widget” by enabling Search mode), you configure it via data-* attributes on the widget <script> tag. [1] (docs.kapa.ai)

How the consent configuration works

  • Default behavior: consent is not required. [1] (docs.kapa.ai)
  • Enable consent gate: set data-consent-required="true". When enabled, the widget will show a consent screen and, upon acceptance, it sets a browser cookie named kapa_consent to remember the choice. [1] (docs.kapa.ai)
  • Customize the consent screen text/buttons (all optional):
    • data-consent-screen-title
    • data-consent-screen-disclaimer
    • data-consent-screen-accept-button-text
    • data-consent-screen-reject-button-text [1] (docs.kapa.ai)

Minimal example

<script
  async
  src="https://widget.kapa.ai/kapa-widget.bundle.js"
  data-website-id="XXX-XXX-XXX"
  data-project-name="Your Project"
  data-project-color="#6306B6"
  data-project-logo="https://example.com/logo.png"
  data-search-mode-enabled="true"
  data-consent-required="true"
  data-consent-screen-title="Hi there, do you want to use the AI chat?"
  data-consent-screen-disclaimer='By clicking "I agree, lets chat!" you agree to the necessary cookies. See our privacy policy.'
  data-consent-screen-accept-button-text="I agree, lets chat!"
  data-consent-screen-reject-button-text="No, not interested"
></script>

If you tell me which consent tool you use (Cookiebot, OneTrust, etc.), I can suggest the typical pattern for only calling window.Kapa.render() after consent (using data-render-on-load="false"). [1] (docs.kapa.ai)

Citations:

Integrated search is still gated by consent requirement.

Line 301 keeps data-consent-required: 'true', which blocks access to the entire widget (including search mode) until the user accepts the consent screen. Even though lines 308–309 configure Cmd/Ctrl+K to open directly in search mode, the consent screen still appears first. Per the kapa.ai widget documentation, data-consent-required applies to all widget functionality. If the PR goal is to let users access search without consent, remove data-consent-required or set it to 'false' to allow search to function freely while optionally gating only the AI assistant features.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.vitepress/config.mts around lines 300 - 309, The config currently sets
'data-consent-required' to 'true', which blocks the entire widget (including
integrated search) until consent; change the 'data-consent-required' entry to
'false' or remove that key so integrated search ('data-search-mode':
'integrated') and Cmd/Ctrl+K behavior
('data-modal-command-k-search-mode-default') can open directly without the
consent screen, while optionally leaving other consent-related keys intact if
you still want to gate AI assistant features.

}
],
[
Expand Down
5 changes: 5 additions & 0 deletions .vitepress/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,3 +106,8 @@ img[src='/search.png'] {
display: inline-flex;
align-items: center;
}

/* Hide VitePress local search modal to use kapa.ai search instead */
.VPLocalSearchBox {
display: none !important;
}
Comment on lines +110 to +113

@coderabbitai coderabbitai Bot Mar 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Keep a fallback when the external search widget is unavailable.

This hides the built-in search modal before the kapa.ai widget proves it loaded. If the third-party script is blocked, slow, or down, the navbar search trigger and Cmd/Ctrl-K end up pointing at a hidden UI and search disappears entirely. Hide .VPLocalSearchBox only after the external widget is ready, or keep local search as a fallback.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In @.vitepress/theme/style.css around lines 110 - 113, Don't hide
.VPLocalSearchBox by default; instead hide it only after the external kapa.ai
widget has confirmed it loaded (or leave local search visible as a fallback).
Implement this by removing the global "display: none" and toggling visibility
via a CSS state class (e.g., .external-search-ready .VPLocalSearchBox) or by
adding/removing a class on body when the kapa.ai init/load callback fires;
ensure the script that initializes kapa.ai (the widget load callback or init
function) sets that class only on successful load so the local search remains
usable if the third‑party widget is blocked/slow/down.