Skip to main content

Installing AllAccessible on Magento (Adobe Commerce)

Step-by-step guide to installing the AllAccessible accessibility widget on your Magento 2 or Adobe Commerce store.

Written by Frank

Installing AllAccessible on Magento (Adobe Commerce)

Overview

Install the AllAccessible accessibility widget on your Magento 2 or Adobe Commerce store. Magento's admin panel makes it simple to add the widget script to your entire store without editing theme files directly.

Who This Is For

  • Magento 2 and Adobe Commerce store owners

  • Magento administrators and developers

  • Anyone managing a Magento-based online store who needs to add accessibility features

What You'll Learn

  • How to install AllAccessible using the Magento admin panel (easiest)

  • How to install using XML layout files (developer method)

  • How to verify the widget is working

  • Troubleshooting tips specific to Magento

Before You Start

Requirements:

  • An active AllAccessible account with a Site ID

  • Admin access to your Magento 2 / Adobe Commerce dashboard

  • Magento 2.x or Adobe Commerce (this guide does not cover Magento 1)

What You'll Need:

Time Required: 2-5 minutes

Choose Your Installation Method

Method

Best For

Difficulty

Admin Panel (Option A)

Store owners and admins — no code files to edit

Beginner

XML Layout (Option B)

Developers who prefer file-based configuration

Intermediate

Option A: Install via Magento Admin Panel (Recommended)

The simplest method — add the widget through your Magento admin dashboard.

Step 1: Get Your Installation Code

  1. Log in to your AllAccessible dashboard

  2. Click Sites in the left menu

  3. Find your site and click Installation or Get Code

  4. Copy the JavaScript snippet

Your code will look like this:

<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 from the dashboard.

Step 2: Add Code in Magento Admin

  1. Log in to your Magento Admin Panel

  2. Navigate to Content → Design → Configuration

  3. Find the store view you want to add the widget to, or select Global to apply it to all store views

  4. Click Edit

  5. Expand the HTML Head section

  6. Locate the Scripts and Style Sheets field

  7. Paste your AllAccessible script code into the field

  8. Click Save Configuration

Step 3: Clear the Cache

After saving, you must flush the Magento cache for changes to appear:

  1. Go to System → Cache Management

  2. Click Flush Magento Cache

  3. Alternatively, click Flush Cache Storage to clear all caches

Or via command line:

php bin/magento cache:flush

Option B: Install via XML Layout File (Developer Method)

If you prefer file-based configuration or need more control, you can add the widget script through a custom XML layout file.

Step 1: Create or Edit Your Custom Layout File

Add the script reference to your theme's default_head_blocks.xml or create a custom module layout.

File path: app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://api.allaccessible.org/widget/YOUR_ACCOUNT_ID.js"
                src_type="url"
                async="true" />
    </head>
</page>

Replace YOUR_ACCOUNT_ID with your actual Account ID.

Note: This XML method loads the script directly but does not set the data-accessible-account-id attribute. If your widget requires the data attribute, use the admin panel method (Option A) or add an inline script via a custom .phtml template instead.

Step 2: Deploy Static Content and Clear Cache

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Step 4: Verify Installation

  1. Visit your live storefront (not the Magento admin)

  2. Look for the accessibility button — it typically appears in the bottom-right corner

  3. Click the button to open the widget

  4. Test a feature like increasing text size or changing contrast

  5. Check a product page to confirm the widget appears across the store

If You Don't See the Widget

Check 1: Flush the cache
Magento caches aggressively. Always flush the cache after making changes:

  • Admin: System → Cache Management → Flush Magento Cache

  • CLI: php bin/magento cache:flush

Check 2: Check the correct store view
If you added the code to a specific store view (not Global), make sure you're viewing that store on the frontend.

Check 3: View Page Source

  1. On your live store, right-click and select View Page Source

  2. Press Ctrl+F (Windows) or Cmd+F (Mac) and search for "allaccessible"

  3. You should see your script code in the <head> section

