What you need
Editing rights for the Project Settings of your Framer project. Check whether custom code is available on your Framer 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 Framer project, open the Project Settings and then Custom Code.
- Choose Add Script or the plus icon and give the entry a clear name, for example Accessonaut.
- Paste the unchanged embed code and choose the end of the body tag as the position. Do not restrict the pages, so that the script loads everywhere.
- Choose to run it once (Once) so that page changes do not run the script again. Then publish the website.
- Test the published domain. Framer does not load custom code in the canvas preview. Check page changes for duplicate buttons.
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
Older guides place this area under Site Settings; the labels can change with the Framer interface. Custom code in the Page Settings only applies to that page. The widget does not adapt embedded content in third-party frames.
Common questions about Framer
Once or Run on every page visit?
With Once, Framer runs the code a single time. With Run on every page visit, it runs again on every page visit. Choose Once. If the script does run again, the widget does not create a second instance when it is already on the page. It does load again for nothing, though.
Does the widget work on the staging version?
According to Framer, staging is only available with a connected custom domain and from the Pro plan. On the framer.app address and any domain other than the one in the project, the widget does not load your project configuration. It then shows the default design with the Accessonaut notice.
Does it work with Framer Localization?
Framer switches the lang attribute automatically to the selected locale. With data-language="auto", the widget follows this attribute when it loads. It speaks German, English and Spanish.
Can I load the widget on certain pages only?
Yes. Custom code in Page Settings only applies to that page. But people who need a reading aid usually need it on every page. So it is better to load the widget everywhere. Then do not add an extra page-level entry, or the script loads twice.
How do I remove the widget again?
Delete the entry in Project Settings under Custom Code and publish the site again. Then check the live domain.
If something does not work
The widget is missing on the canvas.
Cause: Framer does not load custom code in the canvas preview.
Fix: Check the widget on the published site.
The widget is missing on some pages.
Cause: The entry is limited to certain pages, or it is in the Page Settings of a single page.
Fix: Create the entry in Project Settings for all pages and delete page-level entries.
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.