Share

magento

You want your Magento website to reach the widest possible audience. Making your website more accessible can help visitors with different accessibility needs interact with your store more easily. Follow this guide to install the Barriano Accessibility Widget on your Magento website.

Step 1: Register Your Magento Website with Barriano

Register your Magento 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 Magento website is already registered, sign in to your Barriano dashboard, select the relevant website, and copy its existing installation script.

If you have difficulty accessing your account, use the password recovery option on the Barriano login page.

Note: Add a screenshot showing the Barriano dashboard, the installation script, and the Copy button.

Step 2: Add the Barriano Code to Magento

Sign in to your Magento administration dashboard.

From the left navigation menu, select Content.

Under the Design section, select Configuration.

magento-step01

On the Configuration page, locate the store view where you want to install the Barriano widget and click Edit.

Scroll down to the Other Settings section.

Expand the Footer settings and locate the Miscellaneous HTML field.

Paste your Barriano installation script into the Miscellaneous HTML field.

<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.

Footer settings, and the Barriano script pasted into the Miscellaneous HTML field.

Click Save Configuration in the top-right corner.

Step 3: Clear the Magento Cache

Return to the Magento dashboard.

From the left navigation menu, select System.

Under the Tools section, select Cache Management.

On the Cache Management page, click Flush Magento Cache in the top-right corner.

Clearing the cache ensures that the newly added Barriano installation script is loaded on your website.

magento-step03

Step 4: Preview and Customize Your Widget

Open your Magento website and confirm that the Barriano Accessibility Widget is displayed correctly.

Verify that:

  • The Barriano accessibility icon is visible.
  • The widget opens correctly.
  • The accessibility features work as expected.

To customize the widget, sign in to your Barriano dashboard, select your Magento website, and open the widget settings.

You can customize the following:

  • Color
  • Position
  • Icon
  • Size
  • Display preferences

Save your changes after completing the customization.

Step 5: Review Your Website’s Accessibility Setup

Review your Magento website to confirm that the Barriano Accessibility Widget is working correctly.

Check that:

  • The widget appears on all required pages.
  • The widget opens when selected.
  • The accessibility features work correctly.
  • The widget does not cover important store content.
  • The widget works on desktop, tablet, and mobile devices.
  • The widget appears correctly on the published Magento store.

You’re All Set!

The Barriano Accessibility Widget is now installed on your Magento website.

Your visitors can now personalize their browsing experience according to their accessibility needs, helping make your Magento store more inclusive and accessible to a wider audience.

You might be interested in this.