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 cside y prefija todos tus scripts de terceros. Si usas el CLI, ve directamente a activar tu dominio. 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 example.com

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 example.com"
  }
}

Reemplaza example.com

Reemplaza example.com con tu dominio real configurado en cside.

Lo que hace el CLI

Cuando ejecutas el CLI, automaticamente:

Inyecta el script de cside en todos los archivos HTML
Prefija las URLs de scripts de terceros con la infraestructura edge de cside
Agrega referrerpolicy="origin" a las etiquetas de script para la verificacion de licencia

Opciones comunes

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

# Exclude specific scripts from prefixing
npx @cside.dev/cli example.com --excluded-scripts "https://example.com/skip.js"

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 facilmente 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://proxy.csidetm.com/script.js" referrerpolicy="origin"></script>
    ...
  </head>
  <body>
  ...
  </body>
</html>

Si usas NextJS, puedes usar nuestro paquete npm @cside.dev/next. Solo 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, simplemente 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”, simplemente agrega lo siguiente en la parte superior de tu seccion “Head Code”.

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

Guarda, despliega y relajate!

Simplemente haz clic en “Save” y listo! Ahora puedes ver el trafico de scripts de tu sitio web siendo enrutado a traves de Gatekeeper y 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.

Activa tu dominio: Ve a Dominios en la barra lateral izquierda y haz clic en el boton de activar junto a tu dominio.