Agregar nuestro script

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

Metodo	Ideal para
Herramienta CLI	Sitios estaticos (SSG), integracion sin codigo
Script manual	Aplicaciones SSR, configuraciones personalizadas

Opcion 1: Herramienta CLI (recomendada para sitios estaticos)

No se necesita script manual

El CLI inyecta automaticamente el script de monitoreo de cside en tus archivos HTML. Si usas el CLI, no necesitas agregar una etiqueta de script manualmente.

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:

Inyecta el script de cside en todos los archivos HTML
Agrega referrerpolicy="origin" a las etiquetas 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
npx @cside.dev/cli --team-id 345678765434567890

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.

Puedes agregar nuestra etiqueta de script al <head> del documento. Asegurate de que la etiqueta <script> sea el primer elemento de script que se agrega a la pagina.

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

Si usas NextJS, puedes usar nuestro paquete npm @cside.dev/next. Instalalo asi:

Instala nuestro script

# With NPM
npm install @cside.dev/next

# With Yarn
yarn add @cside.dev/next

# With PNPM
pnpm add @cside.dev/next

Agrega nuestro script

Despues de instalar, agrega lo siguiente a tu archivo _document en tu proyecto NextJS.

// 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>
  );
}

o si usas App router:

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

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

Ve a Webflow

Primero, ve al Panel de Webflow y navega al menu de 3 puntos y selecciona “Settings”. Luego navega a “Custom code”.

Agrega el script de cside

Despues de navegar a la seccion “Custom code”, agrega lo siguiente en la parte superior de tu seccion “Head Code”.

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

Guarda, despliega y relajate!

Haz clic en “Save” y listo! Ahora puedes ver el trafico de scripts de tu sitio web monitoreado en tiempo real en nuestro panel.

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 ve a Dominios en la barra lateral izquierda. El trafico de scripts aparece a los pocos segundos de la primera visita. No hay ningun paso de activacion.

¿Prefieres usar IA?

Si usas Claude Code, Cursor u otro asistente de programacion con IA, puede encargarse de la integracion por ti. Consulta Agregar cside con IA.