What you need
Administrator rights and your own derived theme. For self-hosted shops, you need access to the file system and console. In Accessonaut, first create a project with your actual website domain and open the installation page in the project.
Step by step
- Create your own theme, for example with
bin/console theme:create. Install and activate it under Extensions → My extensions and assign it to the sales channel. - In the theme, create the file
src/Resources/views/storefront/base.html.twig. In it, extend the template with{% sw_extends '@Storefront/storefront/base.html.twig' %}. - Override the
base_body_scriptblock. Output{{ parent() }}first and then add the unchanged embed code. The block sits directly before the closing body tag. - Clear the cache under Settings → System → Caches & indexes or with
bin/console cache:clear. - Check the homepage, a category, a product, the cart and checkout in a private window and in 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
Never change the default theme or files under vendor/. A theme duplicated in the admin does not replace a derived theme. The embed only applies in sales channels that use your theme. In Shopware SaaS, you upload a theme as a ZIP under My extensions; the console and cache module for self-hosted shops are not available there in the same way. Check embedded payment fields separately.
Common questions about Shopware 6
What applies with several sales channels or domains?
You assign the theme per sales channel on the Themes tab. So the embed only applies in channels with your theme. If channels use their own domains, each domain needs its own Accessonaut project. You then need one derived theme per channel with the matching embed code.
Does the widget need to be listed in Shopware’s cookie settings?
Shopware collects cookies from core, plugins and apps in its consent management. The widget sets no cookies and does not appear there by itself. It stores reading settings in the browser’s local storage. If it should only load after consent, you need your own customisation.
What if my theme is not applied?
For this, Shopware names bin/console theme:change followed by bin/console theme:compile. If changes still do not show, run bin/console cache:clear.
What do I need to do with a Content Security Policy?
Shopware defines default policies through the container parameter shopware.security.csp_templates. If you adjust them, allow your service address in script-src and connect-src. The widget inserts style elements without a nonce; style-src must allow inline styles.
If something does not work
The widget is missing in one sales channel.
Cause: A different theme is assigned to that channel.
Fix: Open the sales channel, select your theme on the Themes tab and clear the cache.
The template change has no effect.
Cause: The cache is still serving old pages.
Fix: Choose “Clear cache” under Settings → System → Caches & Indexes, or run bin/console cache:clear.
You want to remove the widget.
Cause: The base_body_script block in your theme keeps outputting the code.
Fix: Remove the embed code from the block, keep {{ parent() }} and clear the cache.
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.