Changing Widget Position
Overview
Position the AllAccessible widget button anywhere on your webpage - corners, edges, or center. This guide helps you choose the best position for your site layout and avoid conflicts with other page elements.
Who This Is For
Website owners optimizing widget placement
Designers considering layout and UX
Anyone experiencing position conflicts
What You'll Learn
All 9 available positions
How to change widget position
Best practices for each layout type
Avoiding conflicts with other widgets
Available Positions
AllAccessible offers 9 position options:
Corner Positions (Most Common)
Bottom-Right (Default)
Most popular position (used by 70%+ of websites)
Expected location for help widgets
Good for left-to-right languages
Bottom-Left
Good if chat widget is on right
Works well for right-to-left languages
Less commonly used
Top-Right
Good for sites with heavy footer content
Visible immediately on page load
Professional appearance
Top-Left
Unusual but distinctive
Good for right-to-left languages with top navigation
Edge Center Positions
Bottom-Center
Centered at bottom of page
Equal distance from both sides
Good for symmetrical layouts
Top-Center
Centered at top (below header usually)
Highly visible
Can interfere with navigation on mobile
Middle-Right (Tab Style Recommended)
Extends from right edge
Always visible while scrolling
Persistent accessibility
Middle-Left (Tab Style Recommended)
Extends from left edge
Less common
Good for right-to-left languages
Center Position
Middle-Center
Dead center of viewport
Most visible but potentially intrusive
Rarely recommended
Consider only for accessibility-focused sites
📷 Grid showing all 9 positions
How to Change Position
Step-by-Step Instructions
Step 1: Access Widget Settings
Log in to app.allaccessible.org
Navigate to Sites → [Your Site] → Widget Settings
Find "Widget Position" section
Step 2: Select New Position
Click on any of the 9 position buttons
Selected position highlights in blue
Preview panel updates immediately
Step 3: Verify in Preview
Check right panel live preview
Imagine it on your actual site
Consider mobile view
Step 4: Save Changes
Click "Save Changes" button
Wait up to 1 hour for propagation
Verify on live website
📷 Position selector interface
Position Selection Guide
By Website Type
E-Commerce Stores
Recommended: Bottom-Left
Why:
Shopping cart usually bottom-right
Avoid position conflict
Both widgets accessible
Alternative: Top-Right
Above the fold visibility
Doesn't interfere with product browsing
Blogs & Content Sites
Recommended: Bottom-Right (Default)
Why:
Standard expected location
Doesn't interfere with reading
Stays out of content area
Alternative: Middle-Right (Tab)
Persistent during scrolling
Easily accessible throughout article
Corporate Websites
Recommended: Bottom-Right or Top-Right
Why:
Professional appearance
Traditional placement
Meets user expectations
SaaS Applications
Recommended: Bottom-Right
Why:
Consistent with help widgets
Doesn't interfere with app interface
Familiar to users
Avoid: Middle-center (blocks app content)
Portfolio & Creative Sites
Recommended: Middle-Right (Tab) or Bottom-Left
Why:
Creative, unique positioning
Stands out
Expresses design consideration
By Page Layout
Fixed Header/Footer Layout
Issue: Top/bottom positions might overlap
Solution:
Use middle positions (middle-right, middle-left)
Adjust with custom offsets (advanced)
Test with header/footer expanded
Full-Width Hero Sections
Issue: Widget overlaps hero image/text
Solution:
Bottom positions work best
Ensure widget color contrasts with hero
Consider tab style for persistent visibility
Sidebar Layouts
Left Sidebar: Use right-side positions
Right Sidebar: Use left-side positions or middle-right tab
Goal: Keep widget outside main content and sidebars
Modal-Heavy Sites
Issue: Modals might cover widget
Solution:
Widget has high z-index (usually appears on top)
If issues persist, contact support
Consider top positions
Avoiding Widget Conflicts
Common Conflicts
Live Chat Widgets:
If chat is bottom-right: Move accessibility to bottom-left
If chat is bottom-left: Keep accessibility bottom-right (default)
Best Solution: Coordinate with chat provider for optimal spacing
Cookie Consent Banners:
Bottom banner: Use top positions temporarily
Side banner: Use opposite side
Fixed bottom: Widget still visible above banner
Newsletter Popups:
Widget has high z-index (appears on top)
Both can coexist
Ensure neither completely blocks the other
Social Media Share Buttons:
Usually on left or in content
Bottom-right usually safe
Test on actual pages
Back to Top Buttons:
Often bottom-right (same as widget default)
Move one or the other
Or use tab style for accessibility widget
Mobile Considerations
Mobile Position Behavior
Responsive Positioning:
Widget automatically adjusts for mobile screens
Margins reduced on small screens
Touch target size increased (44x44px minimum)
Best Positions for Mobile:
✅ Bottom-right
✅ Bottom-left
⚠️ Top positions (may be under header on scroll)
⚠️ Center positions (may block content)
Test On:
iPhone (iOS Safari)
Android (Chrome)
Tablet devices
Various screen sizes
📷 Widget on mobile device
Position Testing Strategy
Before Saving
1. Use Live Preview
Check all positions in preview panel
Imagine on your actual site layout
Consider different page types (homepage, product, article)
2. Consider User Journey
Where do users need it most?
Is it discoverable but not intrusive?
Does it persist during scrolling?
3. Check Brand Guidelines
Any specific placement requirements?
Consistency with other brand elements?
Approval needed from design team?
After Saving (1 Hour Later)
1. Visual Testing
Visit homepage
Check internal pages
Test on different page templates
Verify on mobile
2. Functionality Testing
Can users easily click/tap button?
Does it open properly?
No overlap with other elements?
3. User Feedback
Ask team members
Monitor user behavior
Collect feedback if available
Position Change Examples
Example 1: Moving Due to Chat Widget
Situation:
Website has Intercom chat bottom-right
Both widgets overlap
Solution:
Before: AllAccessible bottom-right (default) After: AllAccessible bottom-left Result: Both widgets visible and accessible
Steps:
Widget Settings → Position
Click bottom-left button
Save changes
Wait 1 hour
Verify no overlap
Example 2: Switching to Tab Style
Situation:
Widget gets overlooked in corner
Want more persistent visibility
Solution:
Before: Circle button, bottom-right After: Tab style, middle-right Result: Always visible while scrolling
Steps:
Widget Settings → Shape → Tab Style
Widget Settings → Position → Middle-Right
Save changes
Verify looks good during scroll
Advanced Position Customization
Custom Offsets (Coming Soon)
Future Feature:
Adjust exact pixel position
Fine-tune spacing from edges
Responsive offset values
Workaround (Advanced Users):
Use CSS to adjust position:
#allAccessibleWidget {
bottom: 30px !important;
right: 30px !important;
}
Note: Custom CSS may be overridden by updates.
Common Questions
Q: Can I have different positions on different pages?
A: No, position is site-wide. All pages use the same position.
Q: What if the widget overlaps my content?
A: Choose a different position or adjust your page layout. The widget should never overlap important content.
Q: Can I hide the widget on certain pages?
A: Not through settings. Advanced users can use JavaScript to conditionally hide it.
Q: Does position affect accessibility?
A: All positions are equally accessible to screen readers. Visual position is preference-based.
Q: Can users move the widget themselves?
A: No. Position is set site-wide by the administrator.
Q: What if I have multiple chat/widget tools?
A: Coordinate positions so none overlap. Common solution: AllAccessible bottom-left, chat bottom-right.
Q: How long until position changes appear?
A: Up to 1 hour for server cache propagation.
Position Recommendations Summary
Website Type | Recommended Position | Alternative |
E-Commerce | Bottom-Left | Top-Right |
Blog/Content | Bottom-Right | Middle-Right (Tab) |
Corporate | Bottom-Right | Top-Right |
SaaS App | Bottom-Right | Bottom-Left |
Portfolio | Middle-Right (Tab) | Bottom-Left |
Non-Profit | Bottom-Right | Bottom-Left |
Default (Bottom-Right) works for 90% of websites!
Related Articles
Widget Customization Overview - All options
Customizing Widget Colors - Color guide
Understanding Widget Shapes - Shape selection
Mobile Widget Settings - Mobile optimization
Last Updated: October 2025
Available Positions: 9 options
Default Position: Bottom-Right
Update Time: Up to 1 hour propagation