UserWay Logo UserWay Logo Mobile

Download video transcription (157kb)

Get UserWay’s Accessibility Widget code for your Google Tag Manager website, free!

Quickly strengthen the accessibility of your website by installing UserWay’s Accessibility Widget, which works perfectly, out-of-the-box, on any website using Google Tag Manager.

Google Tag Manager Logo

UserWay’s Accessibility Widget immediately helps strengthen any weak points and accessibility hurdles on your any of your sites that use Google Tag Manager. UserWay works flawlessly on both purchased and premade templates as well as your own hand-crafted templates and designs.

Installing UserWay’s Accessibility Widget for your entire portfolio of sites is free, regardless of how many sites you manage or the number of pages each of your sites contains.

Enjoy an immediate accessibility boost and provide powerful site enhancements for your users while helping to fend off potential lawsuits and legal claims related to accessibility, ADA, Section 508 and other violations rooted in code that’s non-compliant with WCAG 2.1 AA requirements.

Take a look at the installation video below, which provides a step-by-step guide on how to set up UserWay’s Accessibility Widget on your website with Google Tag Manager in less than two minutes.

How to Install the UserWay’s Widget

The most important preparatory step is to visit userway.org and select “Start a free trial”! From there we move forward to the installation. 

Free trialStep 1: Sign Up 

You can sign up with Google or fill in your work email and website URL. The following step will appear on your screen by clicking on the ‘Next’ button. 

Sign up

Step 2: Choose the Plan

What works best for you? You can customize your free light widget. We call this user-triggered enhancement. You can also choose our robust AI-powered accessibility widget, the path to full ADA and WCAG compliance for your site, starting at $49/month.

With the full widget, you’ll fill in your payment details and click on the green button to “Pay Securely”.

 

Sign up

If you choose full ADA and WCAG compliant package, enter your payment details. Then click on ‘Next’ to step number three.

Add Payment details step in installation guide

 

Step 3: Get the Script

This little code snippet can easily be dropped into the back-end code on your site. We also call this code a script. You’ll see a small block of text that starts with angle brackets and the word “script”.

We’ve also just emailed this script to you. If you want to skip mentioned steps you can access the UserWay widget from the link: https://userway.org/get/.

Now you can click on ‘Copy.’ Go to Google Tag Manager and install the widget.  But first, configure the UserWay widget by clicking on ‘Configure.’

Script

In case you need assistance type in you can directly email your admin or agency.

Then you can proceed with configuring the UserWay widget by clicking on ‘Configure.’

Assistence

Step 4: Choose the Icon

This leads to step three which is the step where you choose the icon that you want to display. 

 

Choose the icon

Step 5: Select the Size

From here you move on to select the size. Disclaimer: Size will differ on the mobile devices and appear smaller, no matter the size you choose. 

Choose the size

Step 6: Pick the Color of Your Button

Next, you can pick the color of your button with this color picker. 

Choose the colour

Step 7: Select the Position of the Button

This is followed by selecting the position by clicking over the one you prefer. There are eight different positions. 

Choose the position

Step 8: Language Settings

Step seven deals with language. If you want the widget to automatically detect the language of your visitors, then you should leave this default option to auto-detect language. If you want to force the widget to display in a specific language, then select your preferred language. 

Choose the language

Step 9: Accessibility Statement

The next step is to set an accessibility statement leaving the “No”‘ option selected. Following the statement, you can add advanced custom options for this widget, choose the ‘I’d like to learn more’ option or more information.

Accessibility statement

Add the address of your site`s accessibility statement.

Add the address

Step 10: Access the Widget

You are all set! Then, switch over to Google Tag Manager site.

.

All set

You need to install Google Tag Manager on your website. Once you create a container you get the code that you need to paste on your site. Also, you can find this code if you click on “Your ID.” Now you need to create a “New Tag” for UserWay.

Therefore click on “Add a New Tag.” Name it and click on “Tag Configuration.” Scroll all the way down and select “Custom HTML.”

This is where you’re going to paste the code. There’s one more thing to do. Scroll down and in triggering select “All Pages” and click on “Save”. Congratulations you have your tag.

Preview the site before publishing. You will get a previewing workspace once you refresh your site. If everything seems ok go back to Google Tag Manager. First thing is to leave “Preview Mode”. Click on “Submit.” Here you have the option to track all your changes.

This gives you the option to name your version and give a small description. You can either do it or skip it and click on “Publish”.

Go back to your site and refresh it. You can see that once you refresh the site that “Preview Mode” is gone and the widget is here.

If you can see the widget on your site that means that you have installed it correctly. There’s also another way to verify the installation. Go back to userway.org and click on “Let’s Verify” to double-check the installation. Also, this is where you get your accessibility statement.

We’re sharing a template that you can customize and paste on your site.