Require consent before chat

Use consent mode when visitors must accept a short notice before sending their first message.

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

If you omit the custom consent text, the widget uses the built-in strings for the active language.

Flow

1. The visitor opens the widget.
2. The consent screen appears before chat.
3. Accept stores a project-scoped knoku_consent cookie and opens chat.
4. Reject closes the widget. Consent appears again on the next open.

Consent is scoped by Knoku project. A visitor who accepts on one project will still see consent on another project hosted on the same site.

Knoku.ask() behavior

When consent is required, Knoku.ask(question) opens the widget on the consent screen first. The question is held and submitted after the visitor accepts.

If the visitor rejects, the held question is discarded.

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

Language defaults

Consent text follows data-language when you do not provide custom data-consent-* strings.

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

To override one line and keep the rest translated, set only that attribute:

data-consent-required="true"
data-consent-title="Custom consent title"

npm path

Use the npm package when language and consent copy come from your application state:

import { initKnokuWidget } from '@knoku/widget'
 
await initKnokuWidget({
  projectId: 'YOUR_PROJECT_ID',
  language: currentLocale,
  consent: {
    required: true,
  },
})

Style the consent screen

Relevant component slots:

• consent-screen
• consent-accept-button
• consent-reject-button

Example:

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

Related

• Consent attributes
• Runtime API
• Translate the widget