What you need
A Squarespace plan with JavaScript and global code injection. Availability depends on your plan. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- In your website settings, open Code Injection.
- Paste the Accessonaut embed code into the global Footer field.
- Save the change and open the public website outside the editor.
- Check several subpages, mobile views and page changes. Remove an older duplicate embed if there is one.
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
A single code block does not automatically cover the whole website. Protected areas and checkout pages can restrict code injection. Check what is actually covered.
Common questions about Squarespace
Which plans include code injection?
According to Squarespace, code injection is part of the Core, Plus and Advanced plans and some legacy plans such as Business. If you cannot find it, check your plan.
Where do I find code injection in version 7.0 and 7.1?
In version 7.1, open the Pages panel and, at the bottom, Custom Code → Code Injection. In version 7.0, it is under Website Tools. The Footer field is output on every page before the closing body tag.
Does the widget appear in checkout?
No. Squarespace does not allow custom code on checkout pages. Only the order confirmation and order status pages have their own fields. So check your checkout separately with the keyboard.
What does Ajax loading have to do with the widget?
Some version 7.0 templates, such as Brine, Farro, Tremont or York, load pages via Ajax. Squarespace points out that this can conflict with custom code. Version 7.1 has no Ajax loading. If the widget behaves oddly on page changes, turn off “Enable Ajax loading” in Site Styles.
If something does not work
The widget is missing in the editor but present on the live site.
Cause: Scripts are disabled in the editor preview, for example with “Disable Scripts in Preview” or /safe in the editor address.
Fix: Choose “Enable Scripts in Preview”. Visitors are not affected.
The widget shows the default design with the Accessonaut notice.
Cause: You are testing on the squarespace.com address instead of your own domain. There the widget does not load your project configuration.
Fix: Check the site on the domain in your Accessonaut project.
You want to remove the widget.
Cause: The code stays active in the Footer field.
Fix: Delete it in Code Injection and save. Also remove code blocks containing the embed code on individual pages.
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.