What you need
HubSpot-hosted content on a connected domain and the Website settings permission. According to HubSpot, the editing options for footer HTML depend on your subscription and content type. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- In your HubSpot account, click the settings icon (gear) and open Content → Pages in the left sidebar.
- Choose the domain of your website from the dropdown. The default settings for all domains apply to all HubSpot-hosted content.
- In the Site footer HTML section, click Override default settings if you are editing a single domain. Paste the unchanged embed code once and click Save.
- Open website pages, landing pages and blog posts of the domain in a private window. The widget appears exactly once.
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
Once you override them, the code from the default settings no longer applies to this domain. Copy any existing snippets over if needed. Footer HTML for all domains also appears on quotes. Custom templates must output {{ standard_footer_includes }} directly before the closing body tag. Pages outside HubSpot need their own embed.
Common questions about HubSpot CMS
Does the HubSpot cookie banner block the widget?
Not automatically. HubSpot states that it cannot control cookies placed by third-party scripts. The widget sets no cookies and stores reading settings locally in the browser. Whether it should only load after consent is your decision, based on your privacy assessment.
What applies to multilingual content?
Drag-and-drop templates set the page language automatically. Coded templates need <html lang="{{ html_lang }}" {{ html_lang_dir }}>. With data-language="auto", the widget then follows the page language.
I run several domains in HubSpot.
You set footer HTML for all domains or per domain. If each domain has its own Accessonaut project, override the default settings per domain and add the matching embed code there. Then leave it out of the default settings for all domains.
Does the widget also appear on quotes?
Yes, if the code is in the default settings for all domains or in the settings of the quote domain. HubSpot also outputs this footer HTML on quotes. If you do not want that, add the code only for your website’s domains.
How do I remove the widget again?
Delete the embed code from the site footer HTML and save. Check the default settings and all domains with overridden settings.
If something does not work
The widget is missing in a custom template.
Cause: The template does not output {{ standard_footer_includes }}. HubSpot lists this variable among the required template variables.
Fix: Add it directly before the closing body tag.
Other snippets are missing after overriding.
Cause: For an overridden domain, the code from the default settings no longer applies.
Fix: Copy the snippets you need into that domain’s settings.
On another domain, the widget shows the default design with the Accessonaut notice.
Cause: The project configuration only applies to the domain in the Accessonaut project.
Fix: Create a separate project for each domain and add its embed code in that domain’s settings.
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.