Code Injection and a Code block
A better checkout and countdown for Squarespace
Squarespace designs the page. A Plandalf checkout opens from a button, with a real sale-ending countdown and upsells that Squarespace checkout does not offer.
Code Injection and Code blocks need a Core, Plus or Advanced plan. No native Squarespace integration.
Squarespace
Stripecheckout.completedinvoice.paid
How it connects
Squarespace keeps the site. Plandalf runs the sale.
Checkout pages take no code, so a button on your own page opens the Plandalf checkout.
How Plandalf reaches Squarespace
Code Injection and a Code block
The SDK script in the footer injection, buttons in a Code block. A normal button linking to a hosted checkout needs no code.
Squarespace’s checkout page cannot take code, so the way to a different checkout is a button. A Squarespace button can link to a Plandalf hosted checkout, or a Code block can hold a data-plandalf-present button that opens the checkout over the page.
Checkout embed available
Squarespace owns
- Pages, blog and templates
- Squarespace Commerce store
- Domains and hosting
Plandalf owns
- A checkout you design freely
- Sale-ending countdowns and promo prices
- Order bumps and upsells
Same on every platform: payment goes through your own Stripe or PayPal account, Plandalf keeps the invoice, and every Offer has a hosted link and a test mode link.
What syncs
What moves between Squarespace and Plandalf
Squarespace has no Plandalf app, and Plandalf has no native Squarespace app. The page is the join.
| What | How it works | What it needs |
|---|---|---|
| Hosted link | A Squarespace button block with its link set to Your checkout link from the Offer’s Share tab. | A published Offer. Needs no code |
| Overlay checkout | The SDK script in Code Injection, Footer, then a button with data-plandalf-present in a Code block in HTML mode. | A Core, Plus or Advanced plan |
| Countdown | A div with data-plandalf-promo in a Code block. Add data-plandalf-apply-promo to the button so the price follows it. | A promo with the same slug |
| Orders | Plandalf sales are recorded in Plandalf. They do not appear as Squarespace Commerce orders. | Delivery handled in Automations |
Why add Plandalf
What Squarespace’s own checkout can’t do
From Squarespace’s help centre. Squarespace Commerce is built for stores, and these are where sellers outgrow it.
Only the right half of the checkout is styleable
The left side cannot be customised, the checkout text cannot be changed and images or other content cannot be added to the page.
Code does not run on checkout pages
Squarespace says checkout pages do not support code injection, so a countdown or bump cannot be added there. A button on your own page can open a different checkout.
Its countdown timer is a cart hold, not a sale deadline
The reserved cart timer holds stock for 5, 10, 15 or 20 minutes across the whole store, on Plus and Advanced plans with version 7.1. It does not end a sale or lock in a price.
Sources: Styling your checkout page, Using code injection, Add a countdown timer to your store’s checkout.
Set it up
Add Plandalf to Squarespace in four steps
Hosted link first. Add the script when you want the checkout and countdown on the page.
- 1
Link a button to the hosted checkout
Add a button block and set its link to Your checkout link from the Offer’s Share tab. Publish and click it. No plan beyond your current one is needed.
- 2
Add the script in Code Injection
Paste your SDK script into the Footer field of Code Injection and Save. Squarespace places it before the closing body tag.
<script src="https://your-org.plandalf.dev/js/plandalf-sdk.js" async></script> - 3
Add a Code block with the button or countdown
Edit the page, add a Code block, leave the mode on HTML and paste your markup. For a countdown add a div with data-plandalf-promo.
<button data-plandalf-present="launch" data-plandalf-apply-promo="launch-week">Claim the launch price</button> <div data-plandalf-promo="launch-week"></div> - 4
Log out and test
Squarespace can hide code from you while you are logged in. View the page signed out, or use Preview in Safe Mode, then buy in test mode.
Gotchas
What catches people out on Squarespace
Code blocks need the right mode
JavaScript runs only in HTML mode with the script in script tags. CSS and JavaScript modes show the code as text.
Code can hide while you are logged in
Squarespace may not show code to a logged-in editor. Check the page logged out. Index pages and Ajax loading can also stop code rendering, and header transparency can drop page header code.
Pick the plan first
Squarespace says JavaScript and iframes in a Code block need a Core, Plus or Advanced plan, and Code Injection is on the same plans plus some legacy ones.
Squarespace does not support custom code
Support will not debug it. Keep the markup minimal and use the Plandalf docs for the attributes.
We have not published a tested walkthrough
These steps follow Squarespace’s help articles. We have not published screenshots from a Squarespace replay.
Integrations
Keep your site. Upgrade how it sells.
Plus a fully documented REST API and webhook layer for whatever’s not in the list.
Questions
Squarespace checkout and countdown questions
The short answers. The docs have the long ones.
How do I add a countdown timer to Squarespace?
Use a Plandalf Promo. Add the script in Code Injection, then put a div with data-plandalf-promo and your promo slug in a Code block. Squarespace’s own timer is a cart hold, not a sale deadline.
Can I add an upsell to Squarespace checkout?
Not on Squarespace’s checkout page, where code and added content are not supported. Open a Plandalf Offer from a button on your own page instead, with bumps and upsells built into it.
Can I use Stripe with Squarespace without Commerce?
Yes. Connect Stripe in Plandalf, publish an Offer and link a Squarespace button to the checkout. The payment goes to your own Stripe account and the sale is recorded in Plandalf.
Which Squarespace plan do I need for Plandalf?
A hosted link works on any plan with buttons. For a Code block with JavaScript, Squarespace says Core, Plus or Advanced.
Will Plandalf sales show up in Squarespace Commerce?
No. They are recorded in Plandalf and your payment provider, not as Squarespace orders.
Why does my Plandalf button not show on Squarespace?
Check the Code block is in HTML mode, you are viewing the page logged out, and the page is not inside an index page. Disable Ajax loading if code still does not render.
The team
Built by a team obsessed with conversion.
15+ years testing every pricing model under the sun. Every part of Plandalf comes from a real checkout problem we’ve had to solve ourselves.
No credit card required. Nothing to migrate.