Developer documentation

Add the Kothok agent to any site with a single snippet, then configure and control it however you like. The widget is lightweight and loads asynchronously, so it never blocks your page.

#Introduction

Kothok ships as a lightweight browser widget. You embed one script on your website, and the agent — trained on your own content — appears and starts answering visitors. No build step, no framework required.

You’ll need a public key (starts with pk_live_), which you can copy from your Kothok dashboard under Installation.

#Quickstart

Paste this snippet just before the closing </body> tag on any page you want the agent to appear:

index.html

<script
  src="https://static.kothok.ai/js/widgets.js"
  data-public-key="pk_live_xxxxxxxxxxxx"
  async
></script>

That’s it. Reload the page and the widget appears in the bottom corner. Most teams go from snippet to live in about five minutes.

#Configuration

The widget is configured with data-* attributes on the script tag.

Attribute	Required	Description
`data-public-key`	Yes	Your workspace public key (`pk_live_…`).
`async`	Recommended	Loads the widget without blocking page render.

Appearance, welcome message, language, and behavior are managed from your dashboard — so you can change them without touching code.

#JavaScript API

Once loaded, the widget exposes a global you can use to open, close, or react to the agent — handy for launching it from your own buttons.

app.js

// Open or close the chat programmatically
window.Kothok?.open();
window.Kothok?.close();

// Launch from your own button
document
  .querySelector("#help-button")
  ?.addEventListener("click", () => window.Kothok?.open());

Method availability can depend on your plan. See your dashboard for the exact API surface enabled for your workspace.

#Frameworks

In React / Next.js, load the script with the framework’s script helper so it’s injected once, after hydration:

app/layout.tsx

// app/layout.tsx (Next.js)
import Script from "next/script";

<Script
  src="https://static.kothok.ai/js/widgets.js"
  data-public-key="pk_live_xxxxxxxxxxxx"
  strategy="lazyOnload"
/>

The same snippet works in Vue, Angular, Svelte, or plain HTML — anywhere you can add a <script> tag.

#Webhooks & REST API Business

Programmatic access — a REST API for conversations and captured leads, plus webhooks for real-time events — is available on our Growth and Business plans.

Need early access or a specific webhook event now? Contact our team— we’ll help you set it up.

#Security

The widget loads over HTTPS and uses a public key scoped to your workspace — it never exposes private credentials in the browser. Your business content and customer conversations are handled securely and used only to power your own agent.

#Support

Stuck, or want a hand with a custom setup? We’re happy to help.

Contact support Get your public key