Widget Customization Overview
Overview
AllAccessible lets you customize the accessibility widget to match your brand and website design. This guide explains all available customization options and how to access them.
Who This Is For
AllAccessible users wanting to brand their widget
Web designers matching widget to site design
Anyone personalizing their accessibility tools
What You'll Learn
What can be customized in the widget
How to access customization settings
Understanding update propagation
Customization best practices
What You Can Customize
Visual Appearance
Widget Button Shape:
Circle (default)
Square with rounded corners
Tab style (extends from edge)
Icon Selection:
Universal access symbol (default)
Wheelchair user
Wheelchair side view
Vision/eye icon
Settings/gear icon
Globe icon
Heart icon
Person in circle
Person with cane
Color Scheme:
Background color
Icon color
Hover color
Focus color
Position:
9 position options (corners, edges, center)
Bottom-right is default
📷 Widget customization options visual
Advanced Options
Accommodation Requests:
Enable/disable accommodation request form in widget
Requires add-on purchase
White-Label Mode:
Remove AllAccessible branding
Requires White Label add-on ($29/month)
Language Settings:
Default language for widget
Auto-detect browser language
Accessing Customization Settings
Step 1: Navigate to Widget Settings
Log in to app.allaccessible.org
Click Sites in the left menu
Select your website
Click Widget Settings tab
📷 Dashboard navigation to widget settings
Step 2: Customize Your Widget
The settings page includes:
Left Panel (Customization Options):
Widget shape selector
Icon gallery
Position grid
Color pickers
Additional settings
Right Panel (Live Preview):
Real-time preview of your changes
Shows how widget will appear
Updates as you make selections
📷 Widget settings interface with preview
Step 3: Save Your Changes
Make all desired customizations
Review in live preview
Click Save Changes button
Success message appears
Important: Changes take up to 1 hour to propagate to your live website due to performance caching.
Understanding Widget Update Caching
Why Updates Take Time
Similar to accessibility statements, widget configurations are cached for optimal performance:
Cache Layers:
Database: Saves instantly
Server Cache: 1 hour TTL
Browser Cache: 24 hours for repeat visitors
Propagation Timeline
After saving widget changes:
Time | Status |
0 min | Saved to database ✅ |
0-5 min | Visible in dashboard preview ✅ |
5-60 min | Server cache updating ⏳ |
60 min | New visitors see changes ✅ |
24 hours | All visitors see changes ✅ |
Plan Ahead: Make customization changes at least 1 hour before you need them live.
What's Available on Each Plan
Free Plan
Customization:
❌ Limited customization
❌ No color branding
❌ Fixed position
❌ Standard icon only
Available:
✅ Basic widget functionality
✅ All 41 accessibility features
Starter Plan ($10/month)
Customization:
✅ All widget shapes
✅ All icon options
✅ Full color customization
✅ All position options
✅ Language settings
Not Included:
❌ White-label (branding removal)
❌ Accommodation requests
❌ Advanced API customization
Growth Upgrade ($19/month total)
Everything in Starter, plus:
✅ Enhanced color options
✅ Priority cache updates
✅ Advanced positioning
With Add-Ons
White Label Add-On (+$29/month):
✅ Complete AllAccessible branding removal
✅ Custom logo upload (coming soon)
✅ Fully branded reports
Accommodation System (+$49-399/month):
✅ Accommodation request form in widget
✅ Custom request workflows
✅ Management dashboard
Customization Best Practices
1. Match Your Brand Colors
Use your website's color scheme:
Background: Primary brand color
Icon: Contrasting color (ensure visibility)
Hover: Slightly darker shade
Focus: High-contrast accent color
Accessibility Check:
Background and icon must have 4.5:1 contrast ratio minimum
Use a contrast checker tool to verify
Test with color blindness simulators
2. Choose the Right Position
Consider your website layout:
Bottom-right (default): Works for most sites
Bottom-left: If chat widget is on right
Top-right: For minimal bottom content
Side tab: Persistent visibility
Avoid:
Blocking important content
Overlapping with other widgets (chat, cookie notice)
Positions that require excessive cursor movement
3. Select Appropriate Icons
Icon choice sends a message:
Universal access (default): Standard, recognizable
Wheelchair: Emphasizes physical disabilities
Eye/Vision: Focus on visual accessibility
Heart: Emphasizes care and inclusion
Settings/Cogs: Technical, functional approach
Recommendation: Stick with the default unless you have a specific brand reason to change.
4. Test Before Finalizing
Before saving:
Use live preview to see changes
Imagine it on your actual site
Consider mobile view
Check color combinations
After saving (1 hour later):
Test on actual website
Check desktop and mobile
Verify all colors look good
Ensure no overlap with other elements
Common Customization Scenarios
Scenario 1: E-Commerce Store
Goals: Match brand, avoid cart interference
Configuration:
Shape: Circle
Position: Bottom-left (cart usually bottom-right)
Colors: Brand primary color
Icon: Default accessibility symbol
Scenario 2: Corporate Website
Goals: Professional, subtle
Configuration:
Shape: Square
Position: Bottom-right
Colors: Muted blues/grays
Icon: Default or settings icon
White-label: Enabled
Scenario 3: Non-Profit Organization
Goals: Warm, welcoming
Configuration:
Shape: Circle
Position: Bottom-right
Colors: Warm colors (orange, teal)
Icon: Heart
Features: All enabled
Scenario 4: Agency White-Label
Goals: Completely branded for client
Configuration:
Shape: Client preference
Position: Client preference
Colors: Client brand colors
Icon: Client preference
White-label: Enabled (remove all AllAccessible branding)
Quick Reference
Available Shapes
Circle: Classic, friendly (60x60px)
Square: Modern, professional (60x60px)
Tab: Persistent, edge-based (80x50px)
Available Positions
Top-left, Top-center, Top-right
Middle-left, Middle-center, Middle-right
Bottom-left, Bottom-center, Bottom-right (default)
Available Icons
Default (Universal Access Symbol)
Wheelchair
Wheelchair Side
Vision/Eye
Settings/Cogs
Globe
Heart
Person in Circle
Person with Cane
Color Options
Background Color
Icon Color
Hover State Color
Focus State Color
Frequently Asked Questions
Q: Can I upload my own custom icon/logo?
A: Not currently. You can choose from 9 pre-designed icons. Custom logo upload is planned for a future release.
Q: How long until my changes appear on my website?
A: Up to 1 hour for server cache propagation. Up to 24 hours for all repeat visitors to see changes.
Q: Can I customize different subdomains differently?
A: Yes! Each subdomain can have its own widget configuration.
Q: Can I preview changes before publishing?
A: Yes! The live preview panel shows changes in real-time before you save.
Q: What if I don't like my changes?
A: Click Cancel instead of Save, or simply change back and save again.
Q: Can I customize which features appear in the widget?
A: Feature selection customization is coming soon. Currently, all features for your plan appear.
Q: Does customization affect widget performance?
A: No. Customization is cosmetic only and doesn't impact loading speed.
Q: Can I hide the widget on certain pages?
A: Not through settings. You can use JavaScript to hide it conditionally (advanced).
Next Steps
Ready to customize your widget?
Essential Customizations (10 minutes):
Choose widget colors - Match your brand
Select widget position - Optimal placement
Pick an icon - Right symbolism
Advanced Customizations (30 minutes):
4. Test on multiple devices
5. Get team feedback
6. A/B test positions
7. Monitor user engagement
Related Articles
Customizing Widget Colors - Color selection guide
Changing Widget Position - Position best practices
Setting Widget Language - Multi-language setup
Understanding Widget Features - Available features
Last Updated: October 2025
Availability: Starter plan and above
Update Time: Up to 1 hour for changes to propagate