What you need
A Tag Manager container that is already installed on every page of your website, and permissions to edit and publish. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- Open your container and choose Tags → New. Click Tag Configuration and choose Custom HTML.
- Paste the unchanged embed code into the HTML field and give the tag a clear name, for example Accessonaut.
- Choose a trigger for all pages, for example “Initialization - All Pages”. Align the tag’s consent settings with your consent concept.
- Check that the tag fires using Preview in Tag Assistant. Then publish the container via Submit and Publish.
- Test the public website in a private window. In the developer tools, check that the script with
data-project-idappears exactly once on the page.
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
The widget only loads if Tag Manager loads and the tag fires. Ad and tracking blockers or missing consent then also prevent the reading aid. A direct embed in the template is therefore more robust. Tag Manager minifies inserted code; check the script it outputs. Remove additional embeds from the theme or CMS.
Common questions about Google Tag Manager
Which trigger is right?
“Initialization - All Pages” fires before all other triggers; only Consent Initialization comes earlier. A Page View trigger for all pages works too. Do not use Consent Initialization: Google intends it only for consent settings. The History Change trigger does not fit either, because it fires again on every page change in single-page applications.
Which tag firing option should I choose?
In Advanced Settings, under Tag firing options, choose “Once per page”. Google names this option for loading external JavaScript libraries. The widget does not create a second instance, but firing again loads the script for nothing.
How do I connect the tag to my consent management?
In the tag’s Consent Settings, under Additional Consent Checks, you can choose “Require additional consent for tag to fire”. The widget then only loads after consent. The widget sets no cookies and stores reading settings locally. Decide based on your privacy assessment.
Can I test on a staging environment first?
Yes. With Environments, you publish to a staging environment without changing Live. On a staging domain, though, the widget shows the default design with the Accessonaut notice, because the project configuration only applies to the domain in the project.
How do I remove or pause the widget?
Open the tag and choose Pause from the three-dot menu, or delete it. Either change only takes effect once you publish the container again.
If something does not work
The tag fires in preview, but the widget is missing on the live site.
Cause: The container has not been published yet.
Fix: Choose Submit and Publish, then check the website in a private window.
The browser console reports a CSP violation.
Cause: Your policy does not allow the script or the connection to the service address.
Fix: Add the service address to script-src and connect-src. According to Google, with a nonce in the container snippet, Tag Manager passes it on to the scripts it adds.
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.