Advanced Embedding Options

Fine-tune your widget’s appearance and behavior with these advanced configuration options.

Complete Configuration Template


<script src="https://cdn-01.accessiblykit.com/a11y-widget.bundle.js" 
  data-widget-id="YOUR_WIDGET_ID"
  data-api-url="https://api.accessiblykit.com"
  data-theme="light"
  data-language="en"
  data-widget-display-type="FULL"
  data-profile=""
  data-position="bottom-right"
  data-enable-custom-trigger="false"
  data-custom-trigger-selector=""
  data-desktop-horizontal-position="RIGHT"
  data-desktop-vertical-position="LOWER"
  data-desktop-offset-x="5"
  data-desktop-offset-y="5"
  data-mobile-horizontal-position="RIGHT"
  data-mobile-vertical-position="LOWER"
  data-mobile-offset-x="5"
  data-mobile-offset-y="5"
  data-button-color-mode="SOLID"
  data-button-primary-color="#504CFF"
  data-button-secondary-color="#A94CFF"
  data-button-gradient-direction="TO_RIGHT"
  data-button-size="SMALL"
  data-button-icon-type="WALKING"
  data-show-over-sized-widget-button="true">
</script>

Configuration Categories

Display

Display Options


data-widget-display-type="FULL|COMPACT|BUTTON_ONLY"
data-theme="light|dark|auto"
data-show-over-sized-widget-button="true|false"

FULL: Complete widget interface
COMPACT: Collapsed panel
BUTTON_ONLY: Just the toggle button

Positioning


data-position="bottom-right|bottom-left|top-right|top-left"
data-desktop-offset-x="10"
data-desktop-offset-y="10"
data-mobile-offset-x="5"
data-mobile-offset-y="5"

Pixel values control widget distance from screen edges.

Appearance


data-button-color-mode="SOLID|GRADIENT"
data-button-primary-color="#504CFF"
data-button-secondary-color="#A94CFF"
data-button-icon-type="DEFAULT|WALKING|WHEELCHAIR"

Use hex color codes for complete brand matching.

Behavior


data-enable-custom-trigger="true|false"
data-custom-trigger-selector="#my-button"
data-auto-init="true|false"
data-enable-keyboard-shortcuts="true|false"

Trigger the widget from your own UI elements.

Implementation Guide

Custom Trigger Example

Add a button to your page:


<button id="a11y-trigger">Toggle Accessibility</button>

Configure the widget:


<script src="https://cdn-01.accessiblykit.com/a11y-widget.bundle.js"
  data-enable-custom-trigger="true"
  data-custom-trigger-selector="#a11y-trigger">
</script>

Dynamic Profile Loading

Initialize with specific profile enabled:


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

Troubleshooting

⚠️

Always test mobile and desktop configurations separately.

Common issues:

Widget not appearing? Check:
- Correct data-widget-id
- No JavaScript errors in console
- CSP allows our CDN
Custom trigger not working?
- Verify selector matches exactly
- Ensure element exists when script loads
Styling issues?
- Check for CSS conflicts
- Verify color values are valid hex codes