How can I make a modal pop up on exit intent in Webflow? My site is Read-Only.

To implement an exit intent modal popup in Webflow, follow these steps to engage users as they attempt to leave your website. 

​

1. Create the Modal Element

• Add a Div Block to serve as your modal container in your Webflow project.
• Set the modal Position to Fixed to ensure it covers the entire view when displayed.
• Add inner elements like text and buttons as needed for the modal's content.
• Set the initial Display to None to keep it hidden when the page loads.

​

2. Set Up the Exit Intent Trigger

• Embed Custom Code (most often JavaScript) to detect user intent to leave the page. This is not achievable with Webflow's built-in interactions alone.
• Use a script to listen for the mouseleave event on the document object. This event should detect when the user's mouse leaves the page viewport.

​

3. Show the Modal on Exit Intent

• Within the custom script, use conditions to determine when the modal should appear based on exit intent detection.
• Use JavaScript, such as document.querySelector or jQuery, to change the modal's display property from “none” to “block” or the equivalent CSS to display it.

​

4. Close the Modal

• Add a close button within the modal.
• Use interactions or additional JavaScript code to set the modal's display back to “none” when the button is clicked.

​

5. Publish and Test Your Site

• Publish your site to check if the modal works as expected when a user attempts to exit.
• Test on different browsers to ensure compatibility.

​

Summary

In summary, implement an exit intent modal popup in Webflow by creating the modal elements and using custom JavaScript to trigger the modal on exit intent. Ensure your code correctly detects when the cursor leaves the viewport and displays the modal accordingly.