---
title: "Mejora tu Sitio Web de Carrd.co con un Aviso de Cookies en Minutos"
description: "Mejora la funcionalidad de tu sitio web y su cumplimiento legal en solo unos minutos con nuestro código de aviso de cookies fácil de implementar para Carrd.co."
date: 2023-05-30
categories: ["web-development"]
tags: ["carrd"]
---

import Button from "@components/widgets/Button.astro";
import { Picture } from "astro:assets";
import YouTubeEmbed from "@components/widgets/YouTubeEmbed.astro";
import imag1 from "@assets/images/23/05/carrd-embed.png";

Si tu sitio de Carrd usa Google Analytics, Facebook Pixel, vídeos de YouTube incrustados o cualquier otro script de terceros, necesitas un aviso de cookies. Las leyes de privacidad como el RGPD (UE) y la CCPA (California) exigen que los sitios web informen a los visitantes sobre el uso de cookies y, en muchos casos, obtengan su consentimiento antes de instalar cookies no esenciales.

Este tutorial te muestra cómo añadir un aviso de cookies sencillo y responsive a tu sitio de Carrd usando el elemento Embed. El código es gratuito, ligero y compatible con móviles.

## ¿Cuándo necesitas un aviso de cookies en Carrd?

Carrd en sí no instala cookies de rastreo. Pero si añades cualquiera de estos elementos a tu sitio, probablemente necesites un aviso de cookies:

- **Google Analytics** — instala las cookies de rastreo `_ga` y `_gid`
- **Facebook Pixel** — rastrea a los visitantes entre sitios para la segmentación de anuncios
- **Vídeos de YouTube incrustados** — YouTube instala cookies cuando se cargan los vídeos
- **Widgets sociales incrustados** — las incrustaciones de Twitter e Instagram pueden instalar cookies de rastreo
- **Herramientas de formularios de terceros** — las incrustaciones de Typeform o Stripe pueden instalar cookies

Si tu sitio de Carrd es contenido puramente estático sin scripts de terceros, probablemente no necesites un aviso de cookies. Pero si no estás seguro, añadir uno es la opción más segura.

<Button link="https://carrdme.com/" text="Plugins y Temas para Carrd" />

## Qué necesitas

- Plan **Carrd Pro Standard** (19 $/año) o superior — el elemento Embed no está disponible en los planes Free ni Pro Lite
- Unos minutos para pegar el código y personalizarlo

Carrd Pro Standard desbloquea incrustaciones de código personalizado, dominios personalizados, formularios e integración con Google Analytics. Por 19 $/año (unos 1,58 $/mes), es el plan que la mayoría de usuarios de Carrd necesitan.

## Tutorial en vídeo

<YouTubeEmbed
  url="https://www.youtube.com/embed/u3F19tG0hnE"
  label="Cómo Añadir un Aviso de Cookies a Carrd.co"
/>

## Código del aviso de cookies para Carrd

Aquí está el código completo. Cópialo tal cual y luego personaliza los colores, el texto y la duración de la cookie para que coincida con tu sitio.

```html
<div id="cookie-notice">
  <p>This website uses cookies to ensure you get the best experience. By continuing to browse, you agree to our use of cookies.</p>
  <button id="cookie-accept" onclick="acceptCookie()">Got it!</button>
  <button id="cookie-reject" onclick="rejectCookie()">No thanks</button>
</div>

<style>
  #cookie-notice {
    font-family: inherit;
    color: #fff;
    background: #596cd5;
    padding: 20px;
    position: fixed;
    bottom: 10px;
    left: 10px;
    max-width: 320px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    margin: 0;
    display: none;
    z-index: 1000000;
    box-sizing: border-box;
  }
  #cookie-notice p {
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 1.5;
  }
  #cookie-notice button {
    font-family: inherit;
    color: #fff;
    border: 0;
    padding: 10px 16px;
    margin-right: 8px;
    margin-top: 4px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
  }
  #cookie-accept {
    background: #3842c7;
  }
  #cookie-reject {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.4) !important;
  }
  @media only screen and (max-width: 600px) {
    #cookie-notice {
      max-width: 100%;
      bottom: 0;
      left: 0;
      border-radius: 0;
    }
  }
</style>

<script>
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + days * 86400000);
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }
  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i].trim();
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length);
    }
    return null;
  }
  function acceptCookie() {
    setCookie("cookie_consent", "accepted", 365);
    document.getElementById("cookie-notice").style.display = "none";
  }
  function rejectCookie() {
    setCookie("cookie_consent", "rejected", 365);
    document.getElementById("cookie-notice").style.display = "none";
  }
  if (!getCookie("cookie_consent")) {
    document.getElementById("cookie-notice").style.display = "block";
  }
</script>
```

### Qué hace este código

El aviso aparece como un banner fijo en la esquina inferior izquierda. En móviles (menos de 600 px), se extiende a todo el ancho en la parte inferior de la pantalla. Tiene dos botones:

- **Got it!** — instala una cookie llamada `cookie_consent` con el valor `accepted` que dura 365 días
- **No thanks** — instala la misma cookie con el valor `rejected`

