Ir al contenido

Integración del JS SDK (Cliente)

El JS SDK busca el máximo rendimiento con cero dependencias. Nuestra plataforma resuelve sus necesidades de gestión de cookies y le permite obtener consentimientos legalmente vinculantes fácilmente.

Inicio Rápido

Comience con una sola etiqueta de script. Diseño del banner, categorías de cookies, textos y cumplimiento regional (GDPR, CCPA…) — todo se gestiona desde el panel de HashEntry:

<head>
  <script
    src="https://tool.hashentry.com/cmp.js"
    data-site="SU_API_KEY_DEL_SITIO"
    async
  ></script>
</head>

Eso es todo. El SDK obtiene la configuración vinculada a su clave API desde el servidor; el diseño, los colores, el idioma, las categorías y los ajustes se controlan desde el panel.

Bloqueo de Scripts de Terceros

Marque los scripts que no deben ejecutarse antes del consentimiento con type="text/plain":

<script type="text/plain" data-cookie-category="analytics">
  // Google Analytics — no se ejecuta hasta que se apruebe "analytics"
</script>

<script type="text/plain" data-cookie-category="marketing"
        data-src="https://connect.facebook.net/en_US/fbevents.js">
</script>

Reabrir Preferencias

Icono predeterminado: Un icono persistente de “Preferencias de Cookies” aparece en pantalla.
Botón personalizado: Oculte el icono y llame a CMP.show() desde su propio enlace en el pie de página.

Atributos `data-*` Soportados

Atributo	Requerido	Predeterminado	Descripción
`data-site`	✅	—	Clave API del sitio
`data-mode`	❌	`local-fallback`	Modo: `remote`, `local`, `local-fallback`
`data-language`	❌	`auto`	Idioma del banner (`auto` = detección del navegador)
`data-region`	❌	`auto`	Override de región
`data-config`	❌	—	Configuración JSON inline (modo local)
`data-debug`	❌	`false`	Modo desarrollador
`data-headless`	❌	`false`	Modo sin interfaz

API JavaScript (`window.CMP`)

CMP.ready(() => { console.log('HashEntry CMP cargado.'); });

CMP.show();
CMP.hide();
CMP.accept();
CMP.reject();

const consent = CMP.getConsent();
CMP.hasConsent('analytics');

CMP.setMetadata({ order_id: 'ORD-54321' });

CMP.showDocumentApproval('contrato-venta', { transaction_id: 'TRX-101' })
  .then(result => { if (result.approved) console.log("¡Aprobado!", result.proof_hash); });

CMP.on('consent:given', (data) => { console.log("Consentimiento:", data.categories); });

Cola Pre-init

<script>
window.__CMP_QUEUE = window.__CMP_QUEUE || [];
window.__CMP_QUEUE.push(['setMetadata', { order_id: 'ORD-12345' }]);
window.__CMP_QUEUE.push(['setRegion', 'ES']);
</script>

Avanzado: Modos de Operación

Modo	Comportamiento	`data-site`	Servidor
`remote`	Config obtenida del servidor	Requerido	Requerido
`local`	Toda la config proporcionada desde la página	Opcional	Ninguno
`local-fallback` (predeterminado)	Intenta el servidor, cae al local si falla	Opcional	Preferido

Modo Local

Funcionar completamente sin servidor. Ideal para entornos de prueba y escenarios offline.

<head>
  <script type="application/json" id="cmp-config">
  {
    "banner_config": {
      "layout": "bottom_bar",
      "region_detection": "timezone",
      "theme": {
        "primary_color": "#2563EB",
        "font_family": "system",
        "theme_mode": "auto",
        "widget_icon": "cookie",
        "widget_position": "bottom_left"
      },
      "content": {
        "title": "Sus Preferencias de Cookies",
        "description": "Este sitio web utiliza cookies para mejorar su experiencia.",
        "accept_button_text": "Aceptar Todo",
        "reject_button_text": "Rechazar Todo",
        "settings_button_text": "Gestionar Preferencias",
        "save_selected_text": "Aceptar Selección",
        "close_text": "Cerrar",
        "widget_label": "Preferencias de Cookies"
      },
      "categories": [
        {
          "key": "necessary",
          "label": "Necesarias",
          "description": "Requeridas para la funcionalidad básica.",
          "required": true
        },
        {
          "key": "analytics",
          "label": "Analíticas",
          "description": "Estadísticas de visitantes.",
          "required": false
        },
        {
          "key": "marketing",
          "label": "Marketing",
          "description": "Anuncios personalizados.",
          "required": false
        }
      ],
      "mobile_layout": "bottom_bar",
      "behavior": {
        "show_reject_button": true,
        "show_settings_button": true,
        "show_widget": true,
        "show_powered_by": true,
        "block_page_scroll": false,
        "modal_layout": "sidebar_right",
        "cookie_display_mode": "vendor",
        "banner_animation": "slide_fade",
        "modal_tabs": true,
        "record_informational_consent": false
      }
    }
  }
  </script>
  <script src="https://tool.hashentry.com/cmp.js" data-mode="local" data-language="es" async></script>
</head>

Avanzado: Detección de Región (`region_detection`)

Método	Funcionamiento	Solicitud de Red
`timezone`	Estimación del país por zona horaria del navegador (120+ mapeos)	No
`freegeoip`	Servicio gratuito IP→país (timeout 3s, fallback a timezone)	Sí

Playground