UPDATE: This method still works with LeadBoxes built using the Standard Builder, but it no longer works with the Drag and Drop Builder.
Are you using LeadPages and LeadBoxes to help grow your mailing list and connect with your ideal audience?
I hope so, LeadPages is truly an amazing tool!
But when it comes to integrating LeadPages and LeadBoxes with your Squarespace website, there may be a few pieces of the puzzle that seem out of reach unless you're familiar with code.
And the reality is that you're busy. You invest in systems to make everything easier, not to spend time trying to get it just right.
So I'm going to show you how quickly integrate LeadBoxes with Squarespace buttons, even if you've never touched code before!
LeadBoxes offers you 3 options for integrating on your website:
- Plain text link
- LeadBoxes generated button
- Image upload
While these are fine solutions, I’m a big fan of the SquareSpace button and I like the save time.
I'm sure you like to save time too!
So instead of...
- Having a link that doesn't stand out,
- A button that doesn't match the rest of my buttons,
- Or taking the time to create an image each time I need to link to a new LeadBox,
I'm going to integrate LeadBoxes with Squarespace buttons.
You may be familiar with how to do the first part of this workaround, but there's a second part that will really make this integration complete and make you look like the true #girlboss that you are!
So, keep reading and I’ll show you how to fully integrate a Squarespace button with LeadBoxes!
Pssst... The boxes in this post are Squarespace buttons that I connected to LeadBoxes using the tutorial below! :)
How to link a Squarespace Button to your LeadBox
1. Log into LeadPages, go to the LeadBoxes tab, and select “Create a New LeadBox."
2. Select the correct Industry and press “Save & Continue."
3. Edit your LeadBox, save it, and then press “Publish."
4. Select “Standard LeadBox,” then “Plain Text Link,” and then right click the Preview and select “Copy Link Address.”
5. Go to your blog post or page in SquareSpace and add a “Button” block.
6. While editing the button, click where it says “Click to add URL…”
7. Right click, Select “Paste," and then press “Save.”
You've successfully linked a LeadBox to your Squarespace button!
That was pretty easy, right?
Let's go ahead and test your button:
You’ll see that it opens in a new tab or window, instead of opening up on top of the existing page.
While that is completely fine, it could be so much fancier (and easier for your readers) if we were able to keep the LeadBox on top our existing page, instead of in a new tab or window.
But how do we do that if Squarespace buttons won't accept the HTML code LeadBoxes offers?
Don't worry - I’ll show you how!
How to make the LeadBox overlay on your website (instead of popping up in a new tab!)
1. Go back to your LeadBox page and click the title or name of your LeadBox. This will bring up the Publish box again.
2. You’ll see the HTML code at the bottom of the pop up while we’re on “Plain Text Link.” Select and copy the section of the HTML that starts with "<script>" and ends with "</script>”.
Since this HTML code won’t work in the Squarespace button, we need to find another place to put this code on our website.
That place will be in the Header of our website. Not sure where that is? Keep reading, I'll show you!
3. Go to "Settings."
4. Click “Advanced."
5. Select “Code Injection."
Any code put in the Header section here, will apply itself to every page on your website.
That is exactly what we want!
6. So go ahead and right click in that box and select “Paste.”
You’ll only need to do this one time for each LeadBox you add to your site.
If you create a lot of LeadBoxes (perhaps for content upgrades on your blog posts), then this could seem like it would add up.
Save yourself some effort down the road, and make notes before each code injection so that you know what LeadBox that code is for!
You can see I did this above by typing “<!--- LeadBox: Demo --->”.
Type whatever you want in between “<!---“ and “--->” and just make sure its easy for you to understand.
7. Press save and you’re done!
Let's go back to the blog post or page and test it out again.
Voila! The LeadBox now overlays on the existing page without having to create your own image or use a LeadBox-generated button!
That wasn’t too bad right?
Want to see me walk through this on my own website? Click the button below to get instant access to my free video tutorial:
Did this tutorial work for you?
If so, I'd love it if you would include a link to your website in the comments below so we could all take a look!