Toolbar & Configuration
Opening the Pluro Accessibility Toolbar via a Custom Button (Instead of the Floating Icon)
Settings described here may depend on your current Pluro configuration. Confirm the effect of each change on the live website and on assistive technologies.
With Pluro, you can open the accessibility toolbar using a custom button or link that you place anywhere on your site — for example, in the main navigation, footer, an “Accessibility” page, or any other location.
This is especially useful if you want to replace the default floating icon and use a trigger that better fits your site’s design and UX.
Basic Example (JavaScript)
Add the following code to the click handler of your custom button or link:
if (typeof window.purpleLens !== 'undefined' && window.purpleLens.toggleToolbar) {
window.purpleLens.toggleToolbar(true);
}
The true parameter opens the accessibility toolbar.
Full Example with a Button (HTML + JS)
<button type="button" id="open-accessibility">
Accessibility
</button>
<script>
document.getElementById('open-accessibility')?.addEventListener('click', function () {
if (typeof window.purpleLens !== 'undefined' && window.purpleLens.toggleToolbar) {
window.purpleLens.toggleToolbar(true);
}
});
</script>
Important Notes
-
The code will work only after the Pluro script has loaded on the page.
-
It is recommended to keep the
typeofcheck as shown above to avoid JavaScript errors in case Pluro has not yet loaded or is not available. -
If you hide the floating icon, make sure there is a clear and accessible alternative button for opening the accessibility toolbar (as shown in the example above).