Skip to content
Get started
CommentKit / Frameworks

Any website

Plain HTML, Rails, Laravel, Django, Shopify and everything else: one script tag.

Add the script tag

Before </body>
<script src="https://commentkit.dev/cdn/v1/loader.js" data-project="pk_live_your_key" defer></script>

One tag, on every page where people should leave feedback. No package and no build step. npx @commentkit/cli init in a folder without a supported framework shows the same tag with your key.

Where it goes

  • Plain HTML: before </body> on each page, or in your shared footer include.
  • Laravel, Rails, Django, Phoenix and htmx: in <head> of your main layout, so Turbo, Livewire navigation and hx-boost run it only once. See Server-rendered sites.
  • Shopify: layout/theme.liquid, before </body>. See Shopify.
  • Webflow, Framer, Wix, Squarespace and Ghost: the site-wide custom code area for the footer. See Webflow, Framer and Wix, Squarespace and Ghost.
  • Google Tag Manager: needs a slightly different snippet. See Google Tag Manager.

The project key is public by design, so it is fine to write it straight into the template.

Attributes

  • data-project: your project key (required).
  • data-branch and data-commit: file feedback per branch, for example from your deploy’s environment.
  • data-locale: the widget language, for example fr or pt-BR. Without it the widget follows <html lang>, then the reader’s browser. Coming with the next widget release; until then the widget picks the language on its own.
  • data-auth: auto (default), popup or redirect for sign-in.
  • data-endpoint: the address of another CommentKit server. Leave it out for commentkit.dev.
  • data-hide-on-production="false": show the launcher to every visitor instead of only to reviewers.
  • data-shortcuts="false": turn off the single-key shortcuts (C, J / K, E and ?) if they clash with your site’s own. Esc and Ctrl/Cmd + Shift + K stay.

Theme, position and private areas are set in the dashboard and apply without changing the tag.

Server rendering

Server-rendered pages need nothing extra: the loader runs in the browser after the page has loaded (defer). If your site sets a Content Security Policy, see the CSP guide.