Frameworks¶

The widget is one <script> tag. On plain HTML, paste it before </body> on every page (Install the widget).

React and Next.js¶

Use next/script so the tag is injected once, not on every render.

// app/layout.tsx
import Script from "next/script";

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

For the Pages Router, use pages/_app.tsx.

Single-page apps¶

Vue, Angular, Svelte and others: add the tag to the index.html shell, not a route component.

WordPress¶

Install the Kothok plugin, open Kothok in WordPress, select Connect, then approve in the dashboard. Without the plugin, add the tag in a child theme:

<?php
// functions.php, in your child theme
add_action( 'wp_footer', function () { ?>
  <script
    src="https://static.kothok.ai/js/widgets.js"
    data-public-key="YOUR_PUBLIC_KEY"
    async>
  </script>
<?php } );

Shopify¶

In Online Store → Themes → Edit code, open theme.liquid and paste the snippet before </body>.

Tag managers¶

In Google Tag Manager, add a Custom HTML tag with the snippet and fire it on All Pages.

Not showing? See Install the widget.