Widget Positioning - Customize Your Widget Placement
✨ New Features
🎯 Flexible Widget Positioning
Four Corner Options: Position your widget in any corner of the screen
top-left- Top left cornertop-right- Top right cornerbottom-left- Bottom left cornerbottom-right- Bottom right corner (default)
Easy Configuration: Simple
data-positionattribute in your installation codeSmart Defaults: Automatically falls back to bottom-right if no position is specified
Instant Updates: Position changes take effect immediately without page reload
🔧 Simple Implementation
One-Line Setup: Add
data-position="your-choice"to your widget scriptBackward Compatible: Existing installations continue to work without changes
Validation: Invalid positions automatically default to bottom-right
Documentation: Clear examples and guidance for all positioning options
How to Use
Update Your Installation Code
Simply add the data-position attribute to your existing widget script:
🎨 Design Benefits
Better User Experience
Custom Placement: Match your site's design and layout
Reduced Interference: Avoid conflicts with other UI elements
Accessibility: Choose positions that work best for your users
Mobile Friendly: All positions work seamlessly on mobile devices
Flexible Integration
Design Harmony: Position widget to complement your site's design
Content Avoidance: Place widget away from important content areas
Brand Consistency: Choose positions that align with your brand guidelines
User Preferences: Adapt to different user interface patterns
🚀 Getting Started
For New Installations
Copy your widget installation code from the dashboard
Add the
data-positionattribute with your preferred positionPaste the code into your website's
<head>sectionTest the widget appearance and functionality
For Existing Installations
Locate your current widget script tag
Add
data-position="your-choice"to the script tagSave and refresh your website
Verify the widget appears in the new position
Testing Different Positions
Try each position option to see which works best
Test on different screen sizes and devices
Ensure the widget doesn't interfere with other elements
Consider user behavior and site layout
📱 Mobile Considerations
All positioning options work great on mobile devices:
Responsive Design: Widget adapts to mobile screen sizes
Touch-Friendly: All positions remain easily accessible
Performance: No impact on page load times
Compatibility: Works across all modern mobile browsers
🔧 Technical Details
Validation: Invalid position values automatically default to
bottom-rightPerformance: No additional JavaScript or CSS required
Compatibility: Works with all existing widget features
Future-Proof: Designed to support additional positions in the future
🎯 Best Practices
Position Selection
bottom-right: Most common and expected by users
bottom-left: Good for right-to-left language sites
top-right: Use for important announcements or high visibility
top-left: Minimal interference, subtle placement
Implementation Tips
Test the widget position on different pages
Consider your site's navigation and important content
Ensure the widget doesn't overlap with other elements
Choose positions that work well on both desktop and mobile
Ready to customize your widget placement? Update your installation code with the data-position attribute and see the difference immediately!