TYPO3 is a powerful content management system used to build and manage websites. You can install the Barriano Accessibility Widget by adding the Barriano installation script to your TYPO3 website configuration. Depending on your TYPO3 version, the installation process may vary slightly.
Current TYPO3 versions provide a Sites → TypoScript module, while older versions may manage TypoScript through template records.
Step 1: Register Your TYPO3 Website with Barriano
Register your TYPO3 website with Barriano and complete the website registration process.
After registration, Barriano will generate a unique installation script for your website. Copy the script to your clipboard or save it as a text file.
Your installation script will look similar to the following:
<script
src="https://widget.barriano.com/ada-widget.embed.min.js?YOUR_UNIQUE_KEY"
async>
</script>Replace YOUR_UNIQUE_KEY with the unique key generated for your website.
If your TYPO3 website has already been registered, sign in to your Barriano dashboard, select the relevant website, and copy its existing installation script.
Note: Add a screenshot showing the Barriano dashboard, the installation script, and the Copy button.
Step 2: Open TYPO3 TypoScript
Sign in to your TYPO3 backend.
Open Sites and select TypoScript.
Depending on your TYPO3 version and project configuration, TypoScript may be managed differently. TYPO3 versions prior to v13 may use TypoScript template records associated with the website template.
Note: Add a screenshot showing Sites → TypoScript highlighted in the TYPO3 backend.
Step 3: Add the Barriano Script
Open the TypoScript configuration used by your website.
Add the Barriano installation script to your site’s frontend configuration so it loads on every page.
Paste your Barriano installation script as shown below:
<script
src="https://widget.barriano.com/ada-widget.embed.min.js?YOUR_UNIQUE_KEY"
async>
</script>Do not modify the script URL or remove the unique website key.
If your TYPO3 project is maintained through a custom site package, your developer may need to add the script to the site’s template or TypoScript configuration instead of editing it directly in the backend.
Note: Add a screenshot showing the TypoScript editor with the Barriano installation script.
Step 4: Save Your Changes
Save the updated TYPO3 configuration.
Confirm that the Barriano installation script has been added to the configuration used by your active website.
Note: Add a screenshot highlighting the Save button.
Step 5: Clear the TYPO3 Cache
After saving your changes, clear the TYPO3 frontend cache.
In the TYPO3 backend toolbar, click the lightning/cache icon and select Flush frontend caches.
Clearing the cache ensures that the latest configuration changes are loaded on your website.
Note: Add a screenshot showing the cache menu with Flush frontend caches highlighted.
Step 6: Preview Your Website
Open your TYPO3 website in a new browser tab and verify that the Barriano Accessibility Widget has been installed successfully.
Confirm that:
- The Barriano accessibility icon is visible.
- The widget opens correctly.
- The accessibility features work as expected.
- The widget appears on all required pages.
- The widget works properly on desktop and mobile devices.
Note: Add a screenshot showing the Barriano Accessibility Widget on the live TYPO3 website.
Step 7: Customize Your Widget
Sign in to your Barriano dashboard and select your TYPO3 website.
Open the widget settings to customize the appearance and behavior of the Barriano Accessibility Widget.
You can customize the following:
- Color
- Position
- Icon
- Size
- Display preferences
Save your changes after completing the customization.
Note: Add a screenshot showing the widget customization settings in the Barriano dashboard.
You’re All Set!
The Barriano Accessibility Widget is now installed on your TYPO3 website.
Your visitors can now personalize their browsing experience according to their accessibility needs, helping make your TYPO3 website more inclusive and accessible to a wider audience.
