WordPress Integration Guide

Integrating AccessiblyKit into WordPress is straightforward and does not require advanced technical skills.

Integration Steps

Step 1: Log in to Your Dashboard

Step 2: Install “Insert Headers and Footers” Plugin

Navigate to Plugins → Add New. Search for and install the “Insert Headers and Footers” plugin by WPBeginner.

Step 3: Activate the Plugin

After installation, click Activate to enable the plugin.

Step 4: Retrieve Your Embed Code

In your AccessiblyKit dashboard:

Navigate to your site settings.
Click on Integration.
Copy the provided embed script:


<script src="https://cdn-01.accessiblykit.com/a11y-widget.bundle.js" 
  data-widget-id="YOUR_WIDGET_ID">
</script>

Replace YOUR_WIDGET_ID with the actual widget ID from your dashboard.

Step 5: Insert Embed Code

In your WordPress admin:

Go to Settings → Insert Headers and Footers.
Paste your embed code in the Scripts in Footer field.

Inserting the widget embed code in WordPress. (Click to play)

Step 6: Save Your Changes

Click Save to finalize integration.

You can customize your widget appearance and behavior using additional attributes:


<script src="https://cdn-01.accessiblykit.com/a11y-widget.bundle.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-theme="light|dark|auto"
  data-position="bottom-right"
  data-button-color-mode="GRADIENT"
  data-language="en"
  data-button-primary-color="#504CFF">
</script>

Parameter	Description	Default Value
`data-theme`	Widget theme (`auto`, `light`, `dark`)	`auto`
`data-position`	Widget position (`bottom-right`, `top-left`, etc.)	`bottom-right`
`data-language`	Widget language (ISO code: `en`, `es`, etc.)	`en`
`data-button-color-mode`	Button style (`SOLID`, `GRADIENT`)	`SOLID`
`data-button-primary-color`	Primary color (Hex code)	`#504CFF`

Troubleshooting

⚠️

Common issues and quick solutions:

Widget not displaying: Ensure no conflicting scripts/plugins are active and your widget ID is correct.
Styling conflicts: Check custom CSS on your WordPress theme.
Performance issues: Load the script in the footer for better performance.

Advanced Control via JavaScript API

After embedding, you can programmatically control your widget directly via JavaScript:


// Open widget popup
window.AccessibilityWidgetAPI?.openWidget();
 
// Activate a specific profile
window.AccessibilityWidgetAPI?.enableProfile('motor_impaired');
 
// Reset widget to default
window.AccessibilityWidgetAPI?.resetAllFeatures();

Further Assistance

If you require advanced customization or encounter issues:

Visit our Developer Documentation
Contact our Support Team

Need More Help?

Book a 1-on-1 support session or join our next live webinar.

Schedule Now