Una vez que el usuario hace clic en cualquiera de los botones, el banner desaparece y no vuelve a mostrarse durante un año. El aviso usa `display: none` por defecto, así que solo aparece para los visitantes que aún no han elegido una opción.

### Opciones de personalización

- **Color de fondo** — cambia `#596cd5` por el color de tu marca
- **Color del botón** — cambia `#3842c7` para el botón de aceptar
- **Duración de la cookie** — cambia `365` en las llamadas a `setCookie` (365 = 1 año, 30 = 1 mes)
- **Texto** — edita el contenido del `<p>` para que coincida con el tono de tu sitio
- **Posición** — cambia `bottom: 10px; left: 10px` para colocarlo en otro lugar (p. ej., `bottom: 0; left: 0; right: 0; max-width: none; border-radius: 0` para una barra de pie de página a todo el ancho; sin `max-width: none`, la caja sigue limitada a 320 px)

## Cómo añadir el aviso de cookies a Carrd

### Paso 1: Añade un elemento Embed

En el editor de Carrd, haz clic en **Add Element** y selecciona **Embed**. Pon el **Type** en **Code** y el **Style** en **Hidden**, con la ubicación establecida en **Body End**. Dale una etiqueta como "Cookie Notice" para poder identificarlo después.

El aviso flota sobre la página con `position: fixed`, así que no necesita un lugar en tu diseño. Body End también lo mantiene funcionando en sitios con varias Sections: una incrustación Inline vive dentro de una sola sección, y Carrd oculta esa sección (y tu aviso con ella) cada vez que un visitante cambia a otra.

<Picture formats={["webp"]} fallbackFormat="webp"
  src={imag1}
  alt="Configuración del elemento Embed de Carrd con Type establecido en Code"
/>

El elemento Embed requiere Carrd Pro Standard (19 $/año) o superior. No está disponible en los planes Free ni Pro Lite.

### Paso 2: Pega el código

En el campo **Code**, pega el bloque de código completo de arriba. Puedes personalizar los colores, el texto y la duración de la cookie antes de pegarlo, o editarlo después.

### Paso 3: Publica y prueba

Carrd no muestra una vista previa del código incrustado en el editor. Necesitas publicar el sitio para ver el aviso de cookies. Después de publicar:

1. Abre tu sitio en una ventana de incógnito/privada del navegador
2. Debería aparecer el aviso de cookies
3. Haz clic en "Got it!" o "No thanks" — el banner debería desaparecer
4. Recarga la página — el banner debería permanecer oculto
5. Borra tus cookies y recarga — el banner debería reaparecer

<Button link="https://try.carrd.co/bitdoze" text="Prueba Carrd Pro Gratis durante 7 Días" />

## Limitaciones de este enfoque

Esto es un aviso de cookies sencillo, no una plataforma de gestión del consentimiento (CMP) completa. Esto es lo que hace y lo que no hace:

**Lo que hace:**
- Informa a los visitantes de que tu sitio usa cookies
- Registra si aceptaron o rechazaron
- Oculta el banner después de que elijan una opción

**Lo que no hace:**
- Bloquear scripts de terceros antes del consentimiento (Google Analytics sigue cargándose)
- Ofrecer controles granulares por categoría de cookie
- Registrar el consentimiento para fines de auditoría
- Escanear automáticamente tu sitio en busca de cookies

Para la mayoría de los sitios de Carrd, un aviso sencillo es suficiente. Si ejecutas campañas publicitarias en la UE o procesas grandes cantidades de datos de usuarios, considera un CMP dedicado como Cookiebot, CookieYes o CookieScript — algunos tienen planes gratuitos.

### Cumplimiento estricto del RGPD

Bajo una interpretación estricta del RGPD, deberías bloquear las cookies no esenciales hasta que el usuario acepte. Esto es difícil de hacer en Carrd porque el elemento Embed carga los scripts inmediatamente. Si el cumplimiento estricto es importante para tu negocio, considera:

- Usar un CMP de terceros que gestione el bloqueo de scripts
- Cambiar a analítica sin cookies como [Plausible](https://plausible.io/) o Fathom (no necesitan consentimiento)
- Consultar a un profesional de privacidad para tu situación específica

## Tutoriales de Carrd relacionados

- [Cómo Añadir una Cabecera Fija a Carrd](/es/anadir-header-fijo-carrd/)
- [Cómo Añadir una Tabla de Precios a Carrd.co](/es/anadir-tabla-precios-carrd/)
- [Reseña de Carrd.co](/es/resena-carrd/)
- [Cómo Añadir un Desplegable de FAQs Tipo Acordeón a Carrd.co](/es/anadir-acordeon-faq-carrd/)
- [Cómo Añadir un Dominio Personalizado a Carrd](/es/anadir-dominio-carrd/)
- [Cómo Crear una Barra de Navegación Móvil Responsive en Carrd](/es/navbar-movil-carrd/)

<Button link="https://go.bitdoze.com/carrd" text="Consigue Carrd Pro Standard" />