What you need
A Webflow plan and editing rights with access to custom code. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- Open Site settings → Custom code.
- Paste the embed code into the global Footer code field. Code in the settings of a single page only applies to that page.
- Save and publish the website on the domain stored in your Accessonaut project.
- Test the published website. A working Designer or preview does not yet confirm the public embed.
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
Check the global code again after changes to the site plan, after domain changes and after publishing. The widget does not restructure embedded content in third-party frames.
Common questions about Webflow
Does the code run in the Designer or only on the published site?
According to Webflow, custom code takes effect in preview and comment modes, but not in expand canvas view. It only goes live after publishing. If you want to keep the widget out of the preview, wrap it in <!-- EXCLUDE FROM PREVIEW: START --> and <!-- EXCLUDE FROM PREVIEW: END -->.
Which plan do I need?
Site managers and Designers can add custom code if your Workspace is Core, Growth, Agency or Freelancer, or if the site has an active Site plan. The Footer code field holds up to 50,000 characters; the embed code needs only a fraction of that.
What does the widget show on the webflow.io subdomain?
You can publish to the staging subdomain only. The widget appears there but does not load your project configuration, because the domain is not in the project. You then see the default design and the Accessonaut notice. Test the final design on your own domain.
Does it work with Webflow Localization?
Webflow sets the page’s language code automatically for each locale. With data-language="auto", the widget follows this lang attribute, as long as you do not choose a fixed language in the project design. It speaks German, English and Spanish.
If something does not work
The widget is missing after saving.
Cause: You saved the code but did not publish, or you only published to the staging subdomain.
Fix: Publish again and include your own domain.
The widget is missing on some pages only.
Cause: The code is in the Before </body> tag field of a page’s settings instead of Site settings. Then it only applies to that page.
Fix: Move it to Site settings → Custom code → Footer code and delete the page-level entry, so no duplicate script is loaded.
You want to remove the widget.
Cause: The global footer code stays active until you republish the site.
Fix: Delete the embed code from Footer code, save and publish to all domains.
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.