Das brauchst du
Bearbeitungsrechte für die Project Settings deines Framer-Projekts. Prüfe in deinem Framer-Tarif, ob Custom Code verfügbar ist. Lege in Accessonaut zuerst ein Projekt mit deiner tatsächlichen Website-Domain an und öffne im Projekt die Einbauseite.
Schritt für Schritt
- Öffne in deinem Framer-Projekt die Project Settings und dort den Bereich Custom Code.
- Wähle Add Script oder das Plus-Symbol und gib dem Eintrag einen eindeutigen Namen, etwa Accessonaut.
- Füge den unveränderten Einbaucode ein und wähle als Position das Ende des body-Tags. Schränke die Seiten nicht ein, damit das Script überall lädt.
- Wähle die einmalige Ausführung (Once), damit Seitenwechsel das Script nicht erneut ausführen. Veröffentliche danach die Website.
- Teste die veröffentlichte Domain. Framer lädt Custom Code nicht in der Canvas-Vorschau. Prüfe Seitenwechsel auf doppelte Buttons.
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
Ältere Anleitungen nennen den Bereich unter Site Settings; die Bezeichnungen können sich mit der Framer-Oberfläche ändern. Custom Code in den Page Settings gilt nur für die jeweilige Seite. Eingebettete Inhalte in fremden Frames passt das Widget nicht an.
Häufige Fragen zu Framer
Once oder Run on every page visit?
Mit Once führt Framer den Code einmal aus. Mit Run on every page visit läuft er bei jedem Seitenaufruf erneut. Wähle Once. Wird das Script doch erneut ausgeführt, legt das Widget kein zweites an, wenn es schon auf der Seite steht. Es lädt dann aber unnötig nach.
Funktioniert das Widget auf der Staging-Version?
Staging gibt es laut Framer nur mit verbundener eigener Domain und ab dem Pro-Tarif. Auf der framer.app-Adresse und anderen Domains als der im Projekt lädt das Widget deine Projektkonfiguration nicht. Es zeigt dann das Standarddesign mit Accessonaut-Hinweis.
Funktioniert das mit Framer Localization?
Framer stellt das lang-Attribut automatisch auf die gewählte Locale um. Mit data-language="auto" folgt das Widget diesem Attribut beim Laden. Es spricht Deutsch, Englisch und Spanisch.
Kann ich das Widget nur auf bestimmten Seiten laden?
Ja. Custom Code in den Page Settings gilt nur für die jeweilige Seite. Wer eine Lesehilfe braucht, braucht sie aber meist auf jeder Seite. Lade das Widget deshalb besser überall. Nutze dann keinen zusätzlichen Eintrag auf Seitenebene, sonst lädt das Script doppelt.
Wie entferne ich das Widget wieder?
Lösche den Eintrag in den Project Settings unter Custom Code und veröffentliche die Website erneut. Prüfe danach die Live-Domain.
Wenn etwas nicht klappt
Im Canvas fehlt das Widget.
Ursache: Framer lädt Custom Code nicht in der Canvas-Vorschau.
Lösung: Prüfe das Widget auf der veröffentlichten Website.
Das Widget fehlt auf einzelnen Seiten.
Ursache: Der Eintrag ist auf bestimmte Seiten eingeschränkt, oder er steht in den Page Settings einer einzelnen Seite.
Lösung: Lege den Eintrag in den Project Settings für alle Seiten an und lösche Einträge auf Seitenebene.
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.