Ons script toevoegen

Kies de installatiemethode die bij uw site past. Installatie met een vaste SRI-versie is alleen beschikbaar voor teams waarvoor cside dit heeft ingeschakeld.

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

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

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"
  }
}

Wat de CLI doet

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

1. Verwijdert elke bestaande cside-scripttag, zodat opnieuw uitvoeren na elke build nooit een duplicaat toevoegt
2. Injecteert het cside script als eerste script in alle HTML-bestanden, waarbij node_modules en vendor worden overgeslagen
3. Voegt referrerpolicy="origin" toe aan de script-tag voor licentieverificatie

Veelgebruikte opties

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

# Een team-specifieke scripthost injecteren (aanbevolen)
npx @cside.dev/cli@latest --team-id [your-team-id]

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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://[your-team-id].csidetm.com/client.js" referrerpolicy="origin"></script>
    ...
  </head>
  <body>
  ...
  </body>
</html>

# With NPM
npm install @cside.dev/next

# With Yarn
yarn add @cside.dev/next

# With PNPM
pnpm add @cside.dev/next

// 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 teamId="[your-team-id]" /> {/* <- Here */}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

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

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

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

Optie 3: Vastgezet script met Subresource Integrity (SRI)

Als vastgezette scripts beschikbaar zijn voor uw team, kunt u een vaste versie van het cside script installeren met een Subresource Integrity (SRI) hash, zodat de browser de exacte scriptbytes controleert voordat het wordt uitgevoerd. De bestandsnaam is de SHA-256 hash van het volledige script, inclusief de configuratie van uw team. Het publiceren van een nieuwe configuratie of scriptversie levert een nieuwe URL op; bestaande vastgezette URL’s blijven werken.

Open Setup > Security in het dashboard en kopieer de volledige script-tag onder Latest published version. Plaats deze synchroon nabij het begin van <head>, voor andere scripts, en behoud de URL en integriteitswaarde van dezelfde publicatie:

<script
  src="https://[your-team-id].csidetm.com/[sha256].js"
  integrity="sha384-[base64-digest]"
  crossorigin="anonymous"
  referrerpolicy="origin"
></script>

De weergegeven versie is altijd de laatst gepubliceerde. Dit geeft niet aan welke versie op uw site is geinstalleerd. Als het script nog wordt voorbereid, keer dan terug naar deze pagina en selecteer Refresh; dit controleert de publicatie en bouwt het script niet opnieuw. Instellingswijzigingen kunnen enige tijd nodig hebben om in een nieuwe publicatie te verschijnen.

Een vastgezet script behoudt zijn oorspronkelijke code en instellingen. Om nieuwe instellingen of scriptfixes te ontvangen, vervangt u de volledige tag door de meest recente. Het in- of uitschakelen van Developer Mode vereist ook het vervangen of verwijderen van een reeds vastgezet script, en oude vastgezette URL’s blijven werken, zelfs als vastgezette installatie later voor uw team wordt uitgeschakeld.

Gebruik Retry als een publicatie niet laadt.

Volgende stappen

Zodra u cside aan uw website heeft toegevoegd , ziet u uw scriptverkeer in realtime op het dashboard.

Controleer of het werkt: Open het dashboard en open Health in de linkerzijbalk. Scriptverkeer verschijnt binnen enkele seconden na de eerste paginaweergave. Er is geen activatiestap. Uw domeinen staan op de Home-pagina van het team en onder Team Settings > Domains.

Liever automatische installatie? Gebruik een AI-coderingsassistent om cside automatisch toe te voegen aan uw project.