How to Add a Pop-Up on Squarespace (Using ConvertKit)

As a Squarespace web designer I asked a lot of questions about if you can or can't do certain things on this platform. The answer is almost always YES.

Including the option to add a pop-up opt-in on your site! You can totally have an pop-up opt-in and it's really easy to do, you might laugh at just how easy. 

 How to add a pop-up to your Squarespace site using Convert Kit

First, let's talk about these pop-up opt-ins in general. 

Is a pop-up opt-in a good idea? 

Studies show that they do in fact work. Spammy pop-up ads are a no-go, but offering a freebie seems to be a great idea. Plus there are ways to ensure that people are seeing your pop-up at the right time and super annoying! This is a great article with several case studies, it's always nice to see multiple results. 

I'm going to show you how to add your pop-up using ConvertKit. (If you are using MailChimp you can use the Promotional Popup options that's available right in Squarespace.)

Note: I am a Convert Kit affiliate, but I wouldn't recommend something I don't use and love myself. 

First, you want to set up a form. Style it just like you would any other form for your site. Be sure to add the link to your freebie. 

TIP: Create a new form just for your pop-up so you can track the results. 


Then we need to go into the settings and adjust the style. For your pop-up you can choose either the full style or the minimal. I tend to go with the minimal style for almost everything, I like to keep things simple. You also want to select the "modal" version. 


When you select modal the display options box will popup and now you can decide when you want the pop-up to be displayed. 


So here you have some options. 

Exit intent: When people are about to click away from your website the opt-in will pop-up. This is a pretty popular option. This is good for bloggers, anyone who provides lots of content. Give away one of your juiciest pieces of content to snag your readers. 

Scroll percentage: As someone is scrolling through your website it will pop-up after a certain percentage has passed. This is really good for stores, especially if you have a lot of listings. Give a coupon or freebie with their order and you will hook them! 

Timing: This one pops up when a certain amount of time has passed. You have to be careful not to be too eager with this option, you don't want to scare anyone away by jumping on them too soon. 

Lastly, you can also adjust what devices (mobile or desktop) it will show up on and how often it will pop-up for repeat visitors. 

Once you have the the form set up, you need to get the code. You will find this in the "embed" screen. With javascript checked, copy the text in the script box. 

Screen Shot 2017-09-08 at 12.26.44 PM.png

Now you will put this text on your Squarespace site. If you want this to pop up on every page of your site, you will put it in the Code Injection area under settings, and Advanced. Paste the text in the header box.

Screen Shot 2017-08-28 at 4.36.17 PM.png

If you only want your pop-up on select pages then you will want to paste the code into the settings on each individual page. Do this by clicking on the little gear wheel, under Advanced. Paste the text in the header box.

Screen Shot 2017-09-08 at 12.41.32 PM.png

ALL DONE! Now test it out by opening a new tab and going to your site!