How to Add an Exit-Intent Popup to Your Wix Website

Welcome back to Wix Ideas! In this tutorial, I'll show you how to add an exit-intent popup to your Wix Studio website. Exit-intent popups are a great way to improve your website's conversion rate by capturing the attention of users just as they're about to leave your site.

What is an Exit-Intent Popup?

An exit-intent popup is a special kind of popup that appears when a user is about to leave your website. For example, as soon as a user moves their cursor towards the browser’s close button, a popup could appear offering a 30% discount to encourage them to stay or make a purchase.

Why Use Exit-Intent Popups?

Exit-intent popups can be highly effective in reducing bounce rates and increasing conversions. By presenting an offer or important message before a user leaves, you create one last opportunity to engage with them.

Step-by-Step Guide

Let’s dive into the steps to create and implement this feature on your Wix website.

1. Add a Lightbox (Popup)

The first step is to add a lightbox or popup to your website.

- Click the + icon (Add Elements) in your Wix editor.

- Navigate to Layout Tools and select Lightboxes.

- Choose a lightbox design that fits your brand, and customize it with your message or promotion.

- After customizing, click on the lightbox's settings and copy the lightbox name. You'll need this name for the coding part later.

2. Write the Velo Code

Now, we’ll add some custom code to trigger the lightbox when the user attempts to leave the page.

- Go to the Code panel in your Wix editor.

- Use the following steps to write the code:

This code triggers the popup when the user's cursor moves toward the top of the browser window, indicating they’re about to leave.

3. Optimize the Popup Load Time

To ensure that your lightbox loads quickly, especially on the first attempt, we’ll prefetch the resources using the `prefetchPageResources` API.

- Import the Wix site API:

This will load the lightbox resources in the background, so the popup appears instantly when triggered.

4. Final Testing

Once you’ve added the code and customized the lightbox, it’s time to test the functionality.

• Publish your website.

• On the live site, move your cursor towards the top of the browser window. You should see the lightbox appear before you can close the tab.

• Test the popup to ensure it loads quickly and accurately on the first attempt.

Conclusion

Exit-intent popups are a simple yet effective way to increase user engagement and conversions on your Wix website. By following the steps outlined in this tutorial, you can easily add this feature to both Wix Studio and Wix Classic sites.

If you found this tutorial helpful, don’t forget to give it a thumbs up and subscribe to my channel for more Wix tips and tricks. Thank you for watching, and I’ll see you in the next tutorial!