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.
Live Preview - https://pop-up.framer.website/
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.
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.
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.
Chehak Singla