Check 4: Clear your browser cache

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

  • Or open your store in an incognito/private browsing window

Check 5: Verify your domain in AllAccessible

  1. Log in to your AllAccessible dashboard

  2. Go to Sites

  3. Make sure your Magento store domain is registered (check both www and non-www versions)

Troubleshooting

Widget Doesn't Appear After Saving

Possible Causes:

  • Cache not flushed — this is the most common issue with Magento. Always clear the cache after saving

  • Wrong Account ID — double-check the ID matches your AllAccessible dashboard

  • Wrong store view — if you applied the code to a specific store view, check that you're browsing that store

  • Domain not registered — add your exact domain in the AllAccessible dashboard under Sites

  • Full Page Cache (FPC) — if using Varnish or a CDN, you may need to purge those caches as well

Code Appears in Source But Widget Doesn't Load

  • Ad blocker — temporarily disable any ad blockers and test

  • Content Security Policy (CSP) — Magento 2.4+ enforces CSP by default. You may need to whitelist AllAccessible. Add this to your CSP configuration:

<!-- In your module's etc/csp_whitelist.xml -->
<csp_whitelist>
    <policies>
        <policy id="script-src">
            <values>
                <value id="allaccessible" type="host">app.allaccessible.org</value>
            </values>
        </policy>
        <policy id="connect-src">
            <values>
                <value id="allaccessible" type="host">app.allaccessible.org</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

After adding the CSP whitelist, run:

php bin/magento cache:flush

Widget Conflicts with Other Elements

If the widget button overlaps with a chat widget or other floating elements:

  1. Log in to your AllAccessible dashboard

  2. Go to your site's Widget Settings

  3. Change the Widget Position (e.g., bottom-left instead of bottom-right)

  4. Adjust the Widget Offset to fine-tune spacing

Multi-Store Setup

If you run multiple Magento store views:

  1. In Content → Design → Configuration, edit each store view individually

  2. Use a different AllAccessible Account ID for each store view if they have separate AllAccessible site entries

  3. Or apply the code at the Global level if all store views share the same AllAccessible account

Important Notes

  • Always flush the cache after any configuration change — Magento will serve stale pages until the cache is cleared

  • Magento 2.4+ CSP — Content Security Policy enforcement may block third-party scripts. See the CSP troubleshooting section above

  • Staging environments — If using Magento's content staging, be aware that scheduled updates can sometimes override design configuration

  • Production mode — In production mode, you may need to run php bin/magento setup:static-content:deploy after layout XML changes

Frequently Asked Questions

Q: Should I use the admin panel method or the XML method?
A: We recommend the admin panel method (Option A) for most users. It's faster, doesn't require file access, and is easier to maintain. Use the XML method if you're a developer managing configurations through version control.

Q: Will the widget appear on all pages of my store?
A: Yes — if you added the code at the Global level or selected your main store view, the widget will appear on every page.

Q: Will the widget slow down my Magento store?
A: No. The widget loads asynchronously, meaning it won't block your page content from loading. Typical impact is less than 0.1 seconds.

Q: What if I have multiple store views?
A: You can apply the code at the Global level to cover all store views, or add it to each store view individually with different Account IDs if needed.

Q: Can I customize the widget's appearance?
A: Yes! Customize colors, position, language, and branding from your AllAccessible dashboard — no code changes needed.

Q: Does this work with Magento 1?
A: This guide covers Magento 2 and Adobe Commerce. Magento 1 has a different admin structure — the equivalent path is System → Configuration → Design → HTML Head → Miscellaneous Scripts. However, Magento 1 has reached end of life and we recommend upgrading to Magento 2.

Magento References

Related Articles

Last Updated: February 2026
​Installation Method: Admin Panel / XML Layout
​Difficulty: Beginner (Admin) / Intermediate (XML)
​Time Required: 2-5 minutes
​Platform: Magento 2 / Adobe Commerce

Related Articles
Did this answer your question?