HTML Code Embedding Squarespace

Quick Reference: Which Method to Use

Before touching the editor, match your use case to the right method. Using the wrong insertion point is the fastest way to create embedding problems that are hard to diagnose.

HTML Embedding by Squarespace Plan

Not every Squarespace plan grants the same access to custom code. Getting this wrong wastes time, so here is exactly what each plan supports.

Personal plan: No Code Blocks. No Code Injection. Markdown Blocks are available but only accept basic static HTML, with no script tags or iframes. This plan is not suitable for custom widget or form embedding.

Business plan: Full access to Code Blocks and Code Injection. This is the minimum plan required for any meaningful HTML embedding. JavaScript runs in Code Blocks and Code Injection. A Squarespace badge appears in the site footer on Business plans.

Commerce Basic and Commerce Advanced: Same code access as Business, with the Squarespace footer badge removed. These plans add e-commerce features but do not change what you can do with HTML embedding.

Enterprise: Same embedding tools, plus dedicated support that can assist with complex custom code implementations.

Method 1: Embedding HTML Using Code Blocks

Code Blocks are the most common way to embed HTML in Squarespace. They insert your code at a specific location on a specific page, rendering it inline with surrounding content. This is the right method for embedded forms, widgets, maps, payment buttons, and any HTML element that belongs at one spot on one page.

For a dedicated guide on video embedding specifically, see how to add a video to Squarespace.

How to Add a Code Block

Open the page editor and click a content insertion point (the plus icon between sections or blocks). Select Code from the block menu. If it does not appear in the initial list, click "More" to expand all block types. Paste your HTML into the Code Block editor, confirm the display mode is set to HTML (not Markdown), and click Apply.

The embedded HTML renders immediately in the page preview. Check the output on both desktop and mobile. Some embedded elements, particularly iframes and widgets with fixed dimensions, need width adjustments to display correctly on smaller screens. Our guide to adding custom CSS to Squarespace covers how to make embedded elements adapt to any screen size.

Specific Embeds and How to Handle Each

Google Forms: Open the form, click Send, select the embed tab (the angle-bracket icon), and copy the iframe code. Paste into a Code Block. Set width to "100%" and height to 600-800px depending on form length.

HubSpot forms: In HubSpot, go to Marketing > Forms, select your form, and click Share > Embed. Copy the JavaScript snippet (not the iframe version, as the JS version handles validation and styling correctly). Paste it into a Code Block. HubSpot's script renders the form dynamically, so the Code Block will appear blank in the editor. The form appears correctly on the published page.

Calendly widgets: On your Calendly event page, click Share > Add to Website, then select "Inline Embed" for a form embedded directly in the page. Copy the code snippet and paste into a Code Block. The inline embed requires a minimum height of around 630px to display without a scrollbar.

Stripe payment links: Stripe's "Buy Button" feature generates an embeddable button. In the Stripe Dashboard, go to Payment Links, select a link, and click "Buy Button." Customize the button style, then copy the two-part embed: a script tag and a stripe-buy-button element. Paste both into a single Code Block. The script tag must be present in the same Code Block for the button to initialize.

PayPal buttons: In PayPal, create a payment button via Tools > PayPal Buttons and copy the generated HTML. Paste into a Code Block. PayPal buttons use a form element with an action URL. Keep the entire form block intact or the button will not process payments.

Google Maps: On Google Maps, find your location, click Share, select "Embed a map," and copy the iframe code. Paste into a Code Block and set width to "100%".

Custom HTML tables: Squarespace does not include a native table block. Build your table markup (or use an HTML table generator), paste it into a Code Block, and add inline styles or link to Design > Custom CSS for consistent table styling across the site. For broader design approaches, our Squarespace design tips guide covers visual consistency strategies.

Method 2: Embedding HTML Using Code Injection

Code Injection inserts HTML, CSS, or JavaScript into the site header or footer, running on every page rather than at one specific location. This is the right method for analytics scripts, tracking pixels, custom font imports, cookie consent banners, live chat widgets, and any code that needs to load globally.

Access Code Injection at Settings > Advanced > Code Injection. The Header field inserts code inside the <head> tag. The Footer field inserts code just before the closing </body> tag. For a full walkthrough of every injection point, see our guide to custom code injection on Squarespace.

Header vs. Footer: Which Field to Use

Put analytics scripts, meta tags, and font imports in the Header. These need to load before the page content renders. Put chat widgets, exit-intent scripts, and anything that interacts with the DOM in the Footer. These need the page to load first. Putting a DOM-dependent script in the Header is a common cause of widgets that silently fail to initialize.

When to Use Code Injection Instead of Code Blocks

Use Code Injection when the code needs to run on every page: analytics tracking, site-wide widgets, custom fonts, and meta tags. Use Code Blocks when the code should only appear at a specific location on a specific page. Mixing these up is the most common HTML embedding mistake. A site-wide script in a Code Block means it only runs on one page, and a page-specific widget in Code Injection means it appears everywhere.

Method 3: Embedding HTML in Markdown Blocks

Markdown Blocks in Squarespace also accept raw HTML. This method is less common than Code Blocks but useful when you are mixing Markdown-formatted text with HTML elements on the same block. Add a Markdown Block, switch to raw HTML mode, and paste your code.

The main limitation of Markdown Blocks is that they do not support JavaScript. Script tags are stripped. If your embed code includes script tags, use a Code Block instead. Markdown Blocks are best for static HTML: formatted text, tables, styled divs, and image galleries that do not require JavaScript functionality.

Best Practices for HTML Embedding in Squarespace

Set widths to 100%. Fixed-pixel widths on iframes and divs break on mobile. Use width="100%" or CSS max-width instead of hardcoded values.

Test on a real device, not just the preview. The Squarespace mobile preview gives a general sense of layout but does not replicate all browser behaviors. Load the published page on an actual phone to confirm the embed renders correctly.

Label your Code Blocks. Add an HTML comment at the top of each Code Block describing its contents, for example <!-- HubSpot contact form -->. This makes future edits faster when a page has multiple embeds.

Validate before embedding. Malformed HTML (unclosed tags, missing quote characters, broken attributes) can affect layout elements outside the Code Block. Paste your code into an HTML validator before adding it to the page.

Only embed code from sources you trust. Malicious scripts can capture visitor data or inject unwanted content. Verify every embed snippet before publishing. For safe code practices, our guide to adding custom code to Squarespace covers this in detail.

Troubleshooting HTML Embedding Issues

Embedded Code Not Rendering

Check that the Code Block is set to HTML mode, not Markdown. Verify the code is complete, as missing closing tags or broken script references prevent rendering. Open the browser console (F12 > Console tab) and check for JavaScript errors if the embed relies on a script.

Embed Breaks Page Layout

An iframe or div with a fixed width wider than the page container pushes content off screen. Set width to 100% or wrap the element in a div with overflow: hidden. Also check whether the embed includes a hardcoded min-width in its own styles, which can override your CSS.

Embed Works on Desktop but Not Mobile

Fixed pixel dimensions are almost always the cause. Replace fixed widths with percentage values. For iframes that need a locked aspect ratio, wrap them in a container div with padding-bottom: 56.25% (for 16:9) and set the iframe to position: absolute; width: 100%; height: 100%. Our guide to customizing your Squarespace website covers responsive design fundamentals in detail.

Third-Party Widget Blocked by HTTPS

Squarespace sites run on HTTPS. If you embed a widget from an HTTP-only source, browsers block it as mixed content and display nothing. Check whether the third-party service offers an HTTPS embed URL. If they only provide HTTP, contact their support team or switch to a service that supports HTTPS.

Iframe Shows a Blank Box

Some services set X-Frame-Options: DENY or Content-Security-Policy: frame-ancestors 'none' on their servers, which blocks their pages from loading inside any iframe. This is a server-side restriction with no workaround from Squarespace's side. Use the service's JavaScript embed method instead of the iframe URL.

HubSpot or JavaScript Widget Appears Blank in the Editor

JavaScript-rendered widgets (HubSpot forms, certain chat tools, dynamic countdown timers) render on the published page, not in the Squarespace editor preview. The Code Block will appear blank while editing. Click "Done" and view the published page to confirm the widget loads. Do not assume the embed is broken just because the editor shows nothing.

Stripe Buy Button Not Initializing

Stripe's Buy Button requires both the <script> tag and the <stripe-buy-button> element to be present in the same Code Block. If you paste them into separate Code Blocks, the button element renders but the script does not find it and the button stays blank. Always keep both parts of the Stripe snippet in a single Code Block.

Calendly Widget Cutting Off

Calendly's inline embed defaults to a minimum height of around 630px. If the Code Block container is shorter, the widget gets cut off or shows a scrollbar inside the embed frame. Set the height attribute on the Calendly container div to at least 630px, or taller if your event type has additional fields.

Embed Anything on Your Squarespace Site

HTML embedding is what turns a Squarespace template into a site that does exactly what your business needs. Forms, booking widgets, payment buttons, maps, chat tools, custom timers: if it exists as HTML or a JavaScript snippet, it can live on a Squarespace page.

Use Code Blocks for page-specific embeds, Code Injection for site-wide scripts, and Markdown Blocks for static HTML without JavaScript. Match your plan level to what you need, keep widths responsive, and always check the published page rather than the editor preview for JavaScript-rendered elements.