Skip to content
Get started
CommentKit / Frameworks

Frameworks

Add CommentKit to the stack you already use. Every setup loads the same widget.

Choose your setup

Every setup loads the same feedback widget. Add it once. The controls live in a Shadow DOM, separate from your page’s styles, and you do not need React on your site.

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

Paste this before the closing </body> tag, or into your site builder’s custom code area. Works on WordPress, Webflow, Shopify and plain HTML. No build step.

Setup guide

Step by step

Each guide shows the install, the build plugin where there is one, the environment variables npx @commentkit/cli init writes, and what to know about server rendering.

  • Next.js: The React helper in your root layout, the build plugin and env variables.
  • React (Vite): The React helper, the Vite build plugin and env variables.
  • Vue and Nuxt: The Vue plugin, a client-only Nuxt plugin and the build plugin.
  • Svelte and SvelteKit: The Svelte action in your root layout and the Vite build plugin.
  • Astro: init() in your base layout and the Astro integration.
  • Angular: init() in the browser entry, or the script tag.
  • WordPress: One script tag in your theme footer.
  • Shopify: One script tag in theme.liquid, what it covers and what it does not.
  • Webflow: Footer code in Site settings, one page only, and a staging-only option.
  • Framer: Custom code at the end of the body, then publish.
  • Wix, Squarespace and Ghost: Where each builder keeps its custom code, and the plan it needs.
  • Google Tag Manager: A Custom HTML tag for sites you can only change through Tag Manager.
  • Server-rendered sites: Laravel, Rails, Django, Phoenix, htmx and Alpine, and how CommentKit handles page swaps.
  • Netlify: Connect Netlify and pick the site: no code change, deploy previews included.
  • Any website: Plain HTML, Rails, Laravel, Django, Shopify and everything else: one script tag.
  • Custom element: The <comment-kit> tag for markup-first setups, with every attribute.

Server rendering

The widget only starts in the browser. The React component works in Next.js server layouts. In Nuxt, install the Vue plugin from a .client.ts plugin. The Svelte action only runs in the browser, so it is safe in SvelteKit.

For any other setup, call init() once in the browser. It returns an instance; call destroy() on it if your app is removed from the page. Do not call init() on every render.

Prefer markup? Use the custom element: import it once in your bundle, then place the tag.

main.ts
import "@commentkit/comment-kit/element";
Your markup
<comment-kit project="pk_live_your_key" branch="main"></comment-kit>

Nothing else to install

Screenshots and live updates are included and load only when someone needs them. Visitors who never open CommentKit only download a tiny loader.