Documentation
Install GSBKit
Add the widget with one script tag. Configure the color, position, and title when needed.
Quick Start - Any Website
Paste this before the closing </body> tag. This uses the default floating bottom-right launcher:
<script src="https://gsbkit.com/widget/gsbkit.js" data-brand="#2563eb" data-position="bottom-right" async> </script>
No accessibility widget can promise legal outcomes. GSBKit helps you improve your accessibility posture the right way: scan your site, document issues, support visitors with accessibility controls, and track remediation over time. Source-code and content fixes still require developer work, human review, and assistive-technology testing where appropriate.
Navbar, Footer, or Page Button
Add a target element where the launcher should appear, then point the script at it. Use navbar for a header button and inline for a footer or information-page slot. If the selector is missing on a page, GSBKit falls back to the floating bottom-right launcher instead of breaking the page.
<button id="gsbkit-accessibility" type="button" aria-label="Accessibility options"></button> <script src="https://gsbkit.com/widget/gsbkit.js" data-position="navbar" data-target="#gsbkit-accessibility" async> </script>
Placement Rules
- Floating positions support bottom left, bottom right, top left, top right, middle left, and middle right.
- Visitors can drag the floating launcher when they need to move it away from page content. The saved position is stored in that visitor's browser.
- Navbar mode is best for an existing header button target. Inline mode is best for a footer button or an exact slot inside page content.
- Navbar and inline modes require
data-target. Missing or invalid targets fall back to the floating bottom-left launcher.
Visibility Rules
- The widget shows on all pages by default.
- Use selected hidden paths only when the site owner intentionally does not want the widget on those pages.
- Use page-specific position rules when a page needs the button moved instead of hidden.
- Path patterns support exact paths like
/checkoutand prefix groups like/admin*.
<script
src="https://gsbkit.com/widget/gsbkit.js"
data-position="bottom-right"
data-visibility="hide-selected"
data-hidden-paths='["/checkout","/admin*"]'
data-page-rules='[{"path":"/contact","position":"middle-right"}]'
async>
</script>Next.js
In app/layout.tsx:
import Script from 'next/script' // inside <body>: <Script src="https://gsbkit.com/widget/gsbkit.js" data-brand="#2563eb" data-position="bottom-right" strategy="lazyOnload" />
WordPress
Go to Appearance - Theme File Editor - footer.php and paste the script tag before </body>. You can also use an insert headers and footers plugin.
Wix and Squarespace
Add the same script through each platform's custom code area, set it to load on every page, and place it before the closing body tag when the platform asks for placement. If your plan does not allow custom JavaScript, use the public scan first and send the snippet to the person who manages your site.
API and GitHub Action
The public scanner endpoint accepts a JSON body with a public URL and returns score, issue count, violations, and the automated-review note.
curl -X POST https://gsbkit.com/api/scan \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com"}'Admin-approved Developer automation can use the GSBKit GitHub Action to scan a public URL and post one pull-request comment. The maintained example lives in the changelog and the repository docs under docs/cli-and-github-action.md.
Configuration Attributes
| Attribute | Default | Description |
|---|---|---|
| data-brand | #2563eb | Widget accent color. Use any hex color. |
| data-position | bottom-right | bottom-left, bottom-right, top-left, top-right, middle-left, middle-right, navbar, or inline. Use inline for footer or page-body placement. |
| data-target | - | CSS selector for navbar/inline mode, for example #gsbkit-accessibility. Missing targets fall back to a floating bottom-right button. |
| data-visibility | all | Use hide-selected only when the owner intentionally hides the widget on selected paths. |
| data-hidden-paths | - | JSON array of hidden path patterns, for example ["/checkout","/admin*"]. Only used with hide-selected. |
| data-page-rules | - | JSON array of page-specific position rules, for example [{ "path": "/contact", "position": "bottom-left" }]. |
| data-title | Accessibility Menu | Panel header text. |
| data-site-id | - | Your site ID for analytics on paid plans. |
Trust Resources
FAQ
Does GSBKit slow down my site?
No. The widget is loaded async and does not block rendering.
Do visitor preferences persist?
Yes. Preferences are saved in the visitor's own browser localStorage.
Does the widget provide legal certification?
No automated tool can promise legal outcomes. GSBKit improves usability and helps your accessibility posture. See our Terms for details.