Your website is a powerful tool, but chances are, you use other software to run your business behind the scenes. Maybe you use Calendly for booking calls, Flodesk or ConvertKit for beautiful email opt-ins, or HoneyBook for client questionnaires.
Instead of sending your visitors away to a different website through a button, you can actually embed those tools directly onto your Squarespace pages! This creates a seamless, professional experience for your clients.
Here is how to embed almost any third-party tool using a Code Block.
Step 1: Copy the Code from Your Provider
Before you start in Squarespace, you need the actual code.
Log into your third-party software (like Calendly or Flodesk).
Look for an option that says Share, Publish, or Embed.
You are looking for a chunk of code (usually called HTML or an Inline Embed Code). It often starts with <script> or <iframe>.
Copy that entire block of code to your clipboard.
Step 2: Add a Code Block in Squarespace
Go to your Squarespace site and enter Edit mode on the page where you want the widget to appear.
Click the "+" icon to add a new block.
Scroll down the menu (or type in the search bar) and select Code.
Drag and resize this new Code block roughly to the size you want your widget to be.
Step 3: Paste Your Code
Click the Code block and hit the Pencil Icon (Edit).
A menu will pop up with some default text inside (usually <p>Hello, World!</p>).
Delete that default text, and paste the code you copied from your third-party provider.
Click anywhere outside the menu to close it.
Step 4: The "Script Disabled" Warning (Don't Panic!)
When you paste your code, you probably won't see your beautiful calendar or form right away. Instead, you might see a gray box that says "Script Disabled" or "Preview in Safe Mode."
This is totally normal! Squarespace disables complex scripts while you are in Edit mode so that the code doesn't accidentally break the page builder.
To actually see your embedded widget, you simply need to click SAVE in the top left corner, and then exit Edit mode to view the page normally.
💡 DESIGNER SECRETS FOR EMBEDDING:
The Business Plan Requirement: To use advanced code blocks for third-party widgets (and to add any custom CSS to your site), Squarespace requires you to be on the Business Plan or higher. If you are on the basic Personal plan, these scripts will usually be blocked from loading.
Mind the Mobile View: Just like photos and text, you need to check how your Code block looks on mobile! Switch to the mobile view and stretch the code block so it has plenty of room. If the embedded form gets cut off on phones, you just need to drag the bottom of the blue block down to make it taller.
Use the "Embed" Block for Simple Links: If you are just trying to embed a YouTube video, a Spotify playlist, or a simple podcast episode, you don't need messy code! Instead of the "Code" block, use Squarespace's built-in Embed block, where you can simply paste the URL, and Squarespace handles the rest.
Widget looking seamless? Make sure to hit SAVE!
Congratulations, you have officially conquered Module 4: Dynamic Blocks & Advanced Features! You now know how to make your website interactive, engaging, and deeply connected to your business systems.
Next up, we are moving into a brand new section: Module 5: Blogging. If your template includes a blog (or you want to start one), this module is for you!