How can I make a modal pop up on exit intent in Webflow? My site is Read-Only.
To create a modal that pops up on exit intent in Webflow, you can follow these steps:
Step 1: Add a custom code embed
- Go to your Webflow Project Dashboard.
- Click on the site where you want to add the exit intent modal.
- Navigate to the page where you want the exit intent modal to appear.
- Click on the "+ Add Elements" button on the left panel.
- Choose the "Custom Code" element and drag it onto the page.
Step 2: Insert the script
- Open the "Custom Code" element settings.
- Paste the following script into the "Embed Code" section:
```html
<script>
// Function to show the exit intent modal
function showExitIntentModal() {
// Show your modal here
}
// Function to handle mouseleave event
function handleMouseLeave(e) {
if (e.clientY < 0) {
showExitIntentModal();
}
}
// Attach an event listener to the document's mouseleave event
document.addEventListener("mouseleave", handleMouseLeave);
</script>
```
Step 3: Implement the modal
- Create your modal design in Webflow by adding a div or a section.
- Style the modal to your liking using the Webflow Designer.
- Set the initial state of the modal to "display: none" in the Style panel.
- Add an interaction to show the modal when a trigger element (e.g., a button or link) is clicked.
- Make sure to set the interaction's initial state to "display: none" as well.
Step 4: Connect the functions
- In the script you pasted in Step 2, replace `// Show your modal here` with the code to show your modal. This will depend on the modal plugin or custom code you are using.
- You can use Webflow's built-in interactions or integrate with third-party modal plugins like Magnific Popup or Fancybox to display the modal.
Step 5: Preview and Publish
- Preview your site to test the exit intent functionality.
- If everything works as expected, publish your Webflow site to make the exit intent modal live.
Remember, this solution requires custom code, so it's only available for Webflow projects that have a paid hosting plan. Additionally, test the modal thoroughly across different devices and browsers to ensure a seamless user experience.
