Widget Customization Guide

Your widget,
your brand.

CivicComply's accessibility widget works on any government website — and it's designed to look like it belongs there. Change colors, styles, and behavior with a single line of configuration.

No CSS required
One attribute, four variants
WCAG 2.1 AA compliant
Works on any CMS
1 How It Works 2 Button Variants 3 Configuration 4 Our Branding 5 Color Tokens 6 Live Examples
How It Works

Two buttons. Every PDF link.
Zero configuration headaches.

The widget scans your page for PDF links and injects one of two pill-shaped buttons next to each one. Which button appears depends on whether an accessible version of that document exists.

Accessible version available

CivicComply has processed this document and an accessible HTML version exists. Clicking opens the accessible version immediately — no form, no wait.

Instant access — no friction
Accessible version not yet available

No accessible version exists yet. Clicking opens a brief form — name, email, and optional accessibility notes. Your agency is notified immediately and the request is tracked in your CivicComply dashboard.

Documented request — tracked in dashboard
💡
Why a forward-leaning figure, not a wheelchair? The ISO 21902 dynamic accessibility symbol represents accessibility broadly — visual, cognitive, and physical. The wheelchair symbol communicates only mobility impairment. Since CivicComply serves users across the full spectrum of accessibility needs, the dynamic figure is the more accurate and inclusive choice.
Button Variants

Four styles.
Any website.

Government websites come in every color scheme imaginable. Choose the variant that fits yours — or let us suggest one based on your brand colors.

Green
High visibility. Best on white or light-gray backgrounds. Strong accessibility signal.
Default
Navy
Monochromatic. Ideal for blue or navy branded sites where green would clash.
Mono
Dark
White-on-dark. For dark-mode interfaces or dark-background page sections.
Mono
Ghost
No fill — fully neutral. Works on any background color without introducing new color to the page.
Mono
✦
Not seeing your brand colors? Enterprise and Agency plan customers can request a custom color variant. Contact your account manager or email support@civiccomply.com with your brand's hex values.
Configuration

One script tag.
All your settings.

Everything is controlled by data- attributes on the script tag. Paste it once, set your options, and you're done.

HTML
<script src="https://cdn.civiccomply.com/widget.js" <!-- Required --> data-site-key="YOUR_SITE_KEY" <!-- Styling --> data-button-variant="green" <!-- green | navy | dark | ghost --> data-mirror-prefix="/civiccomply" <!-- folder where accessible versions live --> <!-- Behavior --> data-scan-on-load="true" <!-- scan page immediately on load --> data-modal-theme="light" <!-- light | dark --> data-debug="false" <!-- verbose console logging for testing --> ></script>

All configuration options

Attribute Values Description
data-site-key Your unique key Required. Found in your CivicComply dashboard under Settings → Site Keys.
data-button-variant greendefault navy dark ghost Controls the color scheme of both the Accessible and Request Access buttons.
data-mirror-prefix /civiccomply (default) The folder prefix where CivicComply pushes accessible HTML versions. Change only if your server uses a different path.
data-modal-theme lightdefault dark Controls the appearance of the request form modal.
data-scan-on-load truedefault false If true, the widget scans the page immediately on load. Set to false for SPAs that load content dynamically.
data-icon-style dynamicdefault static Controls which accessibility figure is shown on the Request Access button. dynamic uses ISO 21902; static uses the traditional ISA symbol.
data-debug falsedefault true When true, logs detailed information to the browser console. Use during installation to verify the widget is working correctly.
🔑
Where to find your site key: Log into your CivicComply dashboard, go to Settings → Site Keys, and click Copy next to your domain. If you haven't set up a site key yet, click Add Domain to create one.
Our Branding

The CivicComply mark.

Our brand mark — a bold C with a green checkmark in the open space — appears in the modal footer on free accounts. Here's what it looks like and where it appears.

64px
App icon
32px
Favicon
On dark
No background
Mark only

Where our branding appears

Modal footer

A small "Accessibility services by CivicComply" line at the bottom of both the available version modal and the request form modal. Links to civiccomply.com.

Accessibility services by CivicComply
Remediated document watermark

A subtle CivicComply watermark is added to the footer of accessible HTML versions we produce. This marks documents as CivicComply-certified accessible.

CivicComply
Accessible version
🏷️
Want to remove our branding? Agency and Enterprise plan customers can enable white-label mode to remove the CivicComply attribution from both the modal footer and document watermarks. Upgrade your plan →
Color Tokens

CivicComply color system.

All widget colors are driven by CSS custom properties. For enterprise custom variants, these are the tokens your team will reference.

Brand colors

--navy
#0f2d5e
--navy-mid
#1a3f78
--navy-light
#e8eef8
--green
#4ade80
--green-dark
#15803d

Button tokens — green variant

CSS
/* Applied automatically when data-button-variant="green" */ [data-cc-variant="green"] { --cc-avail-bg: #dcfce7; --cc-avail-border: #86efac; --cc-avail-text: #15803d; --cc-avail-dot: #15803d; --cc-avail-dot-check: white; --cc-req-text: #475569; --cc-req-border: #cbd5e1; --cc-req-figure: #475569; }
Live Examples

See it in context.

Three real-world agency scenarios — each using a different variant to match its site's visual identity.

Green variant — standard government site

browardmpo.org/documents
Documents & Publications
Key planning documents for the Broward Metropolitan Planning Organization.
Transportation Plans

Navy variant — blue-branded agency

pbctpa.org/plans
Planning Documents
Official plans and studies published by the Palm Beach Transportation Planning Agency.
Long Range Plans

Ghost variant — minimal site with tight design constraints

johnsoncitympo.gov/resources
Public Resources
Meeting materials, plans, and official documents for public review.
2045 Plans