Skip to main content

Universal JavaScript Installation Guide

Install the AllAccessible widget on any website using a simple JavaScript snippet. This method works on all platforms - custom HTML sites, React, Vue,

Written by Frank

Universal JavaScript Installation Guide

Overview

Install the AllAccessible widget on any website using a simple JavaScript snippet. This method works on all platforms - custom HTML sites, React, Vue, Angular, Wix, Squarespace, and any other web platform.

Who This Is For

  • Custom website developers

  • Sites not using WordPress, Drupal, or Shopify

  • Platforms like Wix, Squarespace, Weebly

  • Single-page applications (React, Vue, Angular)

  • Anyone who can edit their site's HTML

What You'll Learn

  • How to get your unique widget code

  • Where to paste the code

  • How to verify it's working

  • Platform-specific installation tips

Before You Start

Requirements:

  • ✅ Access to edit your website's HTML code

  • ✅ AllAccessible account and Site ID

  • ✅ Basic understanding of HTML (or ability to follow instructions)

What You'll Need:

  • Your Account ID (found in AllAccessible dashboard)

  • Access to your website's HTML code

Time Required: 2-5 minutes

Step 1: Get Your Installation Code

Option A: From Your Dashboard

  1. Log in to app.allaccessible.org

  2. Click on Sites in the left menu

  3. Find your site in the list

  4. Click the Installation or Get Code button

  5. Copy the JavaScript snippet

📷 AllAccessible dashboard showing installation code

Option B: Manual Code Format

If you can't access the dashboard, use this format:

<script>
    (function(d) {
        var s = d.createElement("script");
        s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
        s.setAttribute("id", "allAccessibleWidget");
        s.async = true;
        s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
        d.head.appendChild(s);
    })(document)
</script>

Replace YOUR_ACCOUNT_ID with your actual Account ID (found in dashboard under Sites)

Example:

<script>
    (function(d) {
        var s = d.createElement("script");
        s.setAttribute("data-accessible-account-id", "abc123xyz");
        s.setAttribute("id", "allAccessibleWidget");
        s.async = true;
        s.setAttribute("src", "https://api.allaccessible.org/widget/abc123xyz.js");
        d.head.appendChild(s);
    })(document)
</script>

Step 2: Choose Where to Place the Code

You have two options:

Option A: Before </body> Tag (Recommended)

Best for: Most websites, better performance

Place the code right before the closing </body> tag:

<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content -->    <!-- AllAccessible Widget - Add here -->
    <script>
        (function(d) {
            var s = d.createElement("script");
            s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
            s.setAttribute("id", "allAccessibleWidget");
            s.async = true;
            s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
            d.head.appendChild(s);
        })(document)
    </script>
</body>
</html>

Why this is recommended:

  • Loads after page content (faster perceived load)

  • Doesn't block page rendering

  • Industry best practice

Option B: In <head> Section

Best for: Sites where footer editing isn't possible

Place in the <head> section:

<html>
<head>
    <title>My Website</title>
    <script>
        (function(d) {
            var s = d.createElement("script");
            s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
            s.setAttribute("id", "allAccessibleWidget");
            s.async = true;
            s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
            d.head.appendChild(s);
        })(document)
    </script>
</head>
<body>
    <!-- Your website content -->
</body>
</html>

Step 3: Install on Your Platform

Choose your platform for specific instructions:

Custom HTML / Static Sites

  1. Open your HTML file in a text editor

  2. Find the </body> tag (usually at the bottom)

  3. Paste the script right before it

  4. Save the file

  5. Upload to your web server

  6. Visit your website to test

Wix

Method 1: Custom Code (Recommended)

  1. Log in to Wix Editor

  2. Go to Settings → Tracking & Analytics

  3. Click + New Tool → Custom

  4. Name it "AllAccessible"

  5. Paste your script code

  6. Set to load on All Pages

  7. Choose Body - End position

  8. Click Apply

📷 Wix custom code settings

