Ons script toevoegen

Er zijn twee manieren om cside aan uw site toe te voegen. Kies de methode die past bij uw setup:

Methode	Ideaal voor
CLI-tool	Statische sites (SSG), zero-code integratie
Handmatig script	SSR-applicaties, aangepaste setups

Optie 1: CLI-tool (aanbevolen voor statische sites)

Geen handmatig script nodig

De CLI injecteert automatisch het cside script en voorziet al uw third-party scripts van een prefix. Als u de CLI gebruikt, ga dan direct naar het activeren van uw domein. U hoeft geen script-tag handmatig toe te voegen.

De CLI werkt met elk framework dat statische HTML-bestanden genereert, waaronder:

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

Elk ander framework dat statische HTML-bestanden genereert, werkt ook. De CLI detecteert automatisch .next en dist uitvoermappen, of u kunt een aangepaste map specificeren met --dir.

De CLI installeren

npm install @cside.dev/cli

Of direct uitvoeren zonder installatie:

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

Toevoegen aan uw bouwproces

Voeg de CLI toe aan uw build-script in package.json:

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

Vervang example.com

Vervang example.com door uw daadwerkelijke domein dat in cside is geconfigureerd.

Wat de CLI doet

Wanneer u de CLI uitvoert, doet deze automatisch het volgende:

Injecteert het cside script in alle HTML-bestanden
Voorziet third-party script-URL’s van een prefix met de cside edge-infrastructuur
Voegt referrerpolicy="origin" toe aan script-tags voor licentieverificatie

Veelgebruikte opties

# Een specifieke map verwerken
npx @cside.dev/cli example.com --dir ./out

# Specifieke scripts uitsluiten van prefixing
npx @cside.dev/cli example.com --excluded-scripts "https://example.com/skip.js"

Zie de CLI-integratiehandleiding voor alle opties.

Optie 2: Handmatige scriptinstallatie

Gebruik deze methode voor SSR-applicaties of als u meer controle wilt over de integratie.

Het handmatige script draait in de JavaScript-engine van de browser, waardoor het compatibel is met elk framework of platform, ongeacht uw tech stack.

U kunt eenvoudig onze script-tag toevoegen aan de <head> van het document. Zorg ervoor dat de <script>-tag het eerste script-element is dat aan de pagina wordt toegevoegd.

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

Als u NextJS gebruikt, kunt u gebruikmaken van ons @cside.dev/next npm-pakket. Installeer het als volgt:

Ons script installeren

# With NPM
npm install @cside.dev/next

# With Yarn
yarn add @cside.dev/next

# With PNPM
pnpm add @cside.dev/next

Ons script toevoegen

Na de installatie voegt u simpelweg het volgende toe aan uw _document-bestand in uw 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>
  );
}

of als u App Router gebruikt:

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

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

Ga naar Webflow

Ga eerst naar het Webflow Dashboard en navigeer naar het 3-puntenmenu en selecteer “Settings”. Navigeer vervolgens naar “Custom code”.

Het cside script toevoegen

Na het navigeren naar de sectie “Custom code”, voegt u simpelweg het volgende toe bovenaan uw “Head Code” sectie.

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

Opslaan, deployen en ontspannen!

Klik simpelweg op “Save” en u bent klaar! U kunt nu het scriptverkeer van uw website zien worden gerouteerd via Gatekeeper en in realtime gemonitord op ons dashboard.

Volgende stappen

Zodra u cside aan uw website heeft toegevoegd (via CLI of handmatig script), ziet u uw scriptverkeer in realtime op het dashboard.

Activeer uw domein: Ga naar Domeinen in de linkerzijbalk en klik op de activeerknop naast uw domein.