# Framework guides

One guide per framework: the exact file the tag goes in, the snippet in that framework’s idiom, a consent-gated variant, the CSP note, client-side routing and how to check it works.

Every guide uses the same tag underneath. The SDK records a visit on each full page load; when your install page is a client-side route, the guide shows where to call `InstallAttribution.init({ service, project })` as that route opens. For hosted site builders, each guide ends with a tip: if your pages change without a full reload, add the page-visit snippet.

## No framework

- [**Plain HTML**The head of every page](https://clitrail.com/docs/frameworks/html)
- [**Vanilla JavaScript (ES modules)**`src/main.js`](https://clitrail.com/docs/frameworks/es-module)
- [**jQuery, Alpine.js and htmx pages**Your page template](https://clitrail.com/docs/frameworks/jquery-alpine-htmx)
- [**Web components and Lit**`index.html`](https://clitrail.com/docs/frameworks/web-components)
- [**Server-rendered apps (Rails, Laravel, Django, Express)**Your shared layout template](https://clitrail.com/docs/frameworks/server-rendered)

## React

- [**React + Vite (single-page app)**`index.html`](https://clitrail.com/docs/frameworks/react-vite)
- [**Create React App (legacy)**`public/index.html`](https://clitrail.com/docs/frameworks/create-react-app)
- [**Next.js (App Router)**`app/layout.tsx`](https://clitrail.com/docs/frameworks/nextjs-app)
- [**Next.js (Pages Router)**`pages/_app.tsx`](https://clitrail.com/docs/frameworks/nextjs-pages)
- [**Remix**`app/root.tsx`](https://clitrail.com/docs/frameworks/remix)
- [**React Router (framework mode)**`app/root.tsx`](https://clitrail.com/docs/frameworks/react-router)
- [**Gatsby**`gatsby-ssr.js`](https://clitrail.com/docs/frameworks/gatsby)
- [**Preact**`index.html`](https://clitrail.com/docs/frameworks/preact)
- [**Docusaurus**`docusaurus.config.js`](https://clitrail.com/docs/frameworks/docusaurus)
- [**Nextra**`app/layout.jsx`](https://clitrail.com/docs/frameworks/nextra)
- [**Fumadocs**`app/layout.tsx`](https://clitrail.com/docs/frameworks/fumadocs)

## Vue

- [**Vue + Vite (single-page app)**`index.html`](https://clitrail.com/docs/frameworks/vue-vite)
- [**Nuxt**`nuxt.config.ts`](https://clitrail.com/docs/frameworks/nuxt)
- [**VitePress**`.vitepress/config.mts`](https://clitrail.com/docs/frameworks/vitepress)
- [**VuePress**`.vuepress/config.ts`](https://clitrail.com/docs/frameworks/vuepress)
- [**Quasar**`index.html`](https://clitrail.com/docs/frameworks/quasar)

## Svelte

- [**Svelte + Vite (single-page app)**`index.html`](https://clitrail.com/docs/frameworks/svelte-vite)
- [**SvelteKit**`src/app.html`](https://clitrail.com/docs/frameworks/sveltekit)

## Others

- [**Angular**`src/index.html`](https://clitrail.com/docs/frameworks/angular)
- [**SolidJS + Vite (single-page app)**`index.html`](https://clitrail.com/docs/frameworks/solid-vite)
- [**SolidStart**`src/entry-server.tsx`](https://clitrail.com/docs/frameworks/solidstart)
- [**Qwik City**`src/root.tsx`](https://clitrail.com/docs/frameworks/qwik)
- [**Astro**`src/layouts/Layout.astro`](https://clitrail.com/docs/frameworks/astro)
- [**Starlight (Astro)**`astro.config.mjs`](https://clitrail.com/docs/frameworks/starlight)
- [**Ember.js**`index.html`](https://clitrail.com/docs/frameworks/ember)
- [**Eleventy**`_includes/layouts/base.njk`](https://clitrail.com/docs/frameworks/eleventy)
- [**Hugo**`layouts/_partials/head.html`](https://clitrail.com/docs/frameworks/hugo)
- [**Jekyll**`_includes/head.html`](https://clitrail.com/docs/frameworks/jekyll)
- [**Material for MkDocs**`overrides/main.html`](https://clitrail.com/docs/frameworks/mkdocs-material)
- [**Sphinx**`conf.py`](https://clitrail.com/docs/frameworks/sphinx)
- [**mdBook**`theme/head.hbs`](https://clitrail.com/docs/frameworks/mdbook)
- [**Zola**`templates/base.html`](https://clitrail.com/docs/frameworks/zola)

## Hosted and no-code

- [**Mintlify**`clitrail.js`](https://clitrail.com/docs/frameworks/mintlify)
- [**GitBook**A page on your own site](https://clitrail.com/docs/frameworks/gitbook)
- [**ReadMe**Custom Include Tags → Header HTML](https://clitrail.com/docs/frameworks/readme)
- [**Webflow**Site settings → Custom code](https://clitrail.com/docs/frameworks/webflow)
- [**Framer**Site settings → Custom Code](https://clitrail.com/docs/frameworks/framer)
- [**Squarespace**Code Injection → Header](https://clitrail.com/docs/frameworks/squarespace)
- [**Wix**Settings → Custom Code](https://clitrail.com/docs/frameworks/wix)
- [**WordPress**`wp-content/mu-plugins/clitrail.php`](https://clitrail.com/docs/frameworks/wordpress)
- [**Google Tag Manager**A Custom HTML tag](https://clitrail.com/docs/frameworks/gtm)