Cookie-Hinweis zu deiner Carrd.co-Website hinzufügen – in Minuten

Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.

Wenn deine Carrd-Website Google Analytics, Facebook Pixel, eingebettete YouTube-Videos oder andere Drittanbieter-Scripts nutzt, brauchst du einen Cookie-Hinweis. Datenschutzgesetze wie DSGVO (EU) und CCPA (Kalifornien) verlangen, dass Websites Besucher über Cookie-Nutzung informieren und in vielen Fällen Einwilligung einholen, bevor nicht-essenzielle Cookies gesetzt werden.

Dieses Tutorial zeigt dir, wie du mit dem Embed-Element einen einfachen, responsiven Cookie-Hinweis zu deiner Carrd-Website hinzufügst. Der Code ist kostenlos, leichtgewichtig und mobilfreundlich.

Wann brauchst du einen Cookie-Hinweis auf Carrd?

Carrd selbst setzt keine Tracking-Cookies. Aber wenn du eines davon zu deiner Website hinzufügst, brauchst du wahrscheinlich einen Cookie-Hinweis:

• Google Analytics – setzt _ga-, _gid-Tracking-Cookies
• Facebook Pixel – trackt Besucher über Websites hinweg für Ad-Targeting
• Eingebettete YouTube-Videos – YouTube setzt Cookies, wenn Videos laden
• Eingebettete Social-Widgets – Twitter-, Instagram-Embeds können Tracking-Cookies setzen
• Drittanbieter-Formular-Tools – Typeform-, Stripe-Embeds können Cookies setzen

Wenn deine Carrd-Website rein statischen Inhalt ohne Drittanbieter-Scripts hat, brauchst du wahrscheinlich keinen Cookie-Hinweis. Aber wenn du unsicher bist, ist es die sicherere Wahl, einen hinzuzufügen.

Was du brauchst

• Carrd Pro Standard-Plan (19 $/Jahr) oder höher – das Embed-Element ist auf Free- oder Pro-Lite-Plänen nicht verfügbar
• Ein paar Minuten zum Einfügen und Anpassen des Codes

Carrd Pro Standard schaltet Custom-Code-Embeds, eigene Domains, Formulare und Google-Analytics-Integration frei. Für 19 $/Jahr (etwa 1,58 $/Monat) ist es der Plan, den die meisten Carrd-Nutzer brauchen.

Video-Walkthrough

Cookie-Hinweis-Code für Carrd

Hier ist der komplette Code. Kopiere ihn so wie er ist und passe dann Farben, Text und Cookie-Dauer an deine Website an.

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

Was dieser Code macht

Der Hinweis erscheint als fixiertes Banner in der unteren linken Ecke. Auf Mobile (unter 600 px) streckt es sich über die volle Breite am unteren Bildschirmrand. Es hat zwei Buttons:

• Got it! – setzt ein Cookie namens cookie_consent mit dem Wert accepted, das 365 Tage hält
• No thanks – setzt dasselbe Cookie mit dem Wert rejected

Sobald der Nutzer einen der Buttons klickt, verschwindet das Banner und taucht ein Jahr lang nicht wieder auf. Der Hinweis nutzt standardmäßig display: none, erscheint also nur bei Besuchern, die noch keine Wahl getroffen haben.

Anpassungsoptionen

• Hintergrundfarbe – ändere #596cd5 zu deiner Markenfarbe
• Button-Farbe – ändere #3842c7 für den Accept-Button
• Cookie-Dauer – ändere 365 in den setCookie-Aufrufen (365 = 1 Jahr, 30 = 1 Monat)
• Text – bearbeite den <p>-Inhalt passend zum Ton deiner Website
• Position – ändere bottom: 10px; left: 10px, um es anderswo zu platzieren (z. B. bottom: 0; left: 0; right: 0; max-width: none; border-radius: 0 für eine Footer-Leiste über die volle Breite; ohne max-width: none bleibt die Box auf 320 px gedeckelt)

So fügst du den Cookie-Hinweis zu Carrd hinzu

Schritt 1: Ein Embed-Element hinzufügen

Klicke im Carrd-Editor auf Add Element und wähle Embed. Setze den Type auf Code und den Style auf Hidden, mit der Location auf Body End. Gib ihm ein Label wie „Cookie Notice”, damit du es später wiedererkennst.

Der Hinweis schwebt mit position: fixed über der Seite, er braucht also keinen Platz in deinem Layout. Body End hält ihn außerdem auf Websites mit mehreren Sections funktionsfähig: Ein Inline-Embed lebt innerhalb einer Section, und Carrd versteckt diese Section (und deinen Hinweis mit ihr), sobald ein Besucher zu einer anderen wechselt.

Das Embed-Element erfordert Carrd Pro Standard (19 $/Jahr) oder höher. Es ist auf Free- oder Pro-Lite-Plänen nicht verfügbar.

Schritt 2: Den Code einfügen

Füge im Code-Feld den kompletten Code-Block von oben ein. Du kannst Farben, Text und Cookie-Dauer vor dem Einfügen anpassen oder danach bearbeiten.

Schritt 3: Veröffentlichen und testen

Carrd zeigt Embed-Code nicht im Editor als Vorschau. Du musst die Website veröffentlichen, um den Cookie-Hinweis zu sehen. Nach dem Veröffentlichen:

1. Öffne deine Website in einem Inkognito-/privaten Browser-Fenster
2. Der Cookie-Hinweis sollte erscheinen
3. Klicke „Got it!” oder „No thanks” – das Banner sollte verschwinden
4. Aktualisiere die Seite – das Banner sollte verborgen bleiben
5. Lösche deine Cookies und aktualisiere – das Banner sollte wieder erscheinen

Grenzen dieses Ansatzes

Das ist ein einfacher Cookie-Hinweis, keine vollwertige Consent-Management-Plattform (CMP). Hier ist, was er tut und was nicht:

Was er tut:

• Informiert Besucher, dass deine Website Cookies nutzt
• Zeichnet auf, ob sie akzeptiert oder abgelehnt haben
• Versteckt das Banner, nachdem sie eine Wahl getroffen haben

Was er nicht tut:

• Drittanbieter-Scripts vor Einwilligung blockieren (Google Analytics lädt trotzdem)
• Granulare Cookie-Kategorie-Steuerung bieten
• Einwilligungs-Records für Audit-Zwecke protokollieren
• Deine Website automatisch nach Cookies scannen

Für die meisten Carrd-Websites reicht ein einfacher Hinweis. Wenn du Werbekampagnen in der EU fährst oder große Mengen Nutzerdaten verarbeitest, erwäge eine dedizierte CMP wie Cookiebot, CookieYes oder CookieScript – manche haben kostenlose Tiers.

Strikte DSGVO-Compliance

Unter strenger DSGVO-Auslegung solltest du nicht-essenzielle Cookies blockieren, bis der Nutzer akzeptiert. Das ist auf Carrd schwierig, weil das Embed-Element Scripts sofort lädt. Wenn strikte Compliance für dein Geschäft zählt, erwäge:

• Eine Drittanbieter-CMP, die Script-Blocking übernimmt
• Wechsel zu cookielosem Analytics wie Plausible oder Fathom (keine Einwilligung nötig)
• Beratung durch einen Datenschutz-Profi für deine spezifische Situation

Verwandte Carrd-Tutorials

• Einen Sticky Header zu Carrd hinzufügen
• Eine Preistabelle zu Carrd hinzufügen
• Carrd.co Review
• Akkordeon-FAQs zu Carrd hinzufügen
• Eine eigene Domain zu Carrd hinzufügen
• Responsive Carrd-Mobile-Navbar