ClarusPlus einrichten.

Abschnitt 1

Quick Start

In drei Minuten lebendiges Accessibility-Widget auf Ihrer Seite. Sie brauchen nur Zugang zum HTML-Code Ihrer Seite und Ihren Lizenz-Schlüssel.

  1. 1

    Lizenz-Schlüssel kopieren

    Im Admin-Dashboard unter Einstellungen → API & Lizenz finden Sie Ihren persönlichen Schlüssel (Format: UUID, z. B. 3a39…).
  2. 2

    Snippet einfügen

    Kopieren Sie das folgende Snippet in den <head> Ihrer Seite — oder in den Footer, kurz vor </body>:
    <script
  src="https://cdn.clarusplus.com/widget.js"
  data-license="IHR_LIZENZ_SCHLÜSSEL"
  data-position="bottom-right"
  defer
></script>
  3. 3

    Seite öffnen & testen

    Laden Sie Ihre Seite neu. Der Widget-Button erscheint unten rechts. Klick öffnet das Toolset mit 22+ Anpassungs-Optionen.

Abschnitt 2

Installation in Ihrem Stack

Das Widget ist ein einzelnes Script-Tag — es funktioniert überall, wo Sie HTML einbinden können. Hier die häufigsten Wege:

WordPress

Plugin wie Insert Headers and Footers oder WPCode installieren, dann das Snippet in den Header-Bereich einfügen. Alternativ direkt in header.php des Child-Themes.

Shopify

Im Theme-Editor unter Edit Code → theme.liquid das Snippet vor </head> einfügen. Funktioniert auf allen Storefronts.

Webflow / Framer

Site-Settings öffnen → Custom Code → Head Code → Snippet einfügen → Publishen. Das war's.

Next.js / React

Im Root-Layout via next/script:

import Script from "next/script";

<Script
  src="https://cdn.clarusplus.com/widget.js"
  strategy="afterInteractive"
  data-license="IHR_LIZENZ_SCHLÜSSEL"
  data-position="bottom-right"
/>

Google Tag Manager

Neuer Tag → Custom HTML → Snippet einfügen → Trigger auf All Pages. Veröffentlichen. Vorteil: Sie können später ohne Dev-Hilfe Änderungen ausspielen.

Abschnitt 3

Konfigurations-Optionen

Alle Optionen werden als data-*-Attribute am Script-Tag gesetzt. Eine vollständige Übersicht:

  • data-licensePflicht

    Default: —

    Ihr Lizenz-Schlüssel aus dem Admin-UI. Ohne diesen Wert startet das Widget nicht.

  • data-positionOptional

    Default: bottom-right

    Position des Widget-Buttons. Mögliche Werte: bottom-right, bottom-left, top-right, top-left.

  • data-primary-colorOptional

    Default: #007bff

    Hex-Farbe des Widget-Buttons und der Akzente. Sollte Ihre Brand-Farbe sein.

  • data-primary-text-colorOptional

    Default: #ffffff

    Hex-Farbe für Texte auf der Primary-Farbe. Muss mindestens 4,5:1 Kontrast haben.

  • data-languageOptional

    Default: auto

    Sprache des Widgets. „auto“ nutzt navigator.language. Werte: de, en, fr, es, it, nl, pl …

  • data-hide-buttonOptional

    Default: false

    Versteckt den eingebauten Widget-Button. Nützlich, wenn Sie eigene Trigger nutzen (siehe „Trigger-Buttons").

Abschnitt 4

Eigene Trigger-Buttons

Möchten Sie den Widget-Button verstecken und stattdessen über Ihre eigene Navigation öffnen? Setzen Sie an einem beliebigen Element das Attribut data-clarus-trigger:

<!-- 1. Widget-Button verstecken -->
<script
  src="https://cdn.clarusplus.com/widget.js"
  data-license="…"
  data-hide-button="true"
  defer
></script>

<!-- 2. Eigenen Trigger einbauen -->
<button type="button" data-clarus-trigger aria-label="Barrierefreiheit öffnen">
  ♿ Barrierefreiheit
</button>

Klicks auf das Element öffnen das Widget. Sie können beliebig viele Trigger auf einer Seite haben.

Abschnitt 5

Branding & Theme

Das Widget übernimmt Ihre Brand-Farben über die data-primary-color- und data-primary-text-color-Attribute.

Wichtig: Kontrast prüfen

Damit das Widget selbst barrierefrei bleibt, muss Ihre gewählte Primary-Color mindestens 4,5:1 Kontrast zur Text-Color haben. Tools wie WebAIM Contrast Checker helfen.

Whitelabel-Modus (Business-Tarif)

Wenn Sie das ClarusPlus-Branding komplett entfernen möchten, aktivieren Sie im Admin-UI unter Einstellungen → Whitelabel den Modus. Das Widget zeigt dann nur Ihre Brand.

Abschnitt 6

Troubleshooting

Widget erscheint nicht

  1. Lizenz-Schlüssel korrekt? Im Admin-UI prüfen.
  2. Wird die Domain in Ihrem Account-Bereich „Erlaubte Domains" geführt? Lokale Domains (localhost) ggf. freischalten.
  3. Browser-Konsole öffnen — wir loggen Fehler dort. Häufig:Invalid license key or domain.
  4. Script-Tag wird nicht vom Browser geladen? Ad-Blocker prüfen.

Widget verlangsamt die Seite

Das ClarusPlus-Widget ist unter 30 KB gzipped und lädt async. Es beeinflusst Lighthouse-Performance kaum. Wenn Sie eine Verlangsamung beobachten, schreiben Sie uns — wir prüfen das im Einzelfall.

Conflict mit anderem Widget

Wenn mehrere Accessibility-Widgets gleichzeitig laufen, kommen sich z-index und ARIA-Elemente in die Quere. Empfehlung: Nur ClarusPlus aktiv lassen.

Etwas unklar?

Unser Support antwortet werktags innerhalb eines Werktags — oft schneller. Schreiben Sie uns einfach.

Support kontaktieren