Instala Cookies en tu plataforma

Todas las opciones cargan el mismo banner de Soyio e incluyen Google Consent Mode v2. La diferencia es dónde debes ubicar el loader para que se ejecute antes de los tags opcionales.

Reemplaza csite_TU_TOKEN por el token del sitio. Agrega data-sandbox="true" solo para pruebas en sandbox.

Next.js

Next.js indica que los scripts beforeInteractive deben estar en el layout raíz. Se insertan en el HTML inicial y se descargan antes de los módulos de Next.js.

Agrega el componente en app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="es">
      <body>
        <Script
          src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.14.0/dist/cookie-loader.js"
          strategy="beforeInteractive"
          data-site-token="csite_TU_TOKEN"
          data-consent-mode="gtag"
        />
        {children}
      </body>
    </html>
  );
}

No agregues onLoad ni onError: Next.js no admite esos callbacks con beforeInteractive.

Referencia: componente Script de Next.js.

React y Vite

Vite trata el index.html de la raíz como código fuente y como la entrada de la aplicación. Pega el loader antes del script type="module" que inicia React.

index.html
<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.14.0/dist/cookie-loader.js"
      data-site-token="csite_TU_TOKEN"
      data-consent-mode="gtag"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

No montes el loader desde un useEffect. En ese punto la aplicación y otros tags ya pueden haberse ejecutado.

Referencia: index.html y la raíz del proyecto en Vite.

Webflow

Abre Site settings > Custom code
Pega el loader en Head code
Selecciona Save changes
Publica el sitio

Head code
<script
  defer
  src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.14.0/dist/cookie-loader.js"
  data-site-token="csite_TU_TOKEN"
  data-consent-mode="gtag"
></script>

Webflow muestra el código personalizado en Preview, pero no lo publica hasta que vuelves a publicar el sitio.

Si configuraste analítica o marketing mediante una integración nativa, quita esa carga duplicada y vuelve a instalarla como un script bloqueado o mediante GTM. El loader no puede detener un tag que ya se ejecutó.

Referencia: código personalizado en head y body de Webflow.

Framer

Abre Project Settings > Custom Code
Selecciona Add Script
Usa Placement: Start of head
Usa Pages: All y Run: Once
Pega el loader y vuelve a publicar

Custom Code
<script
  defer
  src="https://cdn.jsdelivr.net/npm/@soyio/soyio-widget@3.14.0/dist/cookie-loader.js"
  data-site-token="csite_TU_TOKEN"
  data-consent-mode="gtag"
></script>

No agregues el mismo loader en Page Settings. Debe existir una sola instalación por página.

Referencias: código personalizado de Framer y configuración de scripts en el inicio de head.

Verifica la instalación

En cualquier plataforma:

Abre una ventana privada sin consentimiento guardado
Confirma que el banner aparece
Rechaza todo y verifica que no carguen tags opcionales
Acepta analítica o marketing y verifica solo la categoría elegida
Cambia las preferencias y confirma que el estado se actualiza

Sigue con bloqueo y verificación para configurar los tags opcionales.

Next.js​

React y Vite​

Webflow​

Framer​

Verifica la instalación​

Next.js

React y Vite

Webflow

Framer

Verifica la instalación