Over the last few months I’ve fallen completely in love with Squarespace and Leadpages! I use leadboxes in every post where there’s a free download. If you’re using Squarespace and Leadpages, but don’t quite have a grasp on how to put them together seamlessly this tutorial is for you! I’m going to teach you how to quickly integrate Leadpages Leadboxes in to Squarespace so the boxes pop up right over your website when your reader clicks on a button or image.
If you like getting your tech tutorial in video because it’s easier to see each step, you’re in luck! I recorded this quick 6 minute video for you that walks you through the three ways to integrate Leadboxes in Squarespace.
Not a fan of video and want a step by step guide with photos? No problem, got you covered. See below.
The BEST Method for Integrating Leadboxes in Squarespace
If you watch the video above, I’ll go through all the methods, but I really want you to focus on the method below because it’s the way you should do it. I know I’m being bossy, but it’s for your own good. Promise!
First you want to create your Leadbox in Leadpages, name it, save it and click “Publish”.
The Publish box will pop up (see below) and you want to right click the “Click Here to Subscribe” link so you can grab the URL it leads to by clicking “Copy Link Address”
Then open up your post or page in Squarespace where you want to add a button to lead to your Leadbox. Add the “Button” block and paste the link in the “Clickthrough URL” box. Note: You can do this with a custom image too! I show how in the video, but basically just use the Image block and add the link to that instead. Super easy.
Go back to Leadpages and copy the code at the bottom under “Publish above as HTML code”
Next navigate back to the main Squarespace menu. Then go to Settings -> Advanced -> Code Injection
Here you’re going to paste the code then remove the first section between the <a and the </a> tags. Basically, you only want the script portion of the code.
One thing I like to do is to add a comment with what the code is for. Once you have a couple of different boxes coded in here it can get confusing so it helps to have them labeled.
Bam. Done deal! Now you can have a pretty Leadbox that pops up over your website like the one below.
Hope that helps! If you have any questions feel free to ask and I’ll do my best to answer them.
Thanks so much for the tutorial – it really helped me setup my Leadbox yesterday!
One question, in your final example (which shows the Leadbox appear as a Lightbox on top of the webpage), once the visitor has submitted their details, they are taken to the thankyou page as specified in Leadpages which isn’t ideal (I would prefer they stayed on my website!)
Do you have a workaround / solution for that?
If you want to see my Leadbox in action and thankyou page behaviour, it is a link in the last line of this blog: http://www.elearningarchitect.co.uk/blog/agencyvsfreelancer
Hi, and thanks for this tutorial! For some reason I’ve followed all the steps, but I can’t seem to get the overlay effect when the popup comes up. If you want to check out the site it’s http://www.amberdawnhallet.com, and the button I’m struggling with is the one at the very top in the announcement bar. Thanks for any insights!
Hi! This method doesn’t seem to be working anymore as leadpages changed the publish options – how would I implement this now? Thanks!
Unfortunately I’ve moved back to WordPress and have ditched Leadpages. Sorry I can’t help!
Great work Aileen! Thank you for supporting us Squarespace/Leadpage users. jill