Squarespace Code Block

How to Add a Code Block in Squarespace

Step 1: Open the Page Editor

Navigate to the page where you want to add custom code. Click Edit to open the page editor. Click a content insertion point (the plus icon between blocks or sections).

Step 2: Select Code from the Block Menu

In the block menu, find and click Code. If it does not appear in the initial list, click More to see the full block library. The Code Block opens a text editor panel.

Step 3: Paste or Write Your Code

Enter your HTML, CSS, or JavaScript in the editor. Check that the display mode at the bottom is set to HTML (not Markdown). Click Apply to save. The code renders immediately in the page preview at the position where you placed the block.

Step 4: Preview and Test

Check the rendered output in the page preview. Open the published page in a new browser tab to verify it works on the live site. Test on mobile to ensure the embedded content is responsive. If something looks wrong, click the Code Block to reopen the editor and adjust your code.

What You Can Build with Squarespace Code Blocks

Embedded Third-Party Widgets

The most common Code Block use case is embedding third-party tools - Google Maps, Calendly booking widgets, Typeform surveys, Shopify Buy Buttons, social media feeds, and any service that provides an HTML embed code. Paste the embed code into a Code Block and it renders on your page. For embedding techniques, our guide to HTML code embedding on Squarespace covers every common widget type.

Custom HTML Elements

Build page elements that the visual editor cannot create - pricing tables, comparison charts, team member cards, FAQ accordions, custom call-to-action banners, and styled data tables. Write the HTML structure in the Code Block and style it with Custom CSS. For HTML building techniques, our guide to Squarespace custom HTML covers common elements and responsive design.

Interactive JavaScript Components

Code Blocks support JavaScript alongside HTML. Build interactive calculators, dynamic content filters, countdown timers, tabbed content sections, and animated elements. The JavaScript runs in the context of the page, so it has access to the DOM and can modify surrounding Squarespace elements if needed.

Custom Styled Text Sections

For text layouts that the standard Text Block cannot produce - multi-column text, pull quotes with custom styling, highlighted text boxes, or text with background colors - a Code Block with HTML and inline CSS gives you full control over the presentation.

Code Block vs. Code Injection vs. Custom CSS

Code Block: Inserts code at a specific position on a specific page. Best for embedded widgets, custom HTML elements, and page-specific interactive components. Renders inline with surrounding content blocks.

Code Injection: Inserts code into the header or footer of every page (or a specific page's header). Best for analytics scripts, tracking pixels, custom font imports, and site-wide JavaScript. Does not render visible content at a specific page position.

Custom CSS: Accepts CSS rules only - no HTML or JavaScript. Applies to every page. Best for visual styling changes to existing elements. Available on all plans. For a detailed comparison, our guide to custom code injection on Squarespace covers every injection point.

Code Block Best Practices

Set the mode to HTML. The Code Block editor has a display mode toggle at the bottom - HTML and Markdown. For most use cases, you want HTML mode. Markdown mode does not support JavaScript and processes the content differently.

Keep code clean and commented. Add HTML comments explaining what each section of code does. If you return to edit the Code Block months later, the comments save you from guessing what each div is for.

Style with Custom CSS, not inline styles. While inline styles work in Code Blocks, they are harder to maintain and cannot be overridden by media queries for responsive design. Add class names to your HTML elements and write the CSS rules in Design > Custom CSS. For CSS techniques, our guide to adding custom CSS to Squarespace covers best practices.

Make everything responsive. Use percentage widths instead of fixed pixels. Add CSS media queries for mobile breakpoints. Test on actual mobile devices. A Code Block that looks great on desktop but breaks on mobile is worse than having no custom element at all.

Validate your HTML. Malformed HTML - unclosed tags, missing quotes, broken nesting - can affect the rendering of surrounding Squarespace blocks. Paste your code into an HTML validator before adding it to the Code Block.

Minimize JavaScript in Code Blocks. For small, page-specific scripts, Code Blocks work fine. For larger scripts or libraries, load them through Code Injection and reference them from the Code Block. This keeps the Code Block clean and ensures scripts load in the correct order.

Common Code Block Mistakes

Using Markdown mode for HTML. If your embed code or HTML is not rendering, check the display mode toggle. Markdown mode strips or alters HTML tags. Switch to HTML mode.

Forgetting that Code Blocks are page-specific. A Code Block only exists on the page where you added it. If you need the same element on multiple pages, you need to add separate Code Blocks to each page - or use Code Injection for site-wide elements.

Not testing on mobile. Fixed-width elements in Code Blocks are the most common cause of horizontal scroll bars on mobile Squarespace pages. Always set widths to 100% or use max-width containers.

Loading heavy scripts inline. A Code Block that loads a large JavaScript library adds that download to the specific page's load time. If the library is used on multiple pages, load it once through Code Injection and reference it from each Code Block. For performance considerations, our Squarespace performance tweaks guide covers script optimization.

Squarespace Code Block Examples

These are the most practical Code Block patterns you can drop into any Squarespace page.

Responsive Embed (for any iframe widget)

<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">   <iframe src="YOUR_EMBED_URL" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allowfullscreen></iframe> </div>

This wrapper makes any fixed-size iframe - Calendly, YouTube, Vimeo, Google Maps - fully responsive on mobile. Replace YOUR_EMBED_URL with the embed source from whichever service you are integrating.

Custom Styled Button

<a href="/your-page" style="display:inline-block; background:#000; color:#fff; padding:14px 28px; text-decoration:none; font-family:sans-serif; font-size:15px; border-radius:4px;">Book a Call</a>

Use this when you need a button with a specific style that does not match your theme's default button styles. Adjust the background colour, padding, and font to match your brand.

Simple Announcement Banner

<div style="background:#f5f0e8; border-left:4px solid #c8a96e; padding:16px 20px; font-family:sans-serif; font-size:14px;">   <strong>Limited time:</strong> Book before June 30 and save 20%. </div>

Add this above a pricing section or service description to draw attention to a promotion without affecting your template's built-in announcement bar.

Troubleshooting Code Block Issues

Code Not Rendering

Check the display mode (HTML vs. Markdown). Verify the code is complete - missing closing tags or incomplete script references prevent rendering. Check the browser console for JavaScript errors.

Code Block Breaks Page Layout

An element with a fixed width larger than the page container causes overflow. Set width to 100% or wrap elements in a container with overflow: hidden. Unclosed HTML tags can also affect surrounding blocks - validate your HTML.

Code Works in Preview but Not on Published Site

Browser caching can show the old version of the published page. Clear cache or check in incognito. Some scripts behave differently in the editor preview vs. the live site because the editor loads additional Squarespace scripts that may conflict. For design consistency, our Squarespace design tips guide covers preview and testing workflows.

Use Code Blocks to Build What the Editor Cannot

The Squarespace Code Block is the most powerful content block available. It bridges the gap between the visual editor's limitations and the full capabilities of HTML, CSS, and JavaScript. Embedded widgets, custom elements, interactive components, and styled sections - all of it lives in Code Blocks.

Keep your code clean, style with Custom CSS rather than inline styles, make everything responsive, and test on mobile. A well-implemented Code Block enhances your page seamlessly. A poorly implemented one breaks it visibly.