Agregar nuestro script

Elige el método de instalación adecuado para tu sitio. La instalación fijada con SRI solo está disponible para equipos donde cside la haya activado.

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

Opcion 3: Script fijo con Subresource Integrity (SRI)

Si los scripts fijos estan disponibles para tu equipo, puedes instalar una version fija del script de cside con un hash de Subresource Integrity (SRI), para que el navegador verifique los bytes exactos del script antes de ejecutarlo. El nombre de archivo es el hash SHA-256 del script completo, incluida la configuracion de tu equipo. Publicar una nueva configuracion o version del script genera una nueva URL; las URLs fijas existentes siguen funcionando.

Abre Setup > Security en el panel y copia la etiqueta de script completa bajo Latest published version. Colocala de forma sincronica cerca del inicio de <head>, antes de otros scripts, manteniendo la URL y el valor de integridad de la misma publicacion:

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

La version mostrada es siempre la ultima publicada. No indica que version esta instalada en tu sitio. Si el script aun se esta preparando, vuelve a esta pagina y selecciona Refresh; esto verifica la publicacion y no reconstruye el script. Los cambios de configuracion pueden tardar en aparecer en una nueva publicacion.

Un script fijo conserva su codigo y configuracion originales. Para recibir nueva configuracion o correcciones del script, reemplaza la etiqueta completa por la mas reciente. Activar o desactivar Developer Mode tambien requiere reemplazar o eliminar un script ya fijado, y las URLs fijas antiguas siguen funcionando aunque la instalacion fija se deshabilite despues para tu equipo.

Si una publicacion no carga, usa Retry.

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.