AccessiFlow
Start free

Installation

1. Create a site

Sign in to the dashboard, go to Sites, and click Create site. You’ll provide a display name (for your own reference) and a starting domain. The dashboard generates a 12-character siteKey that uniquely identifies your site.

2. Add your domains to the allowlist

The widget only renders on hostnames you’ve approved. From the site detail page, add every domain you intend to embed on — apex (example.com), subdomains (blog.example.com), and staging URLs. Subdomains of an allowed apex are included automatically.

If a visitor loads your page from a hostname that isn’t on the allowlist, the widget exits silently and leaves no marks.

3. Paste the snippet

Drop this into your page’s <head>:

<script src="https://cdn.accessiflowfiji.com/w.js"
        data-site="YOUR_SITE_KEY"
        defer></script>

The defer attribute ensures the script loads after your HTML parses — the widget still mounts before the user sees the first paint on most devices.

Subresource integrity (recommended)

For customers who pin script versions, we publish an SRI hash with every release. Use the versioned URL and integrity attribute:

<script src="https://cdn.accessiflowfiji.com/w-1.0.0.js"
        data-site="YOUR_SITE_KEY"
        integrity="sha384-…"
        crossorigin="anonymous"
        defer></script>

4. Verify

Reload your page. A circular launcher appears in the corner you configured (bottom-right by default). Clicking it opens the accessibility panel.

If nothing appears, see Troubleshooting.

Content Security Policy

If your site uses a strict CSP, allow the widget origin:

script-src  'self' https://cdn.accessiflowfiji.com;
connect-src 'self' https://accessiflowfiji.com;
img-src     'self' data: https://api.qrserver.com;

The connect-src entry allows the widget to fetch its signed manifest and send one anonymised heartbeat per session.

api.qrserver.com is only needed if you mirror the dashboard’s 2FA setup screen inside a customer portal — the widget itself never contacts it.

Framework-specific notes

Next.js

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.accessiflowfiji.com/w.js"
          data-site="YOUR_SITE_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

WordPress

Use a “Header and Footer Scripts” plugin (e.g. Insert Headers and Footers by WPBeginner) and paste the snippet into the header field. No theme edit needed.

Webflow

Project Settings → Custom Code → Head Code, paste the snippet, save, republish.

ASP.NET Core / .NET

Paste the snippet in Views/Shared/_Layout.cshtml orPages/Shared/_Layout.cshtml just before </body>. Add asp-append-version="false" to prevent ASP.NET from appending cache busters to the external URL.