Stories for Squarespace Instagram-style stories on your Squarespace site
Story circles with photos and videos appear on your Squarespace site with Code Injection. Place them inline with a Code Block or let them float on every page.Set up in 5 minutes, no developer needed.
Stories builder: try it yourself
Tap a circle to open a story
Placement
Five ways to show stories on Squarespace
- 1
As a block on the page
A row of circles anywhere on the page, for example under the header or above your product grid.
- 2
Floating in a corner
A capsule with three circles over your site in the bottom left or right corner that expands into the full list on hover or tap. Visible on every page.
- 3
As a side tab
A stack of covers at the edge of the screen that slides out on hover or tap. Doesn't cover your content.
- 4
As an island at the bottom
A dark pill at the bottom center of the screen with a stack of covers. Tap it to expand into a row of circles; it hides while you scroll down.
- 5
As cards on the page
Vertical 9:16 cards instead of circles, showing the first slide or a muted video and a headline. They look like part of your site design.
Why it matters
Not just trust and direct sales, but search rankings too
Drives engagement
Ringed circles invite a tap, and slides make people want to watch to the end. Visitors don't just scroll past: they watch, tap the buttons on slides and move on to your catalog, a deal or a chat.
Boosts engagement signals for SEO
While people watch stories, they stay on your site. Time on site and pages per visit go up, and search engines take these user engagement signals into account. That helps your site rank in search.
Features
Fits your Squarespace template
Choose ring colors and circle size to match your template, and keep your design clean: stories open full screen only when a visitor taps them.
Photos and videos
Photos up to 10 MB and videos up to 50 MB (MP4, WebM, MOV). One story can have several slides.
A button on every slide
Link a slide to a product, a collection, a booking page or a chat, so stories on your Squarespace site lead to action.
Just like Instagram
Full-screen viewer, auto-advancing slides, tap and swipe. Feels native on phones and desktops.
Matches your design
Ring color, circle size and captions are set in the editor, no theme edits needed.
Update without touching Squarespace
New stories go live a minute after you publish them in Swoopkit. No theme edits, no republishing on Squarespace.
AI builds them for you
Enter your website address and AI builds 25 stories from your own pages and photos in about a minute.
Guide
How to add stories to Squarespace
Squarespace's Code Injection adds the code to every page of your site at once. Code Injection and Code Blocks need the Business plan or higher.
- 1
Create stories in Swoopkit
Sign up, create a Stories widget, upload photos or videos and choose a placement: inline on the page, floating in a corner, a side tab or an island. Click Publish.
- 2
Copy your site code
In your Swoopkit dashboard, copy the line of code with your site key. It's the same line for all widgets.
<script src="https://swoopkit.app/loader.js" data-site="YOUR_SITE_KEY" async></script> - 3
Open Code Injection
Go to Settings → Advanced → Code Injection. In newer dashboards it's under Website → Pages → Custom Code → Code Injection.
- 4
Paste into Footer
Paste the line into the Footer box and click Save.
- 5
For inline stories: add a Code Block
Edit the page, click an insert point where the circles should appear, choose Code and paste the block code. Turn off Display Source and save.
<div data-vzhuh="YOUR_WIDGET_ID"></div>
Examples
Who it's for
Portfolios
Recent projects, process shots and client reactions.
Hospitality
Rooms, menus, events and seasonal offers.
Coaches and consultants
Tips, testimonials and how to book a call.
Online stores
New products, collections and promos.
Quick start
Live in 5 minutes, no developer needed
- 1
Build a widget
Pick a type, upload photos, write the text. The live preview shows exactly how it will look on your site.
- 2
Paste one line of code
Just once: every widget you add later appears on your site automatically. Works with Shopify, WordPress, Wix and any website.
- 3
Get leads
Leads arrive in your inbox and dashboard. Update offers and stories yourself, anytime.
Pricing
Free for 3 months, everything included
All widgets are free for 3 months with a small “Made with Swoopkit” badge, no credit card required. After that, the paid plan: widgets without the badge.
- All three widgets: stories, banners, contact button
- Unlimited views
- Leads by email and in your dashboard
- “Made with Swoopkit” badge
- All three widgets: stories, banners, contact button
- Unlimited views
- Leads by email and in your dashboard
- No “Made with Swoopkit” badge
- All three widgets: stories, banners, contact button
- Unlimited views
- Leads by email and in your dashboard
- No “Made with Swoopkit” badge
Start for free. Payment for the paid plan is coming soon to your dashboard.
FAQ
Questions about stories on Squarespace
How do I add stories to Squarespace?
Create the widget in Swoopkit, copy one line of code from your dashboard and add it to Squarespace: open code injection, then paste into footer. You do it once.
Do I need a paid Squarespace plan?
Code Injection and Code Blocks need the Business plan or higher.
Will stories slow down my Squarespace site?
No. The widget loads after your page, asynchronously, and media loads only when someone opens a story.
Do I need to edit the code again when I change stories?
No. You add the code once. After that you change stories in Swoopkit and they update on your site in about a minute.
Can I show stories on one page only?
Yes. For inline stories, add the block code only to that page. For corner circles, the side tab and the island, set display rules in the editor by page address and device.
How much does it cost?
The first 3 months are free, no credit card required. After that, $7 a month or $15 for 3 months, and the plan includes all widgets: stories, pop-up banner and contact button.
Related
All widgets are included: use them together, they don't get in each other's way.