How to Create a Promotional Squarespace Exit Popup
Some links in this post may be affiliate links. This means if you click through and take action, I will be compensated a small amount at no cost to you.
Introduction - Squarespace Exit Popup
In this guide, we’ll show you how to set up a Squarespace exit popup to create effective, targeted pop-ups on your website. Using the Promotional Pop-up 2.0 plugin by SQSMods, you can design a Squarespace exit popup that triggers when a visitor is about to leave your site, increasing your chances of capturing their attention before they go. This plugin provides flexibility beyond the standard built-in Squarespace pop-up. It allows you to display specific lead generation popups on individual pages and customize triggers like exit intent, scroll percentage, and time on page. Read on to learn how to install and configure this powerful pop-up tool.
As a Squarespace website designer and digital marketing specialist, I have found this plugin to be a game changer for creating an exit intent popup on Squarespace. Lead generation magnets are only effective when they match the page intent. This tool gives us the freedom to customize this experience based on the page and the type of traffic it is receiving!
Key Takeaways
The Promotional Pop-up 2.0 plugin by SQSMods allows Squarespace users to set up customizable pop-ups on specific pages, enhancing targeting and conversion potential. *This plugin requires the Business Plan or higher
This Squarespace popup plugin supports multiple triggers for pop-ups, including exit intent*, scroll percentage, and time spent on the page, giving you control over when and how visitors see your message. *exit intent only works on desktop as it requires the users curser to work
For general page content pop-ups, like linking a pop-up to a button or URL, the Lightbox Anything plugin by SQSPThemes offers a flexible solution to turn any element on a page into a pop-up trigger.
-
Here's the transcript with each timestamp on its own paragraph:
---
0:02 Hi, I'm Khara Wolf, the owner of Websites by Khara. I'm a Squarespace website designer and certified Squarespace SEO expert. Today I'm going to show you how to create an exit pop-up on Squarespace using one of my favorite Squarespace plugins, the Promotional Pop-up 2.0 by SQSMods.
0:18 So I'm going to go ahead and pull this up on my computer so you can see what it looks like.
0:25 So if I start to scroll, here we go. You'll see it looks similar to the built-in pop-up feature that's Squarespace offers, but unlike the built-in one that they give, this plugin allows you to place a specific promotional pop-up on just one page.
0:39 This can significantly increase your conversion rates and it also gives the option to trigger the pop-up by leave intent or exit intent in addition to scroll percentage and time spent on the page.
0:49 So I'm going to pause the video for just a moment to bring this up on mobile as well. And then later in this video, I'll give some pro tips on how to format this for mobile.
0:59 All right, So here's what this looks like. It looks great here as well. So let me go ahead and go back to my desktop.
1:09 If you're looking for a Squarespace pop-up plugin for general page content, I recommend the Lightbox Anything plugin by SQSPThemes. So if you're looking for a pop-up plugin that's going to allow you to connect to page content, such as a URL or a button, as opposed to a promotional pop-up, this is what this looks like.
1:27 So what this does is it brings a pop-up for any kind of content that you need.
1:35 And you'll see I've utilized this for my calendar. So this is the Lightbox Anything plugin. And if you're looking for a promotional pop-up, the promotional pop-up 2.0 by SQSMods.
1:48 So I'll go ahead and include my affiliate link to both of these plugins below. I'll also include the installation video of the Lightbox, anything plugin that I recorded a while ago.
1:59 So now let's look at how. How to install the SQSMods plugin, this promotional pop-up 2.0. So first you want to purchase and download the plugin.
2:12 And the very first thing you're going to do is you're going to create a section on the page that you want to be your pop-up.
2:20 One thing to keep in mind is once the plugin is installed, the extra section that you create that's supposed to be your pop-up is not going display on the page itself.
2:30 By default that's not the last section of the page will be the pop-up unless you specify a particular section. Personally, I've found placing the section on the bottom of the page helps me keep track of which section is my pop-up.
2:44 And since it's not going to display on the front end, I don't really worry about where it is. So it's just as easy to have it on the very bottom of the page and not has, not have to specify a particular section.
2:56 So here is my page that I was just showing you in edit mode and you'll see, you know, I have this section set so that the fill screen is toggled off.
3:06 Now, what I found was that the height of your pop-up is determined by the built-in height here in Squarespace in the section.
3:18 So in this case, I found about six to ten rows for desktop was pretty nice. You can get away with a little bit more than that, but it does take up a fair amount of the screen.
3:27 However, for mobile, I did find that ten rows of . It was about max. So anything taller than this started to take up most of the screen, and if it got too tall, it got cut off.
3:42 So now I'm going to go ahead and switch over to my demo site. I'm not going to be pasting the specific code in real time for privacy reasons, but I do want to walk you through where to paste this code in so you can see how super easy it is.
3:56 So there's basically two codes you're going to receive. You're going to receive one that goes in the code injection You have a in the footer and then there's the configuration code which either can go in the header of the code injection if you want site wide, or it can go into the advanced page tools.
4:14 So let's go ahead and do the first one. So I'm going to hit the slash key and go to my code injection.
4:22 Now the first code you're going to receive once you purchase this plugin is going to go right here in the footer.
4:29 Now the plug-in comes with I can figure it. So you can use that to set the parameters around how you want your pop-up to function.
4:38 Do you want it to display on scroll, page percentage, leave intent, exit intent, et cetera. So once you configure that, you can either come in here and put it in the header if you want it to be site wide or you can come to your specific page and place it per that page.
4:54 So let's say we wanted to put this on my services page. Click the gear icon. We're going to go to advanced and we're going to paste it here, page header code injection.
5:07 This will ensure that the pop-up only displays on that particular page. And again, there's an option to specify which section you want to be the pop-up, but I recommend just having it on the bottom.
5:20 It's really easy to keep track of and it's not going to display on the front end anyways. And that's it.
5:25 Just be sure to test it in a private browser or an incognito mode to see how it looks on the live site.
5:33 So thanks so much for watching the Squarespace pop-up plugins that I've demonstrated today and the additional resources I mentioned are linked below.
5:40 Please subscribe and like my channel to get more tips like this.
Stop wasting your money on ads. Learn how to optimize your website to get more clients and customers! [Free guide]
Please add your email to get a PDF file and video.
Example of a promotional popup on Squarespace
Step-by-Step Instructions: How to Create a Promotional Squarespace Exit Popup
Follow these steps to install and set up the Promotional Pop-up 2.0 plugin on your Squarespace site.
1. Purchase and Download the Plugin
Start by purchasing and downloading the Promotional Pop-up 2.0 plugin from SQSMods. The plugin files should include instructions and the code snippets you’ll need for setup.
2. Create a Section for the Pop-Up
Go to the page where you want the pop-up to appear. Create a new section on this page, which will be your designated pop-up content. Note that this section won’t display on the live page—it will only appear as a pop-up. By default the plugin will use the last section of the page. You can designate a specific section from anywhere on teh page, but to keep things organized, I recommend keeping this new section at the bottom of the page—it won’t display on the live site and it will make it easier to keep track of.
3. Adjust Section Height
For desktop, I recommend setting the height of the pop-up section to around 6 to 10 rows, depending on your content. For mobile, keep it to a maximum of 10 rows to avoid the pop-up taking up too much screen space or getting cut off.
4. Access Code Injection Settings
Next, go to Settings > Advanced > Code Injection in your Squarespace dashboard. This is where you’ll insert the necessary codes from the plugin files. You can also access this by clicking the “/” slash key.
5. Add the Footer Code
Take the first code provided by the plugin and paste it into the Footer section of the Code Injection area. This code is essential for the plugin to function across your site.
6. Configure Pop-Up Settings
Use the plugin’s configuration options to set your desired triggers, such as:
Scroll Percentage: Display the pop-up once the visitor scrolls to a certain point on the page.
Time on Page: Trigger the pop-up after a set amount of time.
Exit Intent: Display the pop-up when the visitor moves their cursor to leave the page. *This Squarespace exit intent popup feature only works on desktop as it requires the users curser to work
7. Add the Configuration Code
The second code, known as the configuration code, controls the pop-up’s behavior (triggers, timing, etc.). You have two options for placing this code:
Site-Wide Pop-Up: If you want the pop-up to display on all pages, place the configuration code in the Header section of the Code Injection settings.
Page-Specific Pop-Up: If you want the pop-up to appear only on a specific page, navigate to that page, click the gear icon to open the page settings, go to Advanced, and paste the configuration code into the Page Header Code Injection field.
8. Test the Pop-Up
Once you’ve completed the setup, test the pop-up in an incognito or private browser window to see how it appears on the live site and verify that the triggers work as expected.
By following these steps, you’ll have a fully functional Promotional Pop-up 2.0 plugin ready to boost engagement and conversions on your Squarespace site.
Conclusion
If you are looking to create a Squarespace exit popup, setting up the Promotional Pop-up 2.0 plugin on your Squarespace site is a powerful way to capture visitor attention and drive conversions. By customizing where and how your pop-up appears, you can create a more targeted, effective user experience that aligns with your goals, whether it’s increasing sign-ups, promoting a special offer, or encouraging users to stay on the page longer. With a few simple setup steps, you can transform your Squarespace site into a more interactive platform that engages visitors and boosts your conversion rates. Test and refine your pop-up settings to find the perfect balance for your audience, and enjoy the benefits of a well-timed, strategically placed pop-up.
If you are looking for more Squarespace plugins, check out my favorite cool Squarespace plugins or my complete Squarespace plugins toolbox.
Frequently Asked Questions - Creating a squarespace Exit Intent Popup
How do I create an exit pop-up on Squarespace?
You can create an exit intent popup Squarespace by installing a Squarespace popup plugin like the Promotional Pop-up 2.0. While Squarespace’s native feature allows for basic pop-up functionality across your site, plugins offer more advanced options, like displaying a specific popup on Squarespace pages or creating a Squarespace exit popup triggered when a visitor is about to leave.
How do I trigger exit intent?
To trigger an exit intent pop-up with the Promotional Pop-up 2.0 plugin, start by installing the plugin and adding the required code to your Squarespace site. In the plugin’s configuration settings, select the “Exit Intent” trigger option. This setting will activate the pop-up when a visitor’s cursor moves toward the top of the browser window, indicating they’re about to leave the page. Once you’ve set the trigger, test it in an incognito or private browser to make sure it works as expected.
How do I add a pop-up cookie in Squarespace?
To add a cookie consent pop-up in Squarespace, navigate to Settings > Cookies & Visitor Data in your dashboard, then enable the Cookie Banner option. Customize the banner by selecting either Opt-In & Out (for GDPR compliance) or Opt-In, and adjust the banner style and disclaimer text to match your site’s design and inform visitors about cookie usage. Once configured, click Save to activate the banner, helping ensure transparency and compliance with data protection regulations.
How do I get rid of the pop-up banner on Squarespace?
To remove the pop-up banner on Squarespace, go to Marketing > Promotional Pop-Up in your dashboard. Toggle off the Enable Pop-Up option to deactivate the banner across your site. If you’re using a custom pop-up plugin, like the Promotional Pop-up 2.0, locate the code in Settings > Advanced > Code Injection and delete it from the Header or Footer sections. This will fully remove the pop-up from displaying on your site. Remember to save your changes to ensure the pop-up is disabled.
