Styling der Datenschutzerklärung

Geändert am Mon, 19 Feb 2024 um 08:22 AM

Die Datenschutzerklärung kann mithilfe des JavaScript-Snippets in deine Webseite integriert werden und verwendet dabei ein vorgefertigtes Set an Styles, um eine ansprechende Darstellung direkt "out-of-the-box" auf den meisten Websites zu erzielen. Wir verstehen jedoch auch, dass einige Benutzer mehr Kontrolle über das Styling wünschen oder dass unsere vorausgewählten Standards möglicherweise nicht optimal passen.

Deshalb bietet PrivacyBee zwei Varianten an, wie du deine Datenschutzerklärung optisch an deine Webseite anpassen kannst.

Variante 1: Styling via CSS Klassen

Wir verwenden CSS Klassen für das Styling, welche lokal überschrieben werden können. Alle CSS Klassen haben einen entsprechenden Prefix "prx_" und sind statisch, sprich ändern sich nicht.

Beispiel: Anpassung vom h2 Titel Element

.prx_h2 {
  font-size: 1.8em !important;
  font-weight: bold !important;
  color: #0d419d !important;
}

Du kannst somit gezielt einzelne Styles überschreiben mit minimalem Aufwand.

Variante 2: Minimales Styling

Das Javascript Snippet kann um einen Parameter erweitert werden, damit das vordefinierte Styling minimiert wird.

<privacybee-widget 
  website-id="clssk6yau0001w13dydt56xu8" 
  type="dsg" 
  lang="de" 
  styling="minimal"
>
</privacybee-widget>

Wir beschränken uns dabei auf das absolute Minimum an Styling, das erforderlich ist, damit die Datenschutzerklärung benutzbar ist, zum Beispiel, um die Elemente aufklappen zu können. Ansonsten überlassen wir das Styling ganz dir.

Du kannst das entsprechende CSS unter https://www.privacybee.ch/widget-minimal.css anschauen.

Variante 3: Kein Styling

Falls dir das minimale Styling immer noch zu viel ist, kannst du entsprechend jegliches CSS abschalten.

<privacybee-widget 
  website-id="clssk6yau0001w13dydt56xu8" 
  type="dsg" 
  lang="de" 
  styling="no"
>
</privacybee-widget>

In dieser Konfiguration wird kein CSS automatisch geladen. Du bist selbst dafür verantwortlich, die Datenschutzerklärung entsprechend zu stylen, damit alle Elemente und Funktionen benutzbar sind. Du erstellst ein vollständig eigenes CSS und definierst alle Styles selbst. Als Ausgangspunkt kannst du das "widget-minimal.css" herunterladen, um sicherzustellen, dass du keine Elemente vergisst.

Wichtiger Hinweise

Variante 2 und 3 sind nur in der neuen DSG (bzw in der DSGVO) verfügbar. Damit du diese Variante verwendest musst du entsprechend ein "type" Property gesetzt haben. Im Cockpit wird dieser Parameter direkt eingebunden wenn du eine Variante auswählst.