Add an Ask Docs button

Use data-open-selector to open the widget from your own button, link, search box, or navigation item.

Keep the floating launcher

This adds a header button while keeping the default floating launcher.

<header>
  <button id="ask-docs" type="button">Ask Docs</button>
</header>
 
<script
  async
  src="https://cdn.knoku.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-open-selector="#ask-docs"
></script>

The selector can match one element or many elements.

Hide the floating launcher

Use data-launcher-hidden="true" when your own UI should be the only visible trigger.

<script
  async
  src="https://cdn.knoku.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-launcher-hidden="true"
  data-open-selector="#ask-docs"
></script>

The runtime API still works when the launcher is hidden.

Dynamic navigation

data-open-selector works with static HTML and elements rendered later by frameworks such as React, Vue, Svelte, Docusaurus, VitePress, and client-side routers.

The widget watches the page and binds the click handler when a matching element appears.

Search input or keyboard shortcut

Selectors can target any element, including a search input:

<input id="docs-search" placeholder="Search docs or ask" />
 
<script
  async
  src="https://cdn.knoku.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-open-selector="#docs-search"
></script>

For keyboard shortcuts, call the runtime API:

document.addEventListener('keydown', (event) => {
  if ((event.metaKey || event.ctrlKey) && event.key === 'i') {
    event.preventDefault()
    window.Knoku?.open()
  }
})

Submit a question directly

Knoku.ask(question) opens the widget and sends a question in one call:

document.getElementById('pricing-question').addEventListener('click', () => {
  window.Knoku?.ask('How does pricing work?')
})

If consent is required, the question is submitted after the visitor accepts. See Require consent before chat.

Related

• Behavior attributes
• Runtime API