5-Minute Quick Start

Add this as the first script in your <head>:

<script src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>

npm install @cside.dev/next

App Router (layout.tsx):

import { CSideScript } from '@cside.dev/next';

export default function Layout({ children }) {
  return (
    <>
      <CSideScript teamId="[your-team-id]" />
      {children}
    </>
  );
}

Pages Router (_document.tsx):

import { CSideScript } from '@cside.dev/next';

export default function Document() {
  return (
    <Html>
      <Head>
        <CSideScript teamId="[your-team-id]" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Add to your build script in package.json:

{
  "scripts": {
    "build": "your-build-command && npx @cside.dev/cli@latest --team-id [your-team-id]"
  }
}

The CLI takes no positional arguments; pass your team ID with --team-id. It injects the cside monitoring script into your HTML files and works with Astro, Gatsby, Hugo, Eleventy, Docusaurus, and any framework that outputs static HTML.

npm install @cside.dev/vite

// vite.config.ts
import cside from '@cside.dev/vite';

export default defineConfig({
  plugins: [cside({ teamId: '[your-team-id]' })],
});

1. In Google Tag Manager, go to Tags > New, click Tag Configuration, and select Custom HTML
2. Paste the snippet below into the HTML field (replace [your-team-id] with the team ID shown under Team Settings > General)
3. Under Triggering, select All Pages
4. Save the tag and publish your GTM container

<script type="text/javascript" src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>

If you use Claude Code, Cursor, or another AI coding assistant, it can add cside for you. See the full prompt on the AI assistant page, or paste this into your terminal:

Add cside client-side security monitoring to this project. Install the
right package for the framework (@cside.dev/next for Next.js,
@cside.dev/vite for Vite, @cside.dev/cli for static sites) or add
<script src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>
as the first script in the <head> for any other setup. Then check if the
project has a Content Security Policy (in HTTP headers, meta tags,
helmet.js, next.config.js, or hosting config). If the CSP has explicit
script-src or connect-src directives listing specific domains, add
*.csidetm.com to both. If the CSP uses broad rules like
"default-src https:", no changes are needed.