Agregar nuestro script

Hay dos formas de agregar cside a tu sitio. Elige el metodo que se ajuste a tu configuracion:

Opcion 1: Herramienta CLI (recomendada para sitios estaticos)

El CLI funciona con cualquier framework que genere archivos HTML estaticos, incluyendo:

• Astro (modo estatico)
• Next.js (exportacion estatica)
• Gatsby
• Nuxt (modo estatico)
• SvelteKit (adaptador estatico)
• Eleventy (11ty)
• Hugo
• VitePress / VuePress
• Docusaurus

Cualquier otro framework que genere archivos HTML estaticos tambien funcionara. El CLI detecta automaticamente las carpetas de salida .next y dist, o puedes especificar un directorio personalizado con --dir.

Instalar el CLI

npm install @cside.dev/cli

O ejecuta directamente sin instalar:

npx @cside.dev/cli@latest

Agregar a tu proceso de compilacion

Agrega el CLI a tu script de compilacion en package.json:

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

Lo que hace el CLI

Cuando ejecutas el CLI, automaticamente:

1. Elimina cualquier etiqueta de script de cside existente, asi que volver a ejecutarlo tras cada compilacion nunca agrega un duplicado
2. Inyecta el script de cside como primer script en todos los archivos HTML, omitiendo node_modules y vendor
3. Agrega referrerpolicy="origin" a la etiqueta de script para la verificacion de licencia

Opciones comunes

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

# Inyectar un host de script con ambito de equipo (recomendado)
npx @cside.dev/cli@latest --team-id [your-team-id]

Consulta la guia de integracion CLI para todas las opciones.

Opcion 2: Instalacion manual del script

Usa este metodo para aplicaciones SSR o si necesitas mas control sobre la integracion.

El script manual se ejecuta en el motor JavaScript del navegador, haciendolo compatible con cualquier framework o plataforma, independientemente de tu stack tecnologico.

<!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 -->

Siguientes pasos

Una vez que hayas agregado cside a tu sitio web (via CLI o script manual), veras el trafico de scripts en tiempo real en el panel.

Verifica que funciona: Abre el panel de cside y abre Health en la barra lateral izquierda. El trafico de scripts aparece a los pocos segundos de la primera visita. No hay ningun paso de activacion. Tus dominios aparecen en la pagina Home del equipo y en Team Settings > Domains.