HTML Embed Integration

Basic Implementation

1. Copy the Embed Code

<script src="https://cdn-01.accessiblykit.com/ally-widget.bundle.js"
  data-widget-id="05e86a3f-2c94-4071-b971-e2947269ddfd">
</script>

2. Paste Before </body>

Place this code just before your closing </body> tag for optimal performance.

Pasting the embed code in HTML (Click to play)

Configuration Options

<script src="https://cdn-01.accessiblykit.com/ally-widget.bundle.js"
  data-widget-id="05e86a3f-2c94-4071-b971-e2947269ddfd"
  data-theme="light|dark|auto"
  data-language="en">
</script>

<script src="https://cdn-01.accessiblykit.com/ally-widget.bundle.js"
  data-widget-id="05e86a3f-2c94-4071-b971-e2947269ddfd"
  data-position="bottom-right|bottom-left"
  data-button-size="small|medium|large"
  data-enable-keyboard-shortcuts="true|false"
  data-auto-init="true|false">
</script>

Best Practices

1. Placement Matters

   • Always load the script before </body>
   • Avoid async/defer attributes

2. Performance Tips

<link rel="preconnect" href="https://cdn-01.accessiblykit.com">
<link rel="preload" as="script" href="https://cdn-01.accessiblykit.com/ally-widget.bundle.js">

3. Troubleshooting
   • If widget doesn’t appear, check browser console for errors
   • Verify your widget ID is correct
   • Ensure no content security policies are blocking the script

JavaScript API Control

After embedding, you can control the widget programmatically:

// Open widget
window.AccessibilityWidgetAPI?.openWidget();
 
// Enable specific profile
window.AccessibilityWidgetAPI?.enableProfile('motor_impaired');
 
// Check if loaded
if (typeof AccessibilityWidgetAPI !== 'undefined') {
  // API is available
}