Webflow Integration Guide

Quickly add powerful accessibility tools to your Webflow site.

Step-by-Step Integration

Step 1: Log in to Webflow

Step 2: Open Site Settings

From your site dashboard:

Select your site.
Click on Settings.

Step 3: Navigate to Custom Code

Under the Settings menu:

Click Custom Code in the left sidebar.

Step 4: Paste the Embed Code

Copy your unique AccessiblyKit embed code from your dashboard:


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

Paste this script into the Footer Code section.

Adding custom code in Webflow (Click to play)

Step 5: Save and Publish

Click Save Changes and publish your site to activate the widget.

You can easily customize your widget using additional parameters:


<script src="https://cdn-01.accessiblykit.com/a11y-widget.bundle.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-theme="auto"
  data-language="en"
  data-position="bottom-left"
  data-button-size="MEDIUM"
  data-button-color-mode="SOLID"
  data-button-primary-color="#504CFF">
</script>

Available Configuration Attributes

Parameter	Description	Default Value
`data-theme`	Theme of widget (`auto`, `light`, `dark`)	`auto`
`data-language`	Language (ISO code, e.g., `en`, `es`)	`en`
`data-position`	Widget position (`bottom-right`, etc.)	`bottom-right`
`data-button-size`	Size of the widget button	`SMALL`
`data-button-color-mode`	Color style (`SOLID`, `GRADIENT`)	`SOLID`
`data-button-primary-color`	Primary color (Hex)	`#504CFF`

Troubleshooting Tips

⚠️

Resolve common issues quickly:

Widget not appearing? Ensure your site is published.
Conflicts? Verify no conflicting custom scripts are present.
Incorrect styling? Double-check color and appearance parameters.

Using the JavaScript API

Interact programmatically with the widget using the provided API:


// Open widget interface
window.AccessibilityWidgetAPI?.openWidget();
 
// Activate specific profile
window.AccessibilityWidgetAPI?.enableProfile('color_blind');
 
// Reset widget features
window.AccessibilityWidgetAPI?.resetAllFeatures();

Need Further Support?

For detailed customizations, visit our Developer Documentation or reach out to our Support Team.

Need Expert Help?

Schedule a support session or attend a live webinar.

Schedule Support