Integrations
WordPress
WordPress is the most popular website builder in the world. If your website is built on WordPress, AccessiLens has a dedicated plugin that makes installation simple — no technical knowledge needed. A plugin is a small add-on that you install through your WordPress control panel, just like installing an app on your phone.
Install the WordPress plugin
Download the official AccessiLens WordPress plugin from your dashboard or from the WordPress plugin directory.
Log into your WordPress admin panel (usually at yourwebsite.com/wp-admin).
Go to Plugins in the left menu, then click 'Add New', then 'Upload Plugin'.
Select the downloaded file, click 'Install Now', then click 'Activate'.
A new 'AccessiLens' menu item will appear. Click it, paste your Site ID (found in your AccessiLens dashboard), and save.
No coding required
The plugin automatically places the accessibility code on every page of your WordPress site. You do not need to touch any code or hire a developer.
Where to find your Site ID
Log into your AccessiLens dashboard, click on 'Sites', and your unique Site ID will be displayed next to your website name.
Shopify
Shopify is a popular platform for online stores. Adding AccessiLens to your Shopify store protects you legally and makes your store usable for customers with disabilities — a group that represents significant purchasing power.
Add AccessiLens to your Shopify theme
Log into your Shopify Admin panel.
Click 'Online Store' in the left menu, then click 'Themes'.
Click the three dots (...) next to your current (live) theme, and select 'Edit Code'.
In the file list on the left, find and click on 'theme.liquid'.
Scroll to the very bottom of that file, and paste the AccessiLens code just above the final </body> line.
Click 'Save' in the top right corner.
Covers your entire store
Adding the code to theme.liquid means it will appear on every page — your homepage, product pages, cart, and checkout — with no extra steps.
Not sure where to find theme.liquid?
In the Shopify code editor, look for a folder called 'Layout' on the left side. The theme.liquid file lives inside it.
Wix
Wix is a drag-and-drop website builder. While Wix doesn't allow you to directly edit code the way traditional platforms do, it does provide a 'Custom Code' section where you can add third-party tools like AccessiLens.
Add custom code in Wix
Log into your Wix account and open your website editor.
Click the Settings icon (the gear icon) in the left menu.
Scroll down and click on 'Custom Code'.
Click '+ Add Custom Code' in the top right.
Paste your AccessiLens code, name it 'AccessiLens', and under 'Add Code to', choose 'Body - end'.
Click 'Apply', then publish your site.
Wix Premium required
The ability to add custom code is only available on paid Wix plans. If you are on the free plan, you will need to upgrade first.
What does 'Body - end' mean?
This tells Wix where on the page to place the code. 'Body - end' means it loads after all your other content, which is the recommended position for AccessiLens.
Squarespace
Squarespace is a design-focused website builder. It has a built-in area called 'Code Injection' where you can add custom code like AccessiLens to every page of your site at once.
Add AccessiLens via Code Injection
Log into your Squarespace account and go to your website's main menu.
Click 'Settings', then click 'Advanced', then select 'Code Injection'.
Paste your AccessiLens code into the 'Footer' text box.
Click 'Save' in the top left corner.
Squarespace Business plan or higher
Code Injection is only available on Squarespace Business, Basic Commerce, and Advanced Commerce plans. It is not available on the Personal plan.
Why paste in the Footer section?
The Footer section in Code Injection adds your code to the bottom of every page on your site automatically. This is the ideal placement for the AccessiLens script.
Weebly
Weebly is a straightforward drag-and-drop website builder. It has a section in its settings where you can add custom code to the footer of every page, making AccessiLens installation quick and easy.
Add via Weebly SEO settings
Log into your Weebly account and open your site editor.
Click 'Settings' in the top navigation bar.
Click 'SEO' in the left sidebar.
Scroll down to the section called 'Footer Code'.
Paste your AccessiLens code into that text box.
Click 'Save', then publish your site.
What is Footer Code?
Footer Code is Weebly's way of letting you add custom functionality to your site. Code placed here is added to every page automatically.
Speed impact
AccessiLens is designed to load without slowing down your website. Visitors will not notice any difference in page load speed.
Framer
Framer is a professional design and website publishing tool popular with designers and agencies. It supports adding custom code through its Site Settings panel, making AccessiLens easy to install.
Add AccessiLens in Framer Site Settings
Open your Framer project and click on 'Site Settings' (usually accessible from the top menu).
Click on the 'General' tab.
Scroll down to the 'Custom Code' section.
Paste your AccessiLens code in the 'End of <body> tag' input.
Save your settings and publish your site.
Framer plan requirement
Adding custom code in Framer requires a paid plan (Mini, Basic, or Pro). It is not available on the free tier.
Publish to see changes
In Framer, changes are only visible on your live website after you publish. Make sure to click 'Publish' after saving your settings.
BigCommerce
BigCommerce is an enterprise-level online store platform. It includes a built-in tool called 'Script Manager' that makes adding third-party scripts like AccessiLens straightforward and organised.
Add via Script Manager
Log into your BigCommerce admin panel.
In the left sidebar, go to 'Storefront', then click 'Script Manager'.
Click 'Create a Script' in the top right.
Give the script a name (e.g., 'AccessiLens'), set 'Location on Page' to 'Footer', and 'Select pages where script will be added' to 'All Pages'.
Set 'Script category' to 'Essential', then paste your AccessiLens code into the 'Script contents' box.
Click 'Save'.
Covers your whole store
Setting the script to run on 'All Pages' ensures every visitor — on product pages, the cart, and checkout — benefits from accessibility improvements.
Why 'Essential' category?
Marking the script as 'Essential' ensures it loads even when visitors have opted out of non-essential cookies, which is important for accessibility tools.
HubSpot CMS
HubSpot CMS is a website and marketing platform used by businesses to manage their websites. It allows you to add custom code to the footer of all pages through its site settings, making AccessiLens easy to install globally.
Add AccessiLens to your HubSpot site footer
Log into your HubSpot account.
Click the Settings icon (the gear icon) in the top navigation bar.
In the left sidebar, navigate to 'Website', then click 'Pages'.
If you manage multiple websites in HubSpot, make sure to select the correct domain from the dropdown at the top.
Scroll down to find the 'Site footer HTML' section.
Paste your AccessiLens code into that text box and click 'Save'.
Selecting the right domain
If you manage more than one website from your HubSpot account, it is important to select the correct domain before pasting the code. Otherwise, AccessiLens may appear on the wrong site.
Changes apply automatically
Once saved, the AccessiLens toolbar will appear on every page of your selected HubSpot site without any further action required.
React / Next.js & Modern Frameworks
Modern websites built with frameworks like React, Next.js, or Vue work differently from traditional websites. Instead of reloading the entire page when you navigate, they update only parts of the screen. AccessiLens is fully compatible with this approach and automatically detects when the page content changes, re-checking for accessibility issues each time.
Next.js App Router setup
Open your root layout file — this is typically a file called layout.tsx in your src/app/ folder.
Import the Script component from 'next/script' at the top of your file.
Add the AccessiLens Script tag inside your layout, just before the closing </body> tag, using strategy='lazyOnload' so it does not slow down initial page loads.
Replace YOUR_SITE_ID with the actual Site ID from your AccessiLens dashboard.
import Script from 'next/script';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://accessilens-ai.com/widget.js?id=YOUR_SITE_ID"
strategy="lazyOnload"
/>
</body>
</html>
);
}Works with server-side rendering
AccessiLens is compatible with both server-rendered and client-rendered Next.js applications. No special configuration is needed beyond adding the script tag.
Using the older Pages Router?
If your Next.js project uses the older 'Pages Router' structure (with a _app.tsx or _document.tsx file), add the script tag inside the <Head> component in your _document.tsx file.
Custom HTML Website
If your website was built from scratch using plain HTML and CSS files — without any website builder or framework — adding AccessiLens is as simple as pasting one short line of code into your main HTML file.
Add to your HTML file
Open your website's main HTML file (often called index.html) in a text editor.
Scroll to the very bottom of the file and find the line that says </body>.
Paste the AccessiLens script tag on the line directly above </body>.
Save the file and upload it back to your web host.
<!-- AccessiLens Widget -->
<script
src="https://accessilens-ai.com/widget.js?id=YOUR_SITE_ID"
defer
></script>
<!-- End AccessiLens -->Zero effect on page speed
The 'defer' attribute in the script tag tells the browser to load AccessiLens only after your page content has fully loaded. This means visitors see your page at full speed with no delays.
What is YOUR_SITE_ID?
Replace YOUR_SITE_ID with the unique identifier found in your AccessiLens dashboard under 'Sites'. Each website you register has its own unique ID.