#65 - Exit Intent Popup v0.1

Show visitors a popup when their mouse leaves to the top.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #65 v0.1 💙 EXIT INTENT POPUP -->
<script>
const CookieService = {
    setCookie(name, value, days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        const expires = days ? '; expires=' + date.toUTCString() : '';
        document.cookie = name + '=' + (value || '')  + expires + ';';
    },

    getCookie(name) {
        const cookieValue = document.cookie
            .split('; ')
            .find(row => row.startsWith(name))
            ?.split('=')[1];
        return cookieValue || null;
    }
};

const exitPopup = document.querySelector('[ms-code-popup="exit-intent"]');

const mouseEvent = e => {
    const shouldShowExitIntent = 
        !e.toElement && 
        !e.relatedTarget &&
        e.clientY < 10;

    if (shouldShowExitIntent) {
        document.removeEventListener('mouseout', mouseEvent);
        exitPopup.style.display = 'flex';
        CookieService.setCookie('exitIntentShown', true, 30);
    }
};

if (!CookieService.getCookie('exitIntentShown')) {
    document.addEventListener('mouseout', mouseEvent);
    document.addEventListener('keydown', exit);
    exitPopup.addEventListener('click', exit);
}
</script>

Description

Attribute

No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Build an Exit Intent Popup in Webflow

Memberscripts needed:

https://www.memberstack.com/scripts/exit-intent-popup

Tutorial:

https://www.loom.com/share/983a8704090645e093f2943d236db72f?sid=f890b809-7d6f-4920-b6c5-64a61f8bb793

Cloneable:

https://webflow.com/made-in-webflow/website/exit-intent-popup-freebie

Why/When would need to Build an Exit iIntent Popup in Webflow?

Keep users on your site for longer and increase your conversion rate by offering them a last-minute deal before leaving your site.

You’ve undoubtedly seen exit intent popups on websites before – they’ve become a great way to keep users on a site and convert them to customers.

Whatever you’re selling, exit intent popups with limited-time offers are a great way to increase your conversion rate and we’re going to see how you can add one yourself to your Webflow website.

Adding an exit intent popup to Webflow sites

To add an exit intent popup to your Webflow website, we’re going to use MemberScript #65 – Exit Intent Popup. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is create a div block to house the popup itself and set its display to flex.

Once you’ve built and styled the popup, add this attribute to the div block housing it:

ms-code-popup=”exit-intent”

Before publishing your site, don’t forget to set the popup’s display to hidden.

Making it work

Now that you’ve got the popup built and styled, all you need to do is add the MemberScript #63 custom code to your page, before the closing body tag.

Conclusion

That’s everything, you can now go ahead and test your site’s exit intent popup by moving the cursor outside the viewport at the top.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Additionally, if you want to build a countdown timer and build a copy-to-clipboard functionality for a coupon code, check out MemberScript #8 & MemberScript #9.

Our demo can help you add an exit intent popup that triggers when visitors’ cursors leave the viewport through the top of the screen.

Take me to the Script!

Read full documentation

Button Text

Something not working as expected?

#65 - Exit Intent Popup v0.1

Need help with this MemberScript?

Creating the Make.com Scenario

How to Build an Exit Intent Popup in Webflow

Memberscripts needed:

Tutorial:

Cloneable:

Why/When would need to Build an Exit iIntent Popup in Webflow?

Adding an exit intent popup to Webflow sites

Setting it up

Making it work

Conclusion

Take me to the Script!

Try Memberstack for free

Product

Language

Customers

Company

Resources