What you need
Access to the source code and the shared layout or HTML entry point of your application. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- In the Next.js App Router, open the shared root layout. Import
Scriptfromnext/script. - Use
next/scriptwith the public widget.js address,data-project-idandstrategy="afterInteractive". The data attributes match your embed code. - Place the integration once in the shared layout. For React without Next.js, you can copy the normal embed code into the HTML document.
- Build and deploy the application. Check full page loads and client-side navigation for duplicate buttons or lost settings.
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.
import Script from 'next/script';
<Script
src="https://accessonaut.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-language="en"
strategy="afterInteractive"
/>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
Use the public Accessonaut service domain as the script source. Never pass API keys or environment variables containing secrets to the browser. CSP rules must allow the script and the configuration request.
Common questions about Next.js / React
Is the widget reloaded on client-side navigation?
No. According to Next.js, a <Script> in the root layout only loads once, even when visitors move between routes. The widget stays in the body, and active reading aids keep applying. The widget sets its language at startup. Visitors can change it in the panel.
Where do I add it in the Pages Router?
In pages/_app.js or pages/_app.tsx. Next.js recommends next/script there for scripts that should load on all routes. There, too, the script only loads once.
What does my Content Security Policy need to allow?
Your service address in script-src and connect-src, because the widget fetches its configuration with fetch. If you use nonces as in the Next.js CSP guide, pass the nonce to the <Script> as the nonce prop. The widget inserts its styles as style elements and does not support a nonce for them. So style-src must allow 'unsafe-inline'. If a nonce is listed there, the browser ignores 'unsafe-inline'.
And with React without Next.js, for example with Vite?
With Vite, the index.html in the project folder is the entry point of the application. Add the standard embed code there once, before the closing body tag. Do not add it to a component as well.
If something does not work
On the development server, the widget shows the default design with the Accessonaut notice.
Cause: On localhost or a preview domain, the widget does not load your project configuration. It only applies to the domain in the project.
Fix: Check design and plan features on the production domain.
The browser console reports a CSP violation.
Cause: The policy blocks the widget’s script, configuration request or styles.
Fix: Read the reported directive and add the service address to script-src or connect-src. For style-src, see the answer above.
You want to remove the widget.
Cause: The script sits in the shared layout.
Fix: Delete the <Script> from the layout, rebuild and deploy. Also remove CSP entries you only added for 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.