SiteAccessible
Documentation

Platform install guides

WordPress, Shopify, Google Tag Manager, React, Next.js and Vue.

5 min readUpdated

The snippet is plain HTML, so it works anywhere you can add a script tag. These are the routes people ask about most often.

WordPress

  1. Appearance → Theme File Editor → header.php, and paste the tag before </head>.
  2. Or, safer against theme updates: install any header-and-footer-scripts plugin and paste it into the header field.
  3. Block themes: Tools → Theme File Editor is unavailable, so use the plugin route.

Shopify

  1. Online Store → Themes → ⋯ → Edit code.
  2. Open layout/theme.liquid.
  3. Paste the tag immediately before </head> and save.

Google Tag Manager

Create a Custom HTML tag containing the snippet, and fire it on All Pages. Leave document.write unchecked.

Next.js (App Router)

app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://siteaccessible.com/w/YOUR_SITE_KEY.js"
          strategy="afterInteractive"
          crossOrigin="anonymous"
        />
      </body>
    </html>
  );
}

React and Vue SPAs

Add the tag to the static index.html rather than mounting it from a component. The widget attaches itself to the document, so it survives client-side route changes and does not need to be re-initialised.