Require consent before chat

data-consent-required="true" shows a consent screen the first time a visitor opens the panel. The decision is stored in a project-scoped cookie (knoku_consent).


<script
  async
  src="https://cdn.knoku.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-language="en"
  data-consent-required="true"
  data-consent-title="AI chat consent"
  data-consent-disclaimer="Your question is sent to our AI to generate an answer."
  data-consent-accept-text="Continue"
  data-consent-reject-text="Cancel"
></script>

Without the data-consent-* text attributes, the widget uses translated defaults from data-language.

Flow

Visitor opens the panel → consent screen.
Accept → cookie set, panel goes to chat. Subsequent opens skip the screen.
Reject → panel closes. Consent reappears next time.

The cookie is project-scoped: a visitor who consented on one Knoku project will see consent again on a different project hosted on the same site.

Holding `Knoku.ask()` until accept

When consent is required, Knoku.ask(question) opens the panel on the consent screen first. The question is held and submitted automatically when the user accepts. Reject discards the question.


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

The widget ships built-in consent translations for all 13 supported languages (en, tr, de, es, fr, it, pt, nl, ja, ko, zh, ru, cs). When you set data-language and omit the data-consent-* text attributes, the consent screen renders in that language automatically:


<script
  async
  src="https://cdn.knoku.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-language="de"
  data-consent-required="true"
></script>

To customize a single line in one language while keeping the rest of the built-in translation, override only what you need (the missing fields fall back to the language default):


data-consent-required="true"
data-consent-title="Custom title overrides the German default"

For multi-language sites where the language is computed at runtime, use the npm path so all consent fields can be set together:


import { initKnokuWidget } from '@knoku/widget'
 
const lang = document.documentElement.lang.startsWith('de') ? 'de' : 'en'
 
await initKnokuWidget({
  projectId: 'YOUR_PROJECT_ID',
  language: lang,
  consent: {
    required: true,
    // omit title/disclaimer/acceptText/rejectText to use the built-in translations
  },
})

Slot names: consent-screen, consent-accept-button, consent-reject-button.


data-consent-accept-button-background-color="#0ea5e9"
data-consent-reject-button-color="#64748b"

Require consent before chat

Flow

Holding Knoku.ask() until accept

Per-language consent strings

Branding the consent screen

Related

Holding `Knoku.ask()` until accept