Skip to main content
Lifetime Accessibility DealSOLD OUT
Pricing
This is a promotional banner for a lifetime accessibility deal. You can dismiss this banner by clicking the close button or pressing the Escape key.

Need some help with installing WebAbility?

Find your answers here

How to Install WebAbility on WordPress

Before You Begin

Installing WebAbility on WordPress is straightforward, whether you're using our dedicated plugin or adding the widget code directly. Let's get your WordPress site accessible in minutes.

What you'll need: - Admin access to your WordPress dashboard - Your WebAbility account credentials - 5-10 minutes (depending on your method)

Compatibility: WebAbility works seamlessly with: - WordPress 5.0+ (we recommend 6.0+ for best performance) - All major page builders (Elementor, Divi, Beaver Builder, WPBakery) - WooCommerce and other e-commerce plugins - Multisite installations - Custom themes and child themes - Popular caching plugins (we'll show you how to configure them)

Why WordPress Sites Need Accessibility

WordPress powers 43% of the web, but most WordPress sites have significant accessibility gaps. Here's what you need to know:

The WordPress Accessibility Challenge: - Theme developers often prioritize aesthetics over accessibility - Plugins can introduce accessibility barriers - Page builders may generate non-semantic HTML - Custom CSS can break keyboard navigation - Media libraries often lack proper alt text management

Legal & Business Impact: - WordPress sites are frequently targeted in ADA lawsuits - Government contractors must meet Section 508 requirements - Educational institutions need WCAG 2.1 AA compliance - Better accessibility means better SEO (Google rewards accessible sites)

Common WordPress Issues WebAbility Fixes: - Missing form labels in Contact Form 7, WPForms, Gravity Forms - Inaccessible WooCommerce checkout processes - Slider plugins that can't be keyboard controlled - Pop-up plugins that trap screen readers - Menu systems without proper ARIA labels

Installation Method 1: WordPress Plugin (Easiest)

Step 1: Install the Plugin - Go to Plugins → Add New in your WordPress dashboard - Search for "WebAbility" - Click "Install Now" then "Activate"

Step 2: Configure Your Settings - Navigate to Settings → WebAbility - Enter your WebAbility API key - Choose your widget position (we recommend bottom-right) - Select pages to exclude (admin pages, checkout confirmation, etc.) - Save your settings

That's it! The widget will now appear on your site. Clear your cache if you don't see it immediately.

Alternative Installation Methods

Recommended: Use the WordPress plugin method described above for the easiest installation. The methods below are for advanced users or special use cases.

Getting Your Widget Code

  1. On the WebAbility homepage, click Login in the top right corner, and log in to your account.
  2. Go to Installation in the Side Menu Bar.
Screenshot of customer portal
  1. Quick Installation - Install WebAbility Widget with our default settings and design to provide the best customer experience.
Screenshot of customer portal installation copy to clipboard page
  1. Click Copy to Clipboard to copy the installation script.
  2. Now that you have your installation script you can add it to WordPress.

Advanced: Using JavaScript Plugins

For those who prefer using a JavaScript management plugin:

Recommended Plugins:

Screenshot of WordPress JavaScript Plugin

These plugins provide an easy interface to manage JavaScript snippets and allow conditional loading rules.

Installation Method 2: Manual Code Installation

For Advanced Users: If you prefer manual installation or the plugin doesn't suit your needs:

Option A: Via Theme Functions Add to your theme's functions.php or custom plugin: ```php function add_webability_widget() { if (!is_admin()) { echo ''; } } add_action('wp_footer', 'add_webability_widget'); ```

Option B: Via Header/Footer Plugin - Install a plugin like "Insert Headers and Footers" - Add the WebAbility script to the footer section - Save and test

Option C: Direct Theme Edit - Go to Appearance → Theme Editor - Select footer.php - Add the script before the closing tag - Update file

Post-Installation Setup

Cache Configuration: If using caching plugins, add these exclusions: - WP Rocket: Exclude /widget.webability.io/ from minification - W3 Total Cache: Add widget.min.js to "Never minify" list - LiteSpeed Cache: Exclude from CSS/JS optimization - Autoptimize: Add widget.webability.io to exclusion list

Performance Optimization: - The widget loads asynchronously (won't slow your site) - Only 12KB gzipped - CDN-delivered for fastest loading - Lazy-loads additional features as needed

Testing Your Installation: 1. Open your site in an incognito window 2. Look for the accessibility icon (usually bottom-right) 3. Click it to open the accessibility panel 4. Test a few features (high contrast, font size, etc.) 5. Check your site's score in the WebAbility dashboard

Troubleshooting Common Issues

Widget Not Appearing: - Clear all caches (browser, CDN, WordPress, server) - Check if you're logged in (some configs hide it from admins) - Verify no JavaScript errors in console (F12 → Console) - Disable optimization plugins temporarily to test - Check if another accessibility plugin is conflicting

Plugin Conflicts: - Security plugins (Wordfence, Sucuri) may block external scripts - Add widget.webability.io to whitelist - Some page builders need manual insertion in their settings - Disable "Delay JavaScript Execution" in performance plugins

Multisite Issues: - Network activate for all sites - Or activate per-site for granular control - Each site can have different widget settings - Super admin can manage all installations

WooCommerce Specific: - Widget may not appear on checkout without configuration - Add to WooCommerce → Settings → Advanced → Page setup - Ensure it's not excluded in your WebAbility settings - Test with a test transaction to verify

Frequently Asked Questions

Will WebAbility slow down my WordPress site?

No! The widget loads asynchronously and is only 12KB. It won't affect your PageSpeed or Core Web Vitals scores. In fact, better accessibility often improves SEO, which can improve your overall performance metrics.

Does it work with my page builder (Elementor/Divi/Beaver)?

Yes, WebAbility works with all major page builders. For Elementor, you might need to add it via Elementor → Custom Code. For Divi, use Divi → Theme Options → Integration. Beaver Builder users can add it via Settings → Advanced → Code.

I'm getting 'Headers already sent' error after installing

This usually means there's whitespace before <?php in your functions.php. Open the file, remove any spaces or blank lines before the opening PHP tag, and save. If using our plugin, deactivate and reactivate it.

Can I customize the widget appearance to match my brand?

Yes! In your WebAbility dashboard, you can customize colors, position, icon style, and more. Changes reflect instantly without touching WordPress.

My caching plugin is preventing updates from showing

Add these cache exclusions: widget.webability.io/*.js and clear all caches. For Cloudflare users, create a Page Rule to bypass cache for the widget URL.

How do I hide the widget on specific pages like checkout success?

In the WordPress plugin settings, use the 'Exclude Pages' option. Or add this to those pages: <style>#webability-widget { display: none !important; }</style>

Need Help with WordPress Installation?

Our support team has extensive experience with WordPress sites of all sizes, from simple blogs to complex WooCommerce stores.

Contact SupportView Documentation

Make YOUR WEBSITE ACCESSIBLE for FREE

Find out now if your website is

WCAG  &  ADA compliant