Flodesk and Squarespace: How to add a ribbon banner on your website
More of a visual learner?
WATCH THE VIDEO BELOW.
Grab my free 3 day video email course: FINDING YOUR BRAND COLOURS
Welcome to this easy Flodesk & Squarespace tutorial on how to create a ribbon banner from your flow desk newsletter form, and how to code it into Squarespace.
When to use a banner pop up
Where you would use a popup you would use. Where you distract customers basically when they're on your website and then a big popup comes up and they are very effective and annoying at the same time.
The other option is having a ribbon banner at the bottom of your page and you can choose where you put it in. So you have two codes for a ribbon banner. You have the header injection and then inline injection.
Create form in Flodesk
So what we're gonna do is we're going to you create a form.Choose a ribbon banner creator. This tutorial will focus not on the Flodesk banner creation but on how to add the code into Squarespace. So when you finish, you press next and you opt into all of the options then on the final page you will see ‘Publish Your Form’.
Adding the code into Squarespace
First copy the header code. To do this I go to my website Settings > Advanced > Code Injection. Scroll to the bottom of the code box and paste the code at the bottom and save the code.
Then go back to Flodesk and I'd get my inline copy code, copy it. This code will allow you to dictate where the banner is physically positioned on your website.
Where to position the banner
I like putting in line forms either specifically below an offering or on a sales page, or within the text somewhere or in my footer, so it comes up on every page.
Add the banner to the footer of your website
In the edit mode of squarespace, scroll to your website footer, hover on the section and select ‘Edit Footer’
Add a code block to your footer and paste the inline code from flodesk. You will not be able to see it until you save your changes and preview the page.
Adding the banner to the bottom of the page
Find an ‘entry point’ at the bottom of your page by hovering and seeing where the blue line and ‘+’ symbol is. Select ‘code’ from the block menu to add a code block.
Delete any default code and paste in the inline code from flodesk.
After saving the page and previewing it, you can view your new ribbon opt in!
Prefer to have a full page pop-up for website visitors to opt-in to your freebie or email list? Click here to learn how.
Amy Ilic
Squarespace Designer & Brand Conjuror
