Order Notification Pro 1

This section lets you control every visual and functional aspect of your order notification popups — from animations and timing, to design, positioning, and the users/products displayed.

---

1. General Settings

These options control the base behavior and layout of the notifications.

• Show Section On Mobile Device: Toggle to enable or disable notifications on mobile. Use this if you want to prevent crowding on smaller screens.

• Disable Progress Bar: If enabled, the visual progress bar indicating how long the popup will stay visible is removed.

• Position: Choose where the popup appears: Left or Right.

• Show Popup Every (Seconds): 30 Sets the time interval between popups. Every 30 seconds, a new notification will appear (if there are more to show).

• Notification Border Radius: 5px Controls the roundness of the notification box corners.

---

2. Heading Settings

• Heading Text: "Latest Orders" Sets the title at the top of the notification area.

---

3. Animation Settings

• Notification Animation: Fade-in Fade-out Smooth entry and exit animation for each popup.

• Progress Animation / Transition Duration: 15000ms This sets how long each popup is displayed (15 seconds), which also controls the progress bar fill animation.

---

4. Gradient Settings

To add a gradient background:

• Enable Gradient Background Color Notification: ✅

• Gradient Start Color: #FAFAFA

• Middle Color: #F7F7F7

• End Color: #E6E6E6

• Gradient Degrees: 45° – controls the direction of the gradient flow.

If you're using both Glassmorphism and Gradient, consider carefully how they blend for readability.

---

5. Glassmorphism Settings

This adds a modern, semi-transparent, blurred background effect.

• Enable Glassmorphism: ✅

• Blur: 10px

• Brightness: 0.9 (slightly dimmer)

• Border Width: 1px

• Border Color: #FFFFFF

This creates a frosted-glass look while still showing background content subtly.

---

6. Product & User Settings

These control which products and user names appear in your notifications.

• Products To Show: Example list: Elixir Serum, Facial Cream, Invisible Shield These products will rotate in your fake notification feed.

• Users Names / Info: List of names with locations, separated by a pipe | Example: Noah (USA) | James (USA) | Alba (Spain) The app randomly rotates through these to create the notifications.

Make sure the names and countries sound believable and diverse.

---

7. Text Settings

These settings allow you to customize texts and links inside the notification.

• Verify Text: Verify Use this for a small CTA link — e.g., leading to product verification, trust badge, or FAQs.

• Enable Verify Arrow: ✅ Adds a subtle arrow icon next to the "Verify" link.

• Verify Text URL: / Link to wherever you want the user redirected when they click "Verify."

• Verify Text Color: #3155FF

• Verify Hover Color: #0909B7

• Enable Underline Product Name Title: ✅ Adds an underline to the product name inside the popup for emphasis.

• Enable X Close Button: ✅ Allows users to manually close the notification.

• Close Button Color: #0F1729

---

8. Timing Settings

• Page Loads Notification Time To Show: 10000ms Notification will appear 10 seconds after the page finishes loading. Adjust as needed based on visitor behavior.

---

9. Color Settings

• Background Color: #EFEFEF Soft light grey for a clean and unobtrusive background.

• Text Color: #111111 Deep black for strong contrast and readability.

• Progress Bar Color: #303030 A dark color that contrasts well with light backgrounds.

---

Summary

The Order Notification Pro 1 system is a powerful psychological trigger that helps:

• Create urgency and FOMO

• Add credibility and social proof

• Keep users engaged longer on-site

With full control over:

• Animation speed and behavior

• Layout, spacing, and position

• Colors, gradients, glass effects

• Realistic user and product rotation

…it offers a modern, polished experience with minimal dev work.