Popup Component

The ModalTrigger component allows you to display a custom pop-up based on three specific and configurable user behaviours: MouseLeave, Scroll Percentage, and Time Delay. This versatility enables you to create tailor-made experiences that capture leads, promote content, or prevent abandonment.

🚪 MouseLeave Trigger (Exit Intent)

This pop-up type is often referred to as an Exit Intent trigger. It's highly effective for recovering potentially lost visitors by engaging them just as they are about to leave your site.

• Behaviour: The pop-up is triggered when the user's mouse pointer moves outside the boundary of the browser window (viewport).

• Purpose: Ideal for showing a special offer, a final reminder, or an email capture form right before the user navigates away from the page or closes the tab. This can significantly reduce bounce rate and increase conversions.

• Properties Configuration:

  • MouseLeave: A simple On/Off toggle to enable or disable the exit-intent behaviour.

• Key Advantage: It targets users at a critical decision point, making the offer or message feel timely and relevant.

⬇️ Scroll Trigger

The Scroll Trigger displays the pop-up based on how far down the page a user has scrolled, indicating a level of engagement with the content.

• Behaviour: The pop-up appears exactly when the user reaches a specified scroll depth down the page. The scroll depth is defined as a percentage of the total page height.

• Purpose: Use this to prompt action after a user has consumed a significant amount of content. For example, trigger an offer pop-up 60% of the way down a blog post, indicating they are genuinely interested in the topic.

• Properties Configuration:

  • Trigger: On/Off toggle to activate the scroll-based functionality.

  • Scroll %: A percentage value (e.g., 60%) that defines the exact point on the page where the modal will appear. The percentage can be easily adjusted using the increment/decrement buttons (- / +).

• Key Advantage: It ensures your message is delivered only to engaged users who have demonstrated interest by scrolling past the initial content, leading to higher quality interactions.

⏱️ Delay Trigger (Time-based)

The Delay Trigger uses a simple, yet effective, time delay to control when the pop-up is presented to the visitor.

• Behaviour: The pop-up is shown automatically after a pre-defined number of seconds has elapsed since the page finished loading.

• Purpose: This is excellent for ensuring the user has enough time to begin reading or scanning the page before being interrupted. It's often used for welcoming messages or temporary announcements.

• Properties Configuration:

  • Trigger: On/Off toggle to enable or disable the time delay functionality.

  • Seconds: A numerical value (e.g., 30 s) that sets the duration the user must be on the page before the modal appears. This can be fine-tuned with the increment/decrement buttons.

• Key Advantage: It prevents an immediate, jarring interruption, allowing the user to settle in before engaging with the pop-up message.