What you need
A Ghost account with administrator rights. Your theme must output Ghost’s code injection area in the footer. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- In Ghost Admin, open Settings → Advanced → Code Injection.
- Paste the unchanged embed code into the Site Footer area. Ghost outputs this code before the closing body tag.
- Save the change. Code injection in the settings of a single post only applies to that post.
- Open the public website in a private window. Check the homepage, posts, pages and the mobile view.
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
Custom themes must output {{ghost_foot}} in default.hbs directly before the closing body tag, otherwise the code is missing. The widget does not reach newsletter e-mails. Remove older embeds from the theme so that no duplicate script appears.
Common questions about Ghost
Is the code kept when I switch or update themes?
Yes, if it is in code injection. According to Ghost, you can change themes without losing these snippets. Updating an official theme, on the other hand, overwrites changes to the theme files. So do not put the embed code directly into the theme.
Site Header or Site Footer?
Use Site Footer. Ghost recommends this area for JavaScript. Site Header ends up in the page’s head. The code injection fields of individual posts only apply to that post.
What does the widget show on my ghost.io address?
The widget only loads your project configuration on the domain in the project. On any other address, it appears with the default design and the Accessonaut notice. Enter your own domain in the project and test there.
Does the widget work with the members area?
Ghost Portal for sign-in and sign-up opens as an overlay on top of the current page. Check signing in, signing up and account pages with the keyboard, including with the widget panel open.
Can I customise my own theme on Ghost(Pro) Starter?
No. According to Ghost, you can only use official themes on the Starter plan. An embed via your own theme files is therefore not an option there. Check whether code injection is available on your plan.
If something does not work
The code is in Site Footer, but the widget is missing.
Cause: Your theme does not output {{ghost_foot}}.
Fix: Add {{ghost_foot}} to default.hbs directly before the closing body tag and upload the theme again.
The widget only appears in one post.
Cause: The code is in that post’s code injection instead of the global settings.
Fix: Move it to Settings → Advanced → Code Injection → Site Footer and delete the entry in the post.
You want to remove the widget.
Cause: The code stays active in Site Footer.
Fix: Delete it there, save, and remove leftovers from posts and theme files.
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.