Adding our script

Choose how to integrate cside into your website. CLI for static sites, or manual script installation for dynamic applications.

There are two ways to add cside to your site. Choose the method that fits your setup:

Method	Best for
CLI tool	Static sites (SSG), zero-code integration
Manual script	SSR applications, custom setups

Option 1: CLI tool (recommended for static sites)

No manual script needed

The CLI automatically injects the cside script and prefixes all your third-party scripts. If you use the CLI, skip to activating your domain. No need to add a script tag manually.

The CLI works with any framework that outputs static HTML files, including:

Astro (static mode)
Next.js (static export)
Gatsby
Nuxt (static mode)
SvelteKit (static adapter)
Eleventy (11ty)
Hugo
VitePress / VuePress
Docusaurus

Any other framework that outputs static HTML files will also work. The CLI automatically detects .next and dist output folders, or you can specify a custom directory with --dir.

Install the CLI

npm install @cside.dev/cli

Or run directly without installing:

npx @cside.dev/cli@latest example.com

Add to your build process

Add the CLI to your build script in package.json:

{
  "scripts": {
    "build": "your-build-command && npx @cside.dev/cli@latest example.com"
  }
}

Replace example.com

Replace example.com with your actual domain configured in cside.

What the CLI does

When you run the CLI, it automatically:

Injects the cside script into all HTML files
Prefixes third-party script URLs with the cside edge infrastructure
Adds referrerpolicy="origin" to script tags for license verification

Common options

# Process a specific directory
npx @cside.dev/cli example.com --dir ./out

# Exclude specific scripts from prefixing
npx @cside.dev/cli example.com --excluded-scripts "https://example.com/skip.js"

See the CLI Integration guide for all options.

Option 2: Manual script installation

Use this method for SSR applications or if you need more control over the integration.

The manual script runs in the browser's JavaScript engine, making it compatible with any framework or platform, regardless of your tech stack.

You can easily add our script tag to the document <head>. Make sure the <script> tag is the first script element that is added to the page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://proxy.csidetm.com/script.js" referrerpolicy="origin"></script>
    ...
  </head>
  <body>
  ...
  </body>
</html>

If you'r using NextJS, you can make use of our @cside.dev/next npm package. Just install it like this:

Install our Script

# With NPM
npm install @cside.dev/next

# With Yarn
yarn add @cside.dev/next

# With PNPM
pnpm add @cside.dev/next

Add our Script

After installing, simply add the following to your _document file in your NextJS project.

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CSideScript } from '@cside.dev/next';

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <CSideScript /> {/* <- Here */}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

or if you're using App router:

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

export default function Layout({ children }) {
  return (
    <>
      <CSideScript /> {/* <- Here */}
      {children}
    </>
  );
}

Go to Webflow

First, go to the Webflow Dashboard and navigate to the 3 dots menu and select "Settings". Then navigate to "Custom code".

Add cside's Script

After navigating to the "Custom code" section, simply add the following to the top of your "Head Code" section.

<!-- cside script -->
<script src="https://proxy.csidetm.com/script.js" referrerpolicy="origin"></script>
<!-- the rest of your head code/scripts -->

Save, Deploy, and Relax!

Simply click "Save" and you're done! You can now see your website's script traffic be routed through Gatekeeper and monitored in realtime on our dashboard.

Next steps

Once you've added cside to your website (via CLI or manual script), you'll see your script traffic in realtime on the dashboard.

Activate your domain: Go to Domains in the left sidebar and click the activate button next to your domain.