Das brauchst du
Ein Webflow-Tarif und Bearbeitungsrechte mit Zugriff auf Custom Code. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.
Schritt für Schritt
- Öffne Site settings → Custom code.
- Füge den Einbaucode in das globale Feld Footer code ein. Ein Code in den Einstellungen einer einzelnen Seite gilt nur für diese Seite.
- Speichere und veröffentliche die Website auf der Domain, die im Accessonaut-Projekt hinterlegt ist.
- Teste die veröffentlichte Website. Ein funktionierender Designer oder eine Vorschau bestätigt den öffentlichen Einbau noch nicht.
So sieht die Einbindung aus
Verwende den fertigen Code aus deinem Projekt. Das Beispiel benötigt deine echte Projekt-ID und die öffentlich erreichbare Service-Adresse.
<script src="https://accessonaut.com/widget.js"
data-project-id="DEINE_PROJEKT_ID"
data-language="de" defer></script>Das Design an deine Website anpassen
Öffne im Accessonaut-Projekt „Lesehilfen-Widget“. Fünf Vorlagen und eine Live-Vorschau helfen dir beim Gestalten: Farben, Schriften, Menübreite, Ecken, Schatten, Symbol oder beschrifteter Öffner sowie eigene Texte. Position und Randabstände lassen sich für Desktop und Smartphone abstimmen. Nach dem Speichern übernimmt dein vorhandener Einbaucode das Projektdesign automatisch; die öffentliche Konfiguration wird bis zu einer Minute zwischengespeichert.
Im WordPress-Plugin kannst du stattdessen lokale Einstellungen wählen. Diese haben Vorrang vor dem Projektdesign. Die Gestaltung ist in allen Tarifen verfügbar. Im Free-Tarif bleibt der Accessonaut-Hinweis sichtbar. Persönliche Leseeinstellungen deiner Besuchenden haben Vorrang vor Designvorgaben.
Darauf achten
Prüfe nach Änderungen am Site-Plan, nach Domainwechseln und nach Veröffentlichungen erneut den globalen Code. Eingebettete Inhalte in fremden Frames werden durch das Widget nicht umgebaut.
Häufige Fragen zu Webflow
Läuft der Code im Designer oder erst auf der veröffentlichten Website?
Laut Webflow wirkt Custom Code in der Vorschau und im Kommentarmodus, aber nicht in der erweiterten Canvas-Ansicht. Live geht er erst nach dem Veröffentlichen. Willst du das Widget aus der Vorschau heraushalten, umschließe es mit <!-- EXCLUDE FROM PREVIEW: START --> und <!-- EXCLUDE FROM PREVIEW: END -->.
Welcher Tarif ist nötig?
Custom Code können Site manager und Designer hinzufügen, wenn dein Workspace Core, Growth, Agency oder Freelancer ist oder die Website einen aktiven Site-Plan hat. Das Feld Footer code fasst bis zu 50.000 Zeichen; der Einbaucode braucht nur einen Bruchteil davon.
Was zeigt das Widget auf der webflow.io-Subdomain?
Du kannst nur auf die Staging-Subdomain veröffentlichen. Dort erscheint das Widget, lädt aber deine Projektkonfiguration nicht, weil die Domain nicht im Projekt steht. Du siehst dann das Standarddesign und den Accessonaut-Hinweis. Teste das endgültige Design auf deiner eigenen Domain.
Funktioniert das mit Webflow Localization?
Webflow setzt den Sprachcode der Seite automatisch je Locale. Mit data-language="auto" folgt das Widget diesem lang-Attribut, solange du im Projektdesign keine feste Sprache wählst. Es spricht Deutsch, Englisch und Spanisch.
Wenn etwas nicht klappt
Das Widget fehlt nach dem Speichern.
Ursache: Du hast den Code gespeichert, aber nicht veröffentlicht, oder nur auf die Staging-Subdomain veröffentlicht.
Lösung: Veröffentliche erneut und wähle dabei auch deine eigene Domain aus.
Das Widget fehlt nur auf einzelnen Seiten.
Ursache: Der Code steht im Feld Before </body> tag der Seiteneinstellungen statt in den Site settings. Dann gilt er nur für diese Seite.
Lösung: Verschiebe ihn in Site settings → Custom code → Footer code und lösche den Eintrag auf Seitenebene, damit kein doppeltes Script entsteht.
Du willst das Widget entfernen.
Ursache: Der globale Footer code bleibt aktiv, bis du die Website neu veröffentlichst.
Lösung: Lösche den Einbaucode im Footer code, speichere und veröffentliche auf allen Domains.
Einbau prüfen
- Öffne die öffentliche Website in einem privaten Fenster. Das Widget wird genau einmal angezeigt.
- Erreiche den Button mit der Tastatur. Öffne das Panel, ändere die Textgröße und schließe es wieder.
- Prüfe Startseite, Unterseite, Formular und mobile Ansicht. Das Widget darf keine wichtigen Bedienelemente verdecken.
- Prüfe im Netzwerk-Tab, dass widget.js und die Projektkonfiguration von deiner Service-Adresse geladen werden. Bei Fehlern kontrolliere Domain, Projekt-ID und CSP.
- Bei Free-Projekten bleibt der sichtbare Accessonaut-Hinweis Bestandteil des Widgets. Berechtigungen kommen aus deinem Projekt.
Datenschutz und Grenzen
Beim Laden ruft der Besucherbrowser das Script und die Projektkonfiguration vom Accessonaut-Dienst ab. Dabei fallen IP-Adresse, Browser-Anfragedaten und Website-Hostname an. Darstellungswünsche werden lokal im Browser gespeichert. Berücksichtige die Einbindung in deinen Datenschutzhinweisen und prüfe deine konkrete Konfiguration.
Die Lesehilfen erzeugen keine Konformitätsgarantie. Prüfe Barrieren im Quellcode und vollständige Nutzerabläufe zusätzlich automatisch und manuell.