What you need
Access to a global layout or a field for custom scripts. The public website must allow JavaScript. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- Open the shared footer or page template of your CMS and back up the current version.
- Copy the complete embed code from your Accessonaut project.
- Paste it once before the closing body tag and publish the change.
- Clear caches and open several public subpages in a private window. Check a narrow mobile view too.
What the embed looks like
Use the ready-made code from your project. The example needs your real project ID and the publicly reachable service address.
<script src="https://accessonaut.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-language="en" defer></script>Match the design to your website
In your Accessonaut project, open “Reading-aid widget”. Five templates and a live preview help you with the design: colours, fonts, menu width, corners, shadows, an icon or labelled opener and your own texts. Position and edge spacing can be set separately for desktop and smartphone. After saving, your existing embed code picks up the project design automatically; the public configuration is cached for up to one minute.
In the WordPress plugin you can choose local settings instead. These take priority over the project design. Design options are available on all plans. On the Free plan, the Accessonaut notice stays visible. Your visitors’ personal reading settings take priority over design defaults.
Keep in mind
Put your own changes in a child theme or a designated extension so that updates keep them. A Content Security Policy header can block external scripts and connections; allow your service origin specifically.
Common questions about HTML / custom CMS
Does the script belong in the head or before the closing body tag?
Both work. With defer, the browser runs the script only after parsing the page, before the DOMContentLoaded event. So keep the embed code unchanged, including defer.
What applies with several domains or subdomains?
The widget only loads your project configuration on the domain in the project. The www prefix does not matter, but shop.example.com counts as a separate domain. Create a separate project for it. The browser stores reading settings per domain; they do not move between domains.
What does my Content Security Policy need to allow?
Your service address in script-src for widget.js and in connect-src for the configuration request. The widget also inserts style elements and does not support a nonce for them. So style-src must allow 'unsafe-inline'. Test changes first with the Content-Security-Policy-Report-Only header.
Can I test on a staging environment?
Yes, the widget appears there. Without a matching domain, though, it shows the default design and the Accessonaut notice. The installation check in the dashboard also only reacts to the domain in the project.
If something does not work
No button appears.
Cause: The script does not load: wrong address, a typo in the code, a CSP rule or a blocker.
Fix: Open the browser console and the Network tab. Check whether widget.js loads with status 200, and read any CSP error messages.
The button appears, but with the default design and the Accessonaut notice despite a paid plan.
Cause: The configuration was not loaded. Usually the domain does not match the project, or the project ID is wrong.
Fix: Compare the domain and data-project-id with your project. In the Network tab, the request to /api/widget/config must succeed.
You want to remove the widget.
Cause: The script is in the shared template.
Fix: Delete the embed code, publish and clear the caches. Saved reading settings stay in your visitors’ browsers but no longer have any effect without the widget.
Check the installation
- Open the public website in a private window. The widget appears exactly once.
- Reach the button with the keyboard. Open the panel, change the text size and close it again.
- Check the homepage, a subpage, a form and the mobile view. The widget must not cover any important controls.
- In the Network tab, check that widget.js and the project configuration load from your service address. If there are errors, check the domain, project ID and CSP.
- For Free projects, the visible Accessonaut notice remains part of the widget. Permissions come from your project.
Privacy and limits
When it loads, the visitor’s browser fetches the script and the project configuration from the Accessonaut service. This involves the IP address, browser request data and the website hostname. Display preferences are stored locally in the browser. Cover the integration in your privacy notice and check your specific configuration.
The reading aids do not guarantee conformance. Also check barriers in the source code and complete user journeys, both automatically and manually.