How to Add an Accessibility Widget to Wix, WordPress, Webflow, and Shopify

An accessibility widget installs the same way on every platform: one <script> tag, near the closing </body>. The setup takes under five minutes once you know where each platform hides the field for custom code.

This guide covers Wix, WordPress, Webflow, and Shopify. The example uses AriaWAI, but the pattern works for any overlay widget vendor.

Get your script tag first

Sign in to AriaWAI and copy the install snippet from your dashboard. It looks like this:

<script
  src="https://cdn.ariawai.com/widget.js"
  data-site-key="aria_pk_your_site_key_here"
  defer
></script>

The data-site-key is unique to your domain and tells the widget which licence to verify. Keep it private but treat it as a public client-side identifier, not a server secret.

Wix

Wix calls custom scripts "Custom Code." You can find it in the dashboard.

1. Open your Wix site dashboard at manage.wix.com.
2. In the left sidebar, click Settings, then scroll to Advanced and click Custom Code.
3. Click + Add Custom Code in the top right.
4. Paste your AriaWAI script tag into the Paste the code snippet here field.
5. Set Add Code to Pages to All pages.
6. Set Place Code in to Body - end.
7. Give it a name like "AriaWAI accessibility widget" so you can find it later.
8. Click Apply.

The widget loads on every page within five minutes of saving. Wix caches aggressively, so if you do not see the floating button immediately, hard-refresh the page in an incognito window.

A note on Wix Studio

Wix Studio uses a slightly different code injection panel. Open Site Settings, then Custom Code, and follow the same steps. The fields are identical.

WordPress

Three approaches, ranked by how much you should trust them.

Approach 1: A code-snippets plugin (recommended)

Install WPCode or any reputable header-and-footer plugin. These plugins survive theme updates, which is the failure mode for the other approaches.

1. In WordPress admin, go to Plugins, Add New, and search for "WPCode."
2. Install and activate it.
3. Click the new Code Snippets menu in the sidebar.
4. Click Header & Footer at the top.
5. Paste your AriaWAI script tag into the Footer box. The footer renders just before </body>.
6. Click Save Changes.

Approach 2: Theme footer file

Only do this if your theme is a child theme that you control.

1. Go to Appearance, Theme File Editor.
2. Open footer.php in the right-hand file list.
3. Paste your script tag immediately above the line </body>.
4. Click Update File.

If your theme updates, this change disappears. Use approach 1 unless you know your theme is custom.

Approach 3: Block-based theme settings

Newer block themes offer a footer customisation in Appearance, Editor. The pattern there changes per theme. The plugin route is more reliable.

Webflow

Webflow has the cleanest custom code interface of the four platforms.

1. Open your project in Webflow.
2. Click the gear icon in the top left to open Project Settings.
3. Click the Custom Code tab at the top.
4. Scroll to Footer Code (the second of two boxes).
5. Paste your AriaWAI script tag.
6. Click Save Changes at the top.
7. Publish your site for the change to take effect on the live domain.

The Webflow editor preview will not run third-party scripts. You need to publish before the widget appears. Use Webflow's published staging URL or your custom domain to test.

Shopify

Shopify hides custom scripts inside the theme's theme.liquid file. Two approaches.

Approach 1: Edit theme.liquid directly

1. From your Shopify admin, go to Online Store, Themes.
2. On your active theme, click the three-dot menu and choose Edit code.
3. In the file tree on the left, open layout/theme.liquid.
4. Find the line </body> near the bottom of the file.
5. Paste your AriaWAI script tag immediately above </body>.
6. Click Save.

The widget appears across your storefront within a minute.

Approach 2: Theme app extension or content block

If you do not want to edit theme code, check whether your theme exposes a "scripts" or "custom HTML" content block in the theme customiser. Most modern Shopify themes do. The block accepts a script tag and applies it across all pages.

Verify the install worked

Open your live site in an incognito window and look in the bottom-right corner. The AriaWAI floating button appears there within a second of page load.

If it does not appear:

1. Open the browser dev tools, click Network, and filter for widget.js. You should see a 200 response.
2. Open Console and look for any errors mentioning AriaWAI or your site key.
3. Check that the data-site-key value matches the one in your AriaWAI dashboard exactly. A common mistake is copying with a trailing space.

If the network request shows a 403, the site key is registered to a different domain. Sign in to your dashboard and check the domain field on your site key.

A note on caching and CDNs

Sites behind aggressive caching, including Cloudflare and Wix's built-in CDN, may take up to fifteen minutes to serve the updated HTML to all visitors. Hard-refresh in incognito mode to bypass your local browser cache while testing.

What about Squarespace, Ghost, Framer, and others

The same pattern applies. Find the platform's "custom code" or "code injection" panel, choose the option that places code before the closing </body> tag, and paste the AriaWAI script there. If your platform does not offer this, contact us at support@ariawai.com and we will help.

Next steps

Once the widget is live, run a WCAG scan from your AriaWAI dashboard. The widget is a comfort layer. The scan tells you what to fix in the underlying markup, which is the only path to genuine accessibility. For a longer explanation of why both matter, read Do Accessibility Overlay Widgets Make Your Site WCAG Compliant?.