Kookeebeta
Back to changelog

v1.4.1 — AI chat widget in one script tag

1.4.1New featureDenis Povarov

The AI chat widget now installs on any website with a single script tag — no React, no build step. Plus a round of chat improvements that apply to every install.

One script tag

Drop this before </body> and the widget is live:

HTML 
<script async src="https://kookee.dev/chat/latest.js" data-api-key="YOUR_API_KEY"></script>

That is the whole install. It works on plain HTML, Shopify, WordPress, Vue, Angular and anything else that can serve a script tag. The widget renders inside a shadow root, so your page's CSS cannot affect it and its styles cannot leak into your page.

The snippet with your project's API key is ready to copy on the project's AI Chat page in the dashboard. Remember to add your site's domain to the project's Allowed Origins.

Configuration with data attributes

Everything is configurable from the tag itself:

  • data-api-key — your project API key

  • data-base-url — API base URL

  • data-locale — widget language

  • data-title — header title

  • data-greeting — first message shown to the visitor

  • data-placeholder — input placeholder

  • data-launcher-label — text for the label pill next to the launcher

  • data-position — bottom-right or bottom-left

  • data-theme — light, dark or auto

  • data-primary-color — accent color

JavaScript API

The script exposes window.KookeeChat for full control:

HTML 
<script async src="https://kookee.dev/chat/latest.js"></script>
<script>
  KookeeChat.init({ apiKey: 'YOUR_API_KEY', hideLauncher: true });

  document.querySelector('#support').addEventListener('click', () => KookeeChat.open());

  const off = KookeeChat.on('sourceClick', (source) => console.log(source));
</script>

Available methods: init(config), open(), close(), toggle(), sendMessage(text), clearMessages(), on('open' | 'close' | 'sourceClick', cb) — which returns an unsubscribe function — and destroy().

Calling init() yourself also unlocks suggestions, callbacks and a custom launcher button of your own via hideLauncher.

TypeScript definitions

Standalone typings are served next to the script at https://kookee.dev/chat/latest.d.ts, and at https://kookee.dev/consent/latest.d.ts for the consent widget.

Chat improvements

These apply to both the script widget and @kookee/react:

  • Conversations survive navigation — a chat is kept per browser tab, so moving between pages no longer starts over

  • New chat — a button in the header starts a fresh conversation whenever the visitor wants one

  • Close is now minimize — closing the panel keeps the conversation instead of discarding it

  • Full-height expanded mode — the expanded panel now uses the full height of the window

  • Launcher label — an optional pill next to the floating button ("Need help?") that opens the chat and can be dismissed

Packages

@kookee/sdk and @kookee/react are released at 1.4.1. React users carry on as before:

tsx 
import { KookeeChatWidget } from '@kookee/react/chat';

The script tag is for everyone else.

Breaking change

The consent widget script URL changed from /consent/v1.js to /consent/latest.js:

HTML 
<script async src="https://kookee.dev/consent/latest.js" data-api-key="YOUR_API_KEY"></script>

Update the URL wherever you embed the consent widget.