Um das Wawsome-Barrierefreiheits-Widget in eine beliebige Website einzubinden, fügen Sie eine Codezeile in den Kopfbereich jeder Seite ein. Die meisten Plattformen haben dafür eine Stelle, etwa ein Feld für eigenen Code oder eine gemeinsame Layout-Datei. Sie können den Code auch mit Google Tag Manager einbinden.
Bevor Sie starten
Holen Sie sich Ihren Code im Wawsome-Dashboard: Öffnen Sie Websites, wählen Sie Ihre Website, klicken Sie auf Install Widget und im Fenster Connect Widget auf Copy code. Er sieht so aus, mit Ihrem eigenen Schlüssel:
<script src="https://loader.wawsome.com" data-api-key="YOUR_API_KEY" defer></script>
Wohin der Code gehört
Der Code muss auf jeder Seite laden. Wählen Sie die Option, die zu Ihrer Website passt:
- Ihre Plattform hat eine Einstellung für eigenen Code. Suchen Sie nach Namen wie Custom code, Code einfügen, Head code oder Scripts. Gibt es ein Feld für den Kopfbereich, fügen Sie den Code dort ein.
- Sie bearbeiten das HTML selbst. Fügen Sie den Code innerhalb von
<head>in die Template- oder Layout-Datei ein, die alle Seiten nutzen. Auf einer statischen Website fügen Sie ihn in jede Seite ein. - Sie nutzen Google Tag Manager. Legen Sie ihn als Tag vom Typ Benutzerdefiniertes HTML mit dem Trigger All Pages an. Mehr dazu in unserer Anleitung für Google Tag Manager.
- Ihre Plattform nimmt nur JavaScript an. Nutzen Sie diese Version und ersetzen Sie YOUR_API_KEY durch Ihren Schlüssel:
(function () {
var s = document.createElement('script');
s.src = 'https://loader.wawsome.com';
s.setAttribute('data-api-key', 'YOUR_API_KEY');
s.defer = true;
document.body.appendChild(s);
})();
Schritt-für-Schritt-Anleitungen für beliebte Plattformen: WordPress, Shopify, Wix, Squarespace, Webflow, Joomla, Drupal, PrestaShop, Magento.
Prüfen, ob es funktioniert
Veröffentlichen oder speichern Sie Ihre Änderungen und leeren Sie jeden Cache. Öffnen Sie Ihre Website in einem privaten Fenster und suchen Sie den Wawsome-Button. Öffnen Sie ihn und testen Sie eine Einstellung.
Wenn das Widget nicht erscheint
- Cache. Leeren Sie den Cache Ihrer Website und eines CDN und laden Sie neu.
- Der Code wurde entfernt. Manche Editoren entfernen Script-Tags aus Inhaltsfeldern. Nutzen Sie stattdessen eine Code-Einstellung oder eine Template-Datei.
- Content Security Policy. Wenn Ihre Website eine CSP hat, erlauben Sie
https://*.wawsome.comin script-src und connect-src. - Falscher Schlüssel oder falsche Domain. Prüfen Sie, ob der Schlüssel zu der Website passt, die Sie im Dashboard angelegt haben.
Was das Widget behebt und was nicht
- Besucher passen Text, Farben, Abstände und Navigation an und nutzen Lesehilfen.
- KI ergänzt Alt-Texte für Bilder ohne Beschreibung. Sie können jeden Text bearbeiten.
- Manche Probleme müssen Sie im Code oder in den Inhalten beheben. Ein Scan findet sie, und unsere Experten testen Ihre Website auch von Hand.
Mehr dazu: Kostenlosen Scan starten · Barrierefreiheitsprüfung · Barrierefreiheits-Widget
FAQ
Wo genau füge ich den Code ein?
In den Kopfbereich jeder Seite, so wie es im Wawsome-Dashboard steht. Hat Ihre Plattform nur ein Feld für den Footer, funktioniert das auch.
Funktioniert es mit Headless-CMS und Single-Page-Apps?
Ja. Wawsome funktioniert mit Inhalten, die über APIs und moderne Frameworks geladen werden. Fügen Sie den Code in die zentrale HTML-Datei oder das Layout ein, das alle Routen nutzen.
Meine Plattform fehlt in der Liste. Kann ich Wawsome trotzdem nutzen?
Ja. Wenn Ihre Plattform eigenen Code auf jeder Seite erlaubt, können Sie Wawsome einbinden. Folgen Sie den Schritten oben oder schreiben Sie uns, wir helfen Ihnen.
Starten Sie mit Wawsome
Machen Sie Ihre Website für alle Besucher leichter nutzbar. Testen Sie Wawsome kostenlos oder buchen Sie eine Demo. Wir zeigen Ihnen, wie es funktioniert.