Choosing Where Notifications Are Displayed on the Screen

When it comes to displaying notifications effectively, positioning plays a crucial role in ensuring visibility without disrupting user experience. WooNotif offers flexible options to define where notifications appear on different devices, allowing you to customize their placement for both desktop and mobile views.

Notification Position Settings

WooNotif divides position settings into two sections:

1. Desktop & Tablet (screens larger than 768px)
2. Phone (screens smaller than 767px)

1. Desktop & Tablet Positions

For larger screens, you can choose from the following six positions:

• Bottom – Left: Displays notifications at the bottom-left corner of the screen.
• Bottom – Right: Displays notifications at the bottom-right corner of the screen.
• Bottom – Center: Displays notifications at the center-bottom of the screen.
• Top – Left: Displays notifications at the top-left corner of the screen.
• Top – Right: Displays notifications at the top-right corner of the screen.
• Top – Center: Displays notifications at the center-top of the screen.

After selecting a position, input fields are provided to fine-tune the notification’s distance from the screen edges:

• Distance From Bottom/Top: Set the vertical offset in pixels.
• Distance From Left/Right: Set the horizontal offset in pixels.

2. Phone Positions

For smaller screens, users have two options to ensure notifications fit seamlessly:

• Top: Displays notifications at the top center of the screen.
• Bottom: Displays notifications at the bottom center of the screen.

Similar to desktop settings, you can adjust the distance from the screen edges:

• Distance From Top/Bottom: Define the vertical offset in pixels.

Key Features and Limitations

1. No Feature Restrictions:
   All position settings are available in the Lite version, allowing users full control over notification placement without requiring a Pro upgrade.
2. Device-Specific Placement:
   The plugin allows separate positioning for desktops and mobile devices, ensuring that notifications are optimized for different screen sizes.
3. Compatibility with Animations:
   Notification positions work seamlessly with animations. After the animation completes, notifications settle precisely into the specified position without any conflict.
4. No Per-Page Positioning:
   You cannot define positions for specific pages directly. However, you can create separate notifications with different positions and use the Display Conditions feature to show them on specific pages.
5. Save to Apply Changes:
   Changes take effect immediately after saving the settings.
6. No Preview Option:
   Currently, there’s no live preview for positioning adjustments within the settings. Users need to save and check changes directly on their websites.
7. Resetting Changes:
   If you need to revert unsaved changes, simply refresh the page before saving. However, there is no reset button for already saved settings.

Best Practices for Notification Positioning

To make the most out of your notification placements:

• Choose a position that aligns with your website’s design and doesn’t obstruct key elements.
• Test different positions to find the most effective spot for engaging users.
• Customize offsets to ensure notifications don’t overlap with fixed headers, footers, or other UI elements.

By taking advantage of WooNotif’s flexible positioning options, you can ensure your notifications are seen by users while maintaining a clean and professional look for your website.