How to add the Elfsight Accessibility Widget

uSkinned Site Builder is built with accessibility in mind, ensuring that your website meets essential accessibility standards. However, staying ahead of the curve is important, and sometimes utilising a widget like the Elfsight Accessibility Widget can further enhance accessibility, offering additional features such as screen reader support, contrast adjustments, and more.

What is the Elfsight Accessibility Widget?

The Elfsight Accessibility Widget is a no-code tool designed to enhance your website's accessibility. It provides features like text resizing, contrast adjustments, keyboard navigation, and screen reader support, making your site more inclusive for users with disabilities.

This guide will walk you through the steps to add the Elfsight Accessibility Widget to your uSkinned Site Builder for Umbraco CMS website.

Step 1: Sign Up and Create the Widget

Visit the Elfsight Accessibility Widget page.
Click on "Create Widget" to start the customisation process.
In the editor, enter your website URL. Elfsight will now run the Google Lighthouse Accessibility test.
Customise the widget's appearance and settings, such as position, language, and features.
Once satisfied, click "Add to website for free" to generate the embed code.

Step 2: Copy Your Unique Widget Code

After publishing your widget, you’ll be redirected to your account dashboard and presented with the JavaScript embed code.
Copy the JavaScript embed code provided by Elfsight.
Keep this code handy as you’ll need it in the next step.

Step 3: Add the Widget Code to Your uSkinned Website

Log in to your uSkinned Site Builder website.
Navigate to Global > Content and Settings > Scripts.

Alternatively, you can add it to a single page, like we have done in this guide. See the bottom right side of the page to test out the widget.
Locate the Header closing scripts field.
Paste the copied Elfsight script into the field.
Click Save & Publish to apply the changes.