Share

HTML Installation Guide

Welcome to the Barriano installation guide. Follow these simple steps to add the Barriano Accessibility Widget to your HTML website and make your digital content more accessible to everyone.

Step 1: Register Your Website to Get Started

Sign in to your Barriano account and register the website where you want to install the accessibility widget.

You can skip this step if your website has already been registered in the Barriano dashboard.

Step 2: Access Your Barriano Installation Code

After registering your website, Barriano will generate a unique installation script for your domain.

Copy and save this code. Your installation script will look similar to the following:

<script
  src="https://widget.barriano.com/ada-widget.embed.min.js?rlzqa4lo23t9nsv39whnx0amtvcw1unu"
  async>
</script>

Make sure you use the unique script provided for your website instead of the example key shown above.

You can access the code again at any time by signing in to your Barriano dashboard, selecting your website, and opening the installation or embed-code section.

Step 3: Open Your Website’s HTML Files

Locate the root folder containing your website files and open the HTML pages where you want the Barriano widget to appear.

Common HTML file names include:

index.html
about.html
services.html
contact.html

Open the files using a plain-text or code editor, such as:

  • Visual Studio Code
  • Notepad++
  • Sublime Text
  • WebStorm

To make the widget available throughout your website, add the Barriano script to every relevant HTML page.

If your website uses a shared header, template, or layout file, you may only need to add the script once to that shared file.

Step 4: Copy and Paste the Barriano Code

Open an HTML file and locate the opening <head> tag.

Paste the Barriano installation script immediately after the opening <head> tag.

<html lang="en">
<head>
  <script
    src="https://widget.barriano.com/ada-widget.embed.min.js?rlzqa4lo23t9nsv39whnx0amtvcw1unu"
    async>
  </script>

  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->
</body>
</html>

Do not paste the script inside the visible HTML body section. The script should be added inside the document’s <head> section.

Step 5: Save the HTML File

After adding the Barriano script, save the updated HTML file.

Use the following keyboard shortcuts:

  • Windows or Linux: Ctrl + S
  • macOS: Command + S

You can also select File → Save from your editor’s menu.

Step 6: Repeat the Steps and Preview Your Website

Repeat the installation process for the remaining HTML pages on your website.

After updating the required files, preview your website in a browser and confirm that:

  • The Barriano accessibility icon is visible.
  • The accessibility widget opens correctly.
  • The accessibility options work as expected.
  • The widget displays correctly on desktop and mobile devices.

Step 7: Upload Your Website to the Server

Upload the updated HTML files to your web server using your preferred publishing method, such as:

  • FTP or SFTP
  • Your hosting control panel
  • Git deployment
  • Your website’s existing deployment workflow

Once the updated files are published, open the live website and verify that the Barriano Accessibility Widget is active.

You’re All Set!

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

Your visitors can use the widget to personalize their browsing experience according to their accessibility needs, helping make your website more inclusive and accessible to a wider audience.

You might be interested in this.