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.