Opening the Pluro Accessibility Toolbar via a Custom Button (Instead of the Floating Icon)

  • howto

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 typeof check 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).