---
title: "Smart Popup — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Chehak Singla · Interactive. Display custom pop-up based on behaviour"
canonical: "https://framer.elliotli.dev/component/popup-component"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Smart Popup

# Smart Popup

Display custom pop-up based on behaviour

[View on Framer](https://framer.com/marketplace/components/popup-component/?via=elliot-li)

![Smart Popup preview image 1](https://framer.elliotli.dev/og/component/popup-component/2c8942309b12ba62/1600x1200.jpg)

## Summary

Display custom pop-up based on behaviour

## Description

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/**](https://pop-up.framer.website/)

popup component tutorial

## 🚪 MouseLeave Trigger (Exit Intent)

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-3d8l6ndq-piWoX1KLFVaNvfZz1pbqQQBcqX71ub)

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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-3d8l6ndq-boSk7bGpX8v1CgUVcvDgwj9LfueOoJ)

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)

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-3d8l6ndq-jzi2lhG6AOLuiMQJwZ0TMggCjPcb4O)

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4598

## Details

- **Author**: Chehak Singla
- **Price**: $8.00
- **Published**: 2025-12-08
- **Updated**: 2026-05-15
- **Added**: 2025-11-29
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase