How can I make a modal pop up on exit intent in Webflow? My site is Read-Only.
- Design a hidden modal in Webflow and style it using the Designer and Interactions panel.
- Add a custom exit intent script in Webflow's Project Settings under the Footer Code, replacing
.your-modal-classwith the modal's class. - Publish the site and test by moving the mouse towards the top of the page to trigger the modal.
To create a modal pop-up on exit intent in Webflow, you will involve using custom code within your project settings. Here's a guide to implement it:
1. Create the Modal in Webflow
- Design your modal element in Webflow as part of your page. Make sure it’s hidden on the initial page load.
- Style the modal using Webflow's Designer to fit your brand’s look and feel.
- Use the Interactions panel to create an animation that displays the modal when a trigger is activated.
2. Add Custom Code for Exit Intent
- Go to Project Settings in your Webflow dashboard.
- Click on the Custom Code tab.
- Insert the following script in the Footer Code section:
```javascript
(function() {
var exitIntentTriggered = false;
document.addEventListener('mouseleave', function(event) {
if (event.clientY < 0 && !exitIntentTriggered) {
exitIntentTriggered = true;
document.querySelector('.your-modal-class').style.display = 'block'; // Make sure to replace .your-modal-class with your modal's class
Webflow.require('ix2').init(); // This initializes the Webflow interactions
}
});
})();
```
- Replace
.your-modal-classwith the actual class name of your modal.
3. Publish Your Webflow Site
- Publish your updated site for the code to take effect.
4. Test the Modal
- Visit the published site.
- Move your mouse towards the top of the page (as if leaving).
- Ensure the modal appears as expected.
Summary
Implementing an exit intent modal involves styling your modal in Webflow and adding a JavaScript snippet to trigger the modal when a user attempts to exit the page. Make sure to test the functionality thoroughly to ensure it works as intended.
