top of page
Crumpled Fabric

0

Exit-Intent Popup on Wix Studio

Click URL to copy

Aug 19, 2024

3 min read

WIX Ideas Team

Tags: Lightbox Wix Studio Exit-Intent Popup Popup Velo by Wix Wix Studio Coding



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!




Code



Leave a comment (0)

Thanks for leaving a comment🎉

RELATED TUTORIALS 🚀

Populating Input Elements with Data from Wix Collection

Populating Input Elements with Data from Wix Collection

Populate your input elements with data from your database collections

bottom of page