<?php
// Add to header.php before </head>
if (!defined(\'ABSPATH\')) exit;
?>
<script>
(function () {
window.accessibilityToolbarConfig = {
licenseKey: "<?php echo get_option(\'accessly_license_key\', \'\'); ?>",
floatIconPosition: "top-right",
brandColor: "#28a745",
showToolbarOnLoad: false,
enableAnalytics: true
};
// Load the toolbar script ONCE
var script = document.createElement("script");
script.src = "https://accessly.website/assets/js/atb001_loader.min.js";
script.async = true;
document.head.appendChild(script);
})();
</script>
Shopify
Add to theme liquid
Steps:
Go to Online Store → Themes
Click "Actions" → "Edit code"
Open theme.liquid
Find </head> tag
Add code before it
Save changes
Shopify Integration
{{ \'Accessly Toolbar Integration\' }}
{% comment %} Add before closing head tag {% endcomment %}
<script>
(function () {
window.accessibilityToolbarConfig = {
licenseKey: "{{ shop.metafields.accessly.license_key }}",
floatIconPosition: "bottom-right",
brandColor: "#28a745",
showToolbarOnLoad: false,
enableAnalytics: true
};
// Load the toolbar script ONCE
var script = document.createElement("script");
script.src = "https://accessly.website/assets/js/atb001_loader.min.js";
script.async = true;
document.head.appendChild(script);
})();
</script>
React/Angular/Vue
SPA Framework Integration
React Example:
React Component
import { useEffect } from \'react\';
function AccessibilityToolbar() {
useEffect(() => {
(function () {
// Configuration
window.accessibilityToolbarConfig = {
licenseKey: process.env.REACT_APP_ACCESSLY_KEY,
floatIconPosition: "top-right",
brandColor: "#28a745",
showToolbarOnLoad: false,
enableAnalytics: true
};
// Load the toolbar script ONCE
var script = document.createElement("script");
script.src = \'https://accessly.website/assets/js/atb001_loader.min.js\';
script.async = true;
document.head.appendChild(script);
})();
return () => {
// Cleanup if needed
if (window.accessibilityToolbarAPI) {
window.accessibilityToolbarAPI.destroy();
}
};
}, []);
return null; // No UI, toolbar floats
}
export default AccessibilityToolbar;
Detailed Configuration Examples
Choose the configuration that matches your plan and requirements:
Free Trial Configuration (30 Days)
<script>
(function () {
// Free Trial (30 Days)
window.accessibilityToolbarConfig = {
// No license key needed for free trial
enablePremium: false, // Free features only
floatIconPosition: "bottom-right", // Icon position
brandColor: "#28a745",
showToolbarOnLoad: false,
enableAnalytics: true,
features: {
zoom: true, // Text zoom
darkMode: true, // Dark mode toggle
highContrast: true, // High contrast mode
bigCursor: false, // Big cursor (disabled)
hideImages: false, // Hide images (disabled)
lineHeight: true, // Adjust line height
monochrome: false, // Monochrome mode (disabled)
dyslexicFont: false, // Dyslexic font (disabled)
reduceMotion: false, // Reduce motion (disabled)
textToSpeech: false // Text-to-speech (disabled)
},
onReady: function() {
console.log("Accessly Toolbar (Free Trial) loaded successfully!");
}
};
// Load the toolbar script ONCE
var script = document.createElement("script");
script.src = "https://accessly.website/assets/js/atb001_loader.min.js";
script.async = true;
document.head.appendChild(script);
})();
</script>
Free Trial Includes: Basic accessibility features for 30 days, WCAG compliance, mobile responsiveness, and community support.
Professional Plan Configuration (₹25,000/year)
<script>
(function () {
// Professional Plan (₹25,000/year)
window.accessibilityToolbarConfig = {
// REQUIRED: Your professional license key
licenseKey: "PROFESSIONAL_LICENSE_KEY_HERE",
enablePremium: true, // Enable professional features
enableProfessional: true, // Enable Professional features
floatIconPosition: "top-right", // Icon position
brandColor: "#007bff",
showToolbarOnLoad: false, // Don\'t auto-show on load
enableAnalytics: true, // Enable usage analytics
// All features enabled except white-label
features: {
zoom: true,
darkMode: true,
highContrast: true,
bigCursor: true,
hideImages: true,
lineHeight: true,
monochrome: true,
dyslexicFont: true,
reduceMotion: true,
textToSpeech: true,
voiceSelection: true,
resetButton: true
},
// Professional features
professionalFeatures: {
speakHover: true, // Text-to-speech on hover
keyboardShortcuts: true, // Keyboard navigation
advancedAnalytics: true, // Detailed analytics
apiAccess: true // API access
},
// Callbacks
onReady: function() {
console.log("Accessly Toolbar (Professional) loaded!");
if (typeof gtag !== "undefined") {
gtag("event", "accessibility_toolbar_loaded");
}
},
onSettingsChange: function(settings) {
// Track user preferences
console.log("User changed settings:", settings);
}
};
// Load the toolbar script ONCE
var script = document.createElement("script");
script.src = "https://accessly.website/assets/js/atb001_loader.min.js";
script.async = true;
document.head.appendChild(script);
})();
</script>
Professional Plan Includes: All Free Trial features + Advanced tools, Analytics dashboard, Email support, API access, and Priority updates.
Premium Plan Configuration (₹60,000/year)
<script>
(function () {
// Premium Plan (₹60,000/year)
window.accessibilityToolbarConfig = {
// REQUIRED: Your premium license key
licenseKey: "PREMIUM_LICENSE_KEY_HERE",
enablePremium: true, // Enable all features
enableProfessional: true, // Enable Professional features
companyName: "Your Brand Name", // Your company name
brandColor: "#007bff", // Your brand color
floatIconPosition: "bottom-left", // Custom position
showToolbarOnLoad: true, // Auto-show on load
enableAnalytics: true, // Analytics
// All features enabled
features: {
zoom: true,
darkMode: true,
highContrast: true,
bigCursor: true,
hideImages: true,
lineHeight: true,
monochrome: true,
dyslexicFont: true,
reduceMotion: true,
textToSpeech: true,
voiceSelection: true,
resetButton: true
},
// All professional features
professionalFeatures: {
speakHover: true,
keyboardShortcuts: true,
customCss: true, // Add custom CSS
advancedAnalytics: true,
apiIntegration: true, // API access
enhancedAnalytics: true // Enhanced analytics
},
// Custom branding
ariaLabels: {
toggleButton: "Your Brand Accessibility Tools",
panel: "Your Brand Accessibility Settings"
},
// Customization
customClasses: {
toggleButton: "your-brand-toggle",
panel: "your-brand-panel"
},
// Advanced settings
advanced: {
useShadowDOM: true, // Better isolation
compatibilityMode: true // Enhanced compatibility
},
onReady: function() {
console.log("Premium toolbar loaded with custom branding");
}
};
// Load the toolbar script ONCE
var script = document.createElement("script");
script.src = "https://accessly.website/assets/js/atb001_loader.min.js";
script.async = true;
document.head.appendChild(script);
})();
</script>
Premium Plan Includes: All Professional features + White-label branding, Custom CSS, Advanced API access, Priority 24/7 support, 3 domains included, and Brand removal option.