Method 2: Embed Element

  1. In Wix Editor, click Add (+) button

  2. Select Embed → Custom Embeds → Embed a Widget

  3. Paste your script code

  4. Position the embed element anywhere (it's invisible)

  5. Publish your site

Squarespace

  1. Log in to Squarespace

  2. Go to Settings → Advanced → Code Injection

  3. Paste your script in the Footer box

  4. Click Save

  5. Visit your site to test

📷 Squarespace code injection screen

Note: Code Injection is available on Business plans and higher.

Weebly

  1. Log in to Weebly Editor

  2. Go to Settings → SEO

  3. Scroll to Footer Code

  4. Paste your script

  5. Click Save

  6. Publish your site

Webflow

  1. Open your Webflow project

  2. Go to Project Settings → Custom Code

  3. Paste script in Footer Code section

  4. Click Save Changes

  5. Publish your site

GoDaddy Website Builder

  1. Log in to GoDaddy Website Builder

  2. Click Settings → SEO

  3. Find Custom Code section

  4. Paste script in Footer field

  5. Click Done and Publish

Single Page Applications (React, Vue, Angular)

React

Option 1: Public index.html (Easiest)

Add to public/index.html:

<body>
  <div id="root"></div>
  <script>
    (function(d) {
        var s = d.createElement("script");
        s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
        s.setAttribute("id", "allAccessibleWidget");
        s.async = true;
        s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
        d.head.appendChild(s);
    })(document)
  </script>
</body>

Option 2: Component Method

import { useEffect } from 'react';function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.setAttribute('data-accessible-account-id', 'YOUR_ACCOUNT_ID');
    script.setAttribute('id', 'allAccessibleWidget');
    script.async = true;
    script.src = 'https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js';
    document.head.appendChild(script);    return () => {
      // Cleanup if needed
      const existingScript = document.getElementById('allAccessibleWidget');
      if (existingScript) {
        existingScript.remove();
      }
    };
  }, []);  return (
    // Your app
  );
}

Vue

Add to public/index.html:

<body>
  <div id="app"></div>
  <script>
    (function(d) {
        var s = d.createElement("script");
        s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
        s.setAttribute("id", "allAccessibleWidget");
        s.async = true;
        s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
        d.head.appendChild(s);
    })(document)
  </script>
</body>

Angular

Add to src/index.html:

<body>
  <app-root></app-root>
  <script>
    (function(d) {
        var s = d.createElement("script");
        s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
        s.setAttribute("id", "allAccessibleWidget");
        s.async = true;
        s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
        d.head.appendChild(s);
    })(document)
  </script>
</body>

Next.js

Add to pages/_document.js:

import { Html, Head, Main, NextScript } from 'next/document'export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script dangerouslySetInnerHTML={{__html: `
          (function(d) {
              var s = d.createElement("script");
              s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
              s.setAttribute("id", "allAccessibleWidget");
              s.async = true;
              s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
              d.head.appendChild(s);
          })(document)
        `}} />
      </body>
    </Html>
  )
}

Step 4: Verify Installation

Quick Test

  1. Visit your website (front-end, not editor/admin)

  2. Look for the accessibility button (usually bottom-right corner)

  3. Click the button to open the widget

  4. Try a feature (like increasing text size)

📷 Accessibility widget button on website

If You Don't See the Widget

Check 1: View Page Source

  1. Right-click on your page → View Page Source

  2. Search for "allaccessible" (Ctrl+F / Cmd+F)

  3. You should see your script tag

If it's there: Clear browser cache and try again
​If it's not there: Code wasn't saved properly, try reinstalling

Check 2: Browser Console

  1. Right-click → Inspect → Console tab

  2. Look for JavaScript errors

  3. Common issues:

    • Wrong Account ID

    • Domain not registered in dashboard

    • Ad blocker interfering

Check 3: Network Tab

  1. Right-click → Inspect → Network tab

  2. Refresh the page

  3. Look for your widget file (YOUR_ACCOUNT_ID.js)

  4. Should show status 200 (OK)

Advanced Configuration (Optional)

Custom Widget Configuration

You can customize widget behavior with JavaScript:

<script>
// Configure before widget loads
window.AllAccessibleConfig = {
  position: 'bottom-right',  // bottom-left, top-right, top-left
  offset: { x: 20, y: 20 },  // Distance from corner (pixels)
  language: 'en',            // Default language
  autoOpen: false,           // Don't auto-open on first visit
  hideOnMobile: false        // Show on mobile devices
};
</script><!-- Then load widget -->
<script>
    (function(d) {
        var s = d.createElement("script");
        s.setAttribute("data-accessible-account-id", "YOUR_ACCOUNT_ID");
        s.setAttribute("id", "allAccessibleWidget");
        s.async = true;
        s.setAttribute("src", "https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js");
        d.head.appendChild(s);
    })(document)
</script>

Note: Most customization should be done in the AllAccessible dashboard, not in code.

Common Installation Issues

Issue: Widget Doesn't Appear

Possible Causes:

  1. Wrong Account ID - Double-check your ID

  2. Domain not registered - Add your domain in AllAccessible dashboard

  3. Cache - Clear browser and server cache

  4. Ad blocker - Disable and test

  5. HTTPS required - Widget won't load on HTTP sites

Solutions:

  1. Verify Account ID in dashboard

  2. Add your exact domain under Sites → Subdomains

  3. Hard refresh: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)

  4. Try incognito/private browsing mode

  5. Ensure your site uses HTTPS

Issue: Widget Appears But Features Don't Work

Possible Causes:

  1. JavaScript conflict with another script

  2. Content Security Policy blocking the widget

  3. Subscription issue (premium features on free plan)

Solutions:

  1. Check browser console for errors

  2. See CSP configuration guide below

  3. Verify your subscription in dashboard

Issue: Slow Loading

Possible Causes:

  1. Script in <head> instead of before </body>

  2. Too many scripts loading simultaneously

Solutions:

  1. Move script to before </body> tag

  2. Use async loading (see below)

Content Security Policy (CSP) Configuration

If your site uses CSP headers, add these directives:

Content-Security-Policy:
  script-src 'self' https://app.allaccessible.org;
  connect-src 'self' https://app.allaccessible.org;
  frame-src 'self' https://app.allaccessible.org;

Where to add:

  • .htaccess (Apache)

  • nginx.conf (Nginx)

  • HTML meta tag (fallback)

HTML Meta Tag Method:

<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' https://app.allaccessible.org;">

Async Loading (Advanced)

The AllAccessible installation code already includes async loading by default:

s.async = true;

This ensures the widget loads without blocking your page. No additional configuration needed!

Note: The widget script is optimized for performance and won't slow down your site.

Testing Checklist

After installation, verify these items:

  • Widget button appears on homepage

  • Widget button appears on internal pages

  • Widget button appears on mobile devices

  • Clicking button opens the widget

  • Can increase text size

  • Can change color contrast

  • Widget persists on page navigation

  • No JavaScript console errors

  • Page load speed not affected

Troubleshooting Tools

Check Domain Registration

  1. Go to app.allaccessible.org

  2. Click Sites

  3. Verify your domain matches exactly (www vs non-www matters!)

  4. Check Subdomains section for all your URLs

Test Different Browsers

  • ✅ Chrome

  • ✅ Firefox

  • ✅ Safari

  • ✅ Edge

  • ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Clear All Caches

  1. Browser cache: Hard refresh or incognito mode

  2. Server cache: Contact hosting support or clear via control panel

  3. CDN cache: If using Cloudflare, purge cache

  4. Plugin cache: If using caching plugins (WP Rocket, etc.), clear those too

Video Tutorial

Watch our step-by-step manual installation guide:

[VIDEO PLACEHOLDER: Manual JavaScript installation walkthrough]

Platform-Specific Video Tutorials

Frequently Asked Questions

Q: Do I need to add the code to every page?
A: No! Add it once to your template/layout file. It will then appear on all pages.

Q: Will this slow down my website?
A: No. The widget loads asynchronously and is optimized for performance. Typical impact: less than 0.1 seconds.

Q: Can I customize the widget appearance?
A: Yes! Customize colors, position, and branding in your AllAccessible dashboard, not in the code.

Q: What if I have multiple domains?
A: Each domain needs its own Account ID, but all can use the same AllAccessible account.

Q: Can I use one code snippet for subdomains?
A: Yes! One Account ID works for your main domain and all subdomains (blog.yoursite.com, shop.yoursite.com, etc.)

Q: Is HTTPS required?
A: Yes. The widget will not load on non-HTTPS sites for security reasons.

Getting Help

Can't Get It Working?

Support Options:

For Priority Support:

  • Upgrade to Professional plan for faster response times

  • Include: Your Account ID, domain name, and browser console errors

Related Articles

Last Updated: October 2025
​Installation Method: JavaScript Embed
​Difficulty: Intermediate

Related Articles
Did this answer your question?