Framework Integrations

A11yCore works with any web framework. Here are complete integration examples with best practices for each platform.

Key principle:Initialize A11yCore once at the application root. The widget persists across client-side navigation in SPAs. You don't need to reinitialize on each page.

⚛️

React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Wait for A11yCore to be available
    const init = async () => {
      if (window.A11yCore) {
        await window.A11yCore.init({
          licenseKey: import.meta.env.VITE_A11YCORE_KEY,
          debug: import.meta.env.DEV,
        });
      }
    };
    init();
    
    // No cleanup needed - A11yCore persists across page navigation
  }, []);
  
  return <div>...</div>;
}

•Initialize once in your root App component
•Use environment variables for the license key
•No need to call destroy() for typical SPAs

▲

Next.js (App Router)

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://cdn.a11ycore.org/v1/a11ycore.min.js"
          data-key={process.env.NEXT_PUBLIC_A11YCORE_KEY}
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

•Use Next.js Script component with "afterInteractive" strategy
•Place in root layout.tsx for site-wide coverage
•Use NEXT_PUBLIC_ prefix for client-side env vars

💚

Vue.js

// main.js or App.vue
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(async () => {
      if (window.A11yCore) {
        await window.A11yCore.init({
          licenseKey: import.meta.env.VITE_A11YCORE_KEY,
        });
      }
    });
  }
};

•Initialize in your main App.vue setup function
•Works with both Vue 2 (created hook) and Vue 3 (onMounted)

🛍️

Shopify

{%- comment -%} theme.liquid or snippets/a11ycore.liquid {%- endcomment -%}

{%- if shop.metafields.a11ycore.license_key -%}
  <script
    src="https://cdn.a11ycore.org/v1/a11ycore.min.js"
    data-key="{{ shop.metafields.a11ycore.license_key }}"
    defer
  ></script>
{%- endif -%}

•Store license key in Shop metafields for security
•Inject in theme.liquid head or as a snippet
•Works with Checkout Extensibility for checkout pages

📝

WordPress

// functions.php
function a11ycore_enqueue_script() {
  $license_key = get_option('a11ycore_license_key');
  if ($license_key) {
    wp_enqueue_script(
      'a11ycore',
      'https://cdn.a11ycore.org/v1/a11ycore.min.js',
      array(),
      '1.0.0',
      array('strategy' => 'defer', 'in_footer' => false)
    );
    wp_add_inline_script('a11ycore', '', 'before');
    // Add data attribute via script_loader_tag filter
  }
}
add_action('wp_enqueue_scripts', 'a11ycore_enqueue_script');

// Add data-key attribute
function a11ycore_script_attributes($tag, $handle) {
  if ($handle === 'a11ycore') {
    $key = esc_attr(get_option('a11ycore_license_key'));
    return str_replace(' src', " data-key=\"{$key}\" src", $tag);
  }
  return $tag;
}
add_filter('script_loader_tag', 'a11ycore_script_attributes', 10, 2);

•Store license key in WordPress options
•Use script_loader_tag filter to add data attributes
•Consider creating a simple plugin for easier management

📄

Static HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  
  <!-- A11yCore - place just before </head> -->
  <script
    src="https://cdn.a11ycore.org/v1/a11ycore.min.js"
    data-key="YOUR_LICENSE_KEY"
    defer
  ></script>
</head>
<body>
  ...
</body>
</html>

•Simplest installation - just add the script tag
•The defer attribute ensures non-blocking load
•Widget appears automatically when page is ready