How to Add a Pop-Up on Squarespace: Quick Guide
A pop-up on Squarespace is a dynamic element that appears on your website to capture attention, promote offers, or collect leads. Pop-ups are powerful tools for boosting engagement, driving conversions, and expanding your email list. Website owners use pop-ups to promote offers, grow email lists, and boost engagement.
The easiest way to create a professional pop-up on Squarespace is using the Elfsight Popup plugin. Here’s a simple 3-step guide:
- Select a ready-made pop-up design that fits your business needs.
- Adjust the content, style, and behavior to match your website’s branding.
- Copy the generated code of your plugin and embed it into your Squarespace website.
Try creating your Squarespace pop-up using the editor below!
How to Add a Pop-Up on Squarespace: Detailed Guide
First, let’s explore how to create a pop up on Squarespace using the Elfsight Popup plugin. You will learn to customize the pop up and add it to the website.
- Access the popup widget editor. Open the Elfsight Popup editor, choose a pre-designed template that fits your needs, and click on ‘Continue with this template’ to proceed.
- Customize your popup. Set the background by selecting a color, gradient, image, or video. Modify the structure by adding or removing elements such as images, text, headers, buttons, timers, and more.
- Personalize the layout. Choose where your popup will appear on the page: modal window, top bar, or side panel. Customize its width, add animation effects, and configure reopen or close buttons.
- Adjust the settings. Set how often the popup will appear and define the pages where it should be displayed. Create a schedule or choose specific triggers like user inactivity, page scrolling, or exit intent.
- Copy and embed the code. Save and publish your popup. Click the ‘Get the Code’ button to copy the HTML snippet. Paste it into your Squarespace website’s HTML editor and refresh the page.
- Embed the plugin into the website. Log in to Squarespace and select your site from the dashboard. Navigate to the desired page, click ‘Edit’, add a blank section, insert a ‘Code’ block, and paste the generated HTML. Adjust the width and placement for a polished look.
How to add the Popup’s code to Squarespace? Here are a few ways in more details:
Add Inline Popup into a specific Squarespace page
- First, log into Squarespace and select your site.
- In the ‘Website’ section, pick the required page and hit ‘Edit’.
- Choose where you want the app, click ‘Add Section’, then ‘Add a blank section’.
- Then click ‘Add Block’, select ‘Code’, and paste the installation code.
- Adjust the block’s width as needed.
Adding the floating Popup to a specific Squarespace page
- After logging into Squarespace, choose your site.
- In the ‘Website’ section, pick your page, and click the ‘Gear’ icon.
- Go to ‘Advanced’, paste the installation code, and save.
Adding the Popup into all Squarespace website pages
- First, log into Squarespace and select your site.
- Under ‘Settings’, go to ‘Developer Tools’ and then ‘Code Injection’.
- Paste the installation code into the ‘Footer’ field and save.
Also, you can watch this video to see how you can add the Popup on Squarespace in two minutes:
Alternative Way: Promotional Pop up Squarespace Tool
Despite that there are numerous great software solutions to make popups, you can also add a pop up on Squarespace without leaving the website. If you prefer using Squarespace’s built-in solution, follow these steps to display the Squarespace Promotional Pop Up tool:
- Start at the dashboard. Locate the ‘Website’ option in the panel on your left and make sure you have a search icon there.
- Access the ‘Promotional Pop-Up’ menu. Search for the Promotional Pop-Up to start building this element.
- Choose a desired pop-up type. Select Change Layout to browse various popup templates and pick the one that best suits your campaign.
- Enable the pop-up. Use the toggle switch at the top of the Promotional Pop-Up panel. Turn on the toggle next to Display Pop-Up and click Save to activate the popup.
- Customize display & timing. Adjust the popup’s behavior based on visitor interactions. Choose triggers like page load, scrolling, or exit intent to display the popup at the most effective moment.
Top Features of Squarespace Popup Plugin
#1 You will draw maximum attention
With Compelling action buttons or links and Images and videos complementing the popup, you can build engagement with your audience and improve conversions by prompting visitors to take specific actions like purchasing or signing up.
#2 This will be a unique popup
Due to the Built-in form builder for custom forms, it is possible to create a fully personalized popup solution. Offers and sales promotions, coupons inclusion allow you to highlight exclusive deals, making your popup truly unique.
#3 You’ll never miss a potential customer
With Pop up display on exit intent, you can capture potential lost conversions by showing a popup when a visitor is about to leave your site, presenting last-minute offers or reminders.
#4 Engage your visitors at the right moment
Use Showing of the popup on scroll or element click to display popups when visitors are actively engaging with your site. This ensures relevant content is presented at the perfect time.
#5 Keep a balance between visibility and comfort
Adjustable popup display frequency ensures that popups appear at the right intervals, maximizing conversions while avoiding overwhelming visitors and maintaining a positive user experience.
Website Pop-Up Examples for Squarespace
And now let’s look at some interesting template examples of the Elfsight Popup Plugin for Squarespace. This might be especially useful for those users who don’t know where to start and are looking for some inspiration.
Exit Intent Popup
An exit intent popup appears when a visitor is about to leave your Squarespace website, typically triggered when their mouse moves toward the exit button. This is an ideal moment to capture their attention with a last-minute offer, reminder, or discount, reducing the chances of losing a potential customer.
Notification Popup
A notification popup is used to inform visitors about important updates such as recent sales, discounts, or new arrivals. It can be set to appear at specific times or when users interact with certain parts of the website, ensuring they stay informed about key events or offers.
Popup Form
Popup forms allow you to collect important information such as email addresses, feedback, or inquiries directly from visitors. This feature helps businesses grow their email list, conduct surveys, or engage visitors with targeted calls to action.
Discount or Coupon Popup
A discount or coupon popup presents special offers or promo codes to encourage users to make a purchase. By offering discounts directly through a popup, businesses can incentivize visitors to take immediate action and complete their transactions.
Social Proof Popup
A social proof popup displays customer reviews or testimonials to build trust and credibility with new visitors. By showing positive feedback, businesses can increase customer confidence and encourage potential buyers to engage or purchase.
Subscription Popup
A subscription popup encourages visitors to subscribe to newsletters or exclusive content. By offering incentives like discounts or free resources, businesses can build a loyal audience and increase engagement.
We have many more templates that you can start with to create your own Squarespace Popup!
Explore 100+ Popup templates
Conclusion
Now you know how to add a pop up on Squarespace accessing a highly effective way to boost visitor engagement, capture leads, and increase sales. This article covered essential features like compelling action buttons, built-in form builders, and popup triggers.
We also explored examples such as notification popups, exit-intent messages, and subscription forms.
Whether you choose the Elfsight Popup plugin or the built-in Promotional Pop-Up tool, you can tailor your pop-ups to fit your marketing strategy and business goals. Start enhancing your website today by creating a personalized and visually appealing pop-up that keeps your audience engaged and drives conversions.
Need More Info?
We hope this guide has been helpful to you. Reach out to us if you’d like to learn more about creating a custom calculator for your website. Our mission is to ensure a seamless and successful experience for you. At Elfsight, we are committed to providing a complete solution for your business through no-code widgets.Become a part of our dynamic Community, where knowledge and ideas are exchanged. We’re always eager to hear your suggestions for improvement, so feel free to add them to our Wishlist.
