Squarespace Announcement Bar plugin
Create a Squarespace Announcement Bar plugin
Why use the Elfsight bar on Squarespace
A sale banner that stays up after the sale has ended confuses visitors, and switching it on and off by hand is easy to forget. The Elfsight bar runs on your dates, carries a button or a sign-up field and shows only where it belongs.
Campaigns that run on your calendar
Choose a start and end date and time in your own time zone, or let the bar repeat daily, weekly, monthly, every weekday or on a custom cycle. A Black Friday offer goes live at midnight and comes down when the sale ends, without anyone logging in.
Turn readers into subscribers
With an email field and a button in the bar, each sign-up reaches up to three addresses, with CC and BCC for your team. New contacts can also join a Mailchimp list, land as new rows in Google Sheets or reach your CRM through Zapier, Make.com or a webhook.
Messages people click
Add a button, or make the whole bar a link to a page, an email address or a phone number. A badge, an icon, an image or a YouTube or Vimeo video gets the message noticed, and the background can be a color, a gradient, an image or a video.
Shown where it matters
Keep the bar on all pages, show it only on the homepage or on a list of pages, and hide it where it doesn’t belong. Limit it to desktop or mobile, and stop showing it once a visitor closes it, clicks the button or has seen it a set number of times – for anything from 30 minutes to forever.
Key Features
- Email sign-up in the bar – collect emails without a separate popup and send them to your inbox, a spreadsheet or your email marketing app.
- Scheduled campaigns – set start and end dates with times and a time zone, or repeat the bar on a regular cycle.
- Buttons, badges and media – link a button to any page, email or phone number, and add an icon, image or video.
- Display rules – choose pages and devices, and hide the bar from visitors who have already closed it.
- 19 ready templates – Sale, Free Shipping, New Product, Black Friday, Christmas, Discount Coupon, Event, Webinar, Donation Call and more.
- Four positions – static or floating at the top, floating at the bottom, or inline within a page section.
- A version for phones – shorter text, a hidden button and a separate bar size for small screens.
Try every setting in the live editor before you sign up.
Compared with the built-in announcement bar
Here is where the Elfsight bar matches the one that comes with Squarespace and where it goes further:
- Message and link – both bars show a short line of text and can turn the whole strip into a link.
- Dates – the Elfsight bar appears and disappears at the date and time you set; the built-in one stays on until you turn it off.
- Sign-ups – an email field and button sit right inside the Elfsight bar; the built-in one carries text and links only.
- Visuals – the Elfsight bar adds a button, badge, image or video; the built-in one shows text.
- Targeting – choose pages, devices and when the Elfsight bar stops appearing for a visitor; the built-in one shows on every page.
- Plans – the Elfsight bar also installs on Basic through an Embed block; the built-in one comes with Core and higher plans.
Built to fit your Squarespace template
- One code, any number of pages – paste it into Code Injection once and choose in Elfsight where the bar shows, instead of adding it page by page.
- Matches your design – the Default font setting uses your website’s font, and the S, M and L sizes keep the bar slim or bold.
- Room at the top – Static Top pushes the page down to make space for the bar, while Floating Top stays in view as visitors scroll.
- Updates without the page editor – change the text, dates or button in Elfsight, and the bar on your live pages changes too.
How to add the Announcement Bar to Squarespace
Build the bar in the Elfsight editor, press Add to website for free and copy the installation code. Then follow the method for your plan below.
Choose the position and the pages in the bar’s settings before you install: with a top or bottom position, one code in Code Injection covers the whole website, while Inline puts the bar where you paste the code. Scripts don’t run in the Squarespace editor, so look for the bar in preview or on the live website.
Method 1: Place the bar inside one page (version 7.1, Core and higher)
- Open Website → Pages, select the page and press Edit.
- Hover over the spot for the bar, press Add Section and pick Add a blank section.
- Press Add block, choose Code and press the pencil icon.
- Paste the installation code into Content with Display Source switched off.
- Pull the block’s right edge to full width and press Save.
On version 7.0, press Edit above the section, use the + icon at the insert point and choose Code instead.
Method 2: Show the bar across the whole website (Core, Plus, Advanced)
- Open Website → Pages and scroll to the end of the left-hand panel.
- Select Code Injection – it’s grouped under Custom Code in 7.1.
- Put the installation code in the Footer box, then press Save.
- In the Elfsight editor, set Pages to All, Homepage or Specific and publish the change.
A gap may appear under the footer in the editor only; the live website looks normal.
Method 3: Add the bar to one page on the Basic plan
- Press Edit on the page, hover over the spot and press Add Section → Add a Blank Section.
- Press Add Block, choose Embed, then press the pencil icon.
- Select Code Snippet, press Embed data and paste the installation code.
- Press Save, refresh the page and drag the block’s edges if it needs more room.
The Embed block can stay blank until you save and refresh – that’s expected.
Method 4: Show the bar on every page on the Basic plan
- Press Edit, move the cursor over the footer and open its editing panel.
- Press Add Block → Embed, then the pencil icon → Code Snippet → Embed data.
- Paste the installation code, press Save and view the bar on the live website.
This works only with the footer turned on; otherwise, use Method 3 on each page.
Once it’s live, open your website logged out, check the bar on a phone and send a test email through the form to see it reach your inbox. Need a hand? Invite our team as a contributor, and we’ll set the bar up for free.