Your snippet. Sign in to your client portal to copy the exact code for your domain. Every example below is illustrative — replace the snippet with the one from your portal so the widget knows which client you are.

Jump To

Before You Start

Grab your personalized snippet from the client portal. It looks like this:

<script src="https://ardoraccessibility.com/widget/ardor-a11y.min.js" data-ardor-client="YOUR-CLIENT-ID" data-ardor-api="https://ardoraccessibility.com" async defer></script>

The widget needs to load on every page, which is why we always add it to a global theme / header / layout file, not to a single page.

WordPress ~5 min

Easiest path: use a "code snippet" plugin so you don't have to edit theme files. Works on any theme, survives theme updates.

Option A — Code Snippets plugin (recommended)

  1. In your WP admin, go to Plugins → Add New and install "WPCode — Insert Headers and Footers" (or "Code Snippets" by the community team).
  2. Activate it, then open Code Snippets → + Add Snippet → Add Your Custom Code.
  3. Set Code Type to HTML Snippet and paste your snippet from the portal.
  4. Under Insertion choose Auto Insert and Site Wide Header.
  5. Toggle the snippet to Active and Save.

Option B — Edit theme header directly

  1. Go to Appearance → Theme File Editor.
  2. Select your active theme and open header.php.
  3. Paste your snippet just before the closing </head> tag.
  4. Click Update File.
Heads up: Option B gets wiped if you switch themes or apply a theme update that overwrites header.php. Use a child theme or prefer Option A.

Shopify ~3 min

  1. In your Shopify admin, go to Online Store → Themes.
  2. On your live theme, click ··· (three dots) → Edit code.
  3. Under Layout, open theme.liquid.
  4. Find the closing </head> tag (use Ctrl-F / Cmd-F).
  5. Paste your snippet on the line above </head>.
  6. Click Save.

The widget now loads on every page of your storefront, including product, cart, and checkout pages.

Squarespace ~2 min

Squarespace has a built-in code injection panel — no code editing required.

  1. From the home menu, open Settings → Advanced → Code Injection.
  2. Paste your snippet into the Header box.
  3. Click Save.
Business plan required. Squarespace's Code Injection panel is only available on Business, Commerce Basic, and Commerce Advanced plans. Personal plans will need to upgrade.

Wix ~3 min

  1. In your Wix dashboard, open Settings.
  2. Under Advanced, click Custom Code.
  3. Click + Add Custom Code in the top right.
  4. Paste your snippet in the text box.
  5. Give it a name like "Ardor Accessibility Widget".
  6. Set Add Code to Pages to All pages — Load once.
  7. Set Place Code in to Head.
  8. Click Apply.
Premium plan required. Custom Code is a paid Wix feature.

Webflow ~2 min

  1. In the Webflow Designer, click the gear icon to open Project Settings.
  2. Go to the Custom Code tab.
  3. Paste your snippet into the Head Code section.
  4. Click Save Changes.
  5. Publish your site for the widget to go live.

Drupal ~5 min

Cleanest path is the Asset Injector module so you don't have to touch theme code.

  1. Install and enable the Asset Injector module.
  2. Go to Configuration → Development → Asset Injector → HTML Injector.
  3. Click Add HTML Injector.
  4. Label it "Ardor Accessibility Widget".
  5. Paste your snippet into the Code box.
  6. Set Injection type to Footer (or Header if available).
  7. Leave conditions empty so it loads on every page, then Save.

Joomla ~4 min

  1. In the Joomla admin, go to Extensions → Templates → Templates.
  2. Click your active template, then open index.php.
  3. Find the closing </head> tag.
  4. Paste your snippet just before it.
  5. Click Save.

If you prefer not to edit the template: install a free extension like "Custom HTML Module" and publish your snippet site-wide in a "debug" position that loads in the head.

GoDaddy Website Builder ~3 min

  1. Open your site in the GoDaddy Website Builder editor.
  2. Click Settings (gear icon, lower-left).
  3. Scroll to Site-wide Code.
  4. Paste your snippet in the HTML Head field.
  5. Click Save and then Publish.
Plan requirement. Site-wide Code is available on the Premium and Commerce plans. The Basic plan does not expose it.

Google Sites via Embed

The new Google Sites does not support <head> injection, so the widget can only be added as an embed on the pages where you need it.

  1. Open your site in Google Sites.
  2. On each page, click Insert → Embed → Embed code.
  3. Paste your snippet and click Next → Insert.
  4. Place the embed block anywhere on the page (it renders invisibly).
  5. Click Publish.
Coverage gap. Because the embed is page-by-page, you have to add it on every page. If your site has more than a few pages, consider moving to a platform that supports global head code.

Google Tag Manager ~5 min

If you already manage scripts through GTM, this is often the easiest install.

  1. In your GTM workspace, click Tags → New.
  2. Name the tag "Ardor Accessibility Widget".
  3. Tag configuration: Custom HTML. Paste your snippet.
  4. Trigger: All Pages — Page View.
  5. Click Save, then Submit and publish the container.

PrestoSports ~5 min

PrestoSports sites use a file-based editor. The widget goes in the site's shared footer so every page loads it.

  1. From the top-level menu, select Website.
  2. On the Design tab, look for a file named Footer in the root folder. If you don't see it there, you may need to search for "Footer".
  3. Once you find the footer, select the file and use the [edit-content] link.
  4. If you have multiple files with "footer" in the name, look for the school's address in the content to locate the correct file. You should also see a <footer> HTML tag.
  5. Once you locate the correct file, find the closing </footer> tag and paste your snippet directly after it.
  6. Save your changes.
Checking it works. After saving, check your site to see the new widget in the bottom corner of the page. It may take a few minutes for the change to appear. For best results, use Chrome's Incognito mode to view the school site so cached assets don't fool you.

SideArm Sports ~5 min + 3 business days

SideArm doesn't let site admins edit the template directly. The widget is installed by their team through a tracking-tag request.

  1. Log into your SideArm Sports admin.
  2. Submit a tracking tag request through this link: https://tagrequests.sidearmsports.com/
  3. Enter your information. Make sure to select the entire site.
    • Tag <body> Code — this code will appear right after the <body> tag.
    • Include the snippet from your client portal in the additional instructions field.
  4. Expect a response from SideArm in about 3 business days.
Heads up on the wait. Because SideArm gates this install behind their support queue, the widget won't be live immediately. If you need scan results sooner, email us and we can run a one-off scan with the widget injected inline so you have data to work with while the tag request processes.

Plain HTML / Any Platform ~1 min

If you control your site's HTML directly (static site generators, custom apps, hand-coded HTML, Next.js, React, etc.), paste your snippet just before the closing </head> tag in your global layout or template.

Examples of where that lives:

  • Next.js: in pages/_document.js or app/layout.js — inside the <Head> component.
  • React / Vite: in index.html's <head>.
  • Hugo / Jekyll / Eleventy: in the base layout template (_includes/head.html, layouts/partials/head.html, etc.).
  • Astro: in your layout file inside the <head>.
<!DOCTYPE html> <html lang="en"> <head> <!-- your other head tags --> <!-- Ardor Accessibility Widget --> <script src="https://ardoraccessibility.com/widget/ardor-a11y.min.js" data-ardor-client="YOUR-CLIENT-ID" data-ardor-api="https://ardoraccessibility.com" async defer></script> </head>

Verify It's Working

  1. Open your site in a private / incognito window so cached versions don't fool you.
  2. Look for a small accessibility button (your configured color, lower-right corner by default).
  3. Click it — you should see the widget menu with the 5 disability profiles and 10 user controls.
  4. In the client portal, your Widget Auto-Fixes card will update on the next scheduled scan.

If you don't see the button:

  • Open your browser's developer tools (F12) → Console tab. Look for errors related to ardor-a11y.
  • In the Network tab, confirm ardor-a11y.min.js loaded successfully (HTTP 200).
  • Clear your site cache if you use a caching plugin or CDN.
  • If your site enforces a strict Content-Security-Policy, allow https://ardoraccessibility.com in the script-src directive.

Still stuck?

Our team will get you installed on any platform, usually within one business day.

Email Support