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 the surrounding content blocks. This is the right method for embedded forms, widgets, maps, videos, payment buttons, and any HTML that should appear at a particular position on a page.
How to Add a Code Block
Open the page editor, click a content insertion point (the plus icon between sections or blocks), and select Code from the block menu. If you do not see Code in the initial menu, click "More" to expand the full list. Paste your HTML into the Code Block editor, make sure the display mode is set to HTML (not Markdown), and click Apply.
The embedded HTML renders immediately in the page preview. Check that it displays correctly on both desktop and mobile. Some embedded elements - particularly iframes and widgets - may need width adjustments to fit different screen sizes. For responsive embedding techniques, our guide to adding custom CSS to Squarespace covers how to make embedded elements adapt to any screen size.
What You Can Embed with Code Blocks
Third-party forms: Google Forms, Typeform, JotForm, Wufoo - paste the embed code and the form renders directly on your page. Booking widgets: Calendly, Acuity, and other scheduling tools provide embed snippets. Payment buttons: Shopify Buy Buttons, PayPal buttons, Stripe payment links. Maps: Google Maps embed codes display interactive maps. Social feeds: Instagram, Twitter, and Facebook embed codes for individual posts or feeds. Custom HTML elements: Countdown timers, pricing tables, accordion menus, and any other HTML structure.
Method 2: Embedding HTML Using Code Injection
Code Injection inserts HTML, CSS, or JavaScript into your site's header or footer - running on every page rather than a single location. This is the right method for analytics scripts, tracking pixels, custom font imports, cookie consent banners, and any code that needs to load globally.
Access Code Injection at Settings > Advanced > Code Injection. The Header field inserts code into the <head> tag. The Footer field inserts code before the closing </body> tag. For a detailed walkthrough of every injection point, our guide to custom code injection on Squarespace covers header, footer, page-level, and order confirmation injection.
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 - putting a site-wide script in a Code Block means it only runs on one page, and putting 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. 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.
How to Embed Common HTML Elements in Squarespace
Embedding Google Forms
Open your Google Form, click the Send button, select the embed tab (the angle brackets icon), and copy the iframe code. Paste it into a Squarespace Code Block. Adjust the width attribute to "100%" for a responsive form that fills the available space. Set the height to match your form's length - 600 to 800 pixels works for most forms.
Embedding YouTube Videos Beyond the Built-In Block
Squarespace includes a native Video Block, but embedding via Code Block gives you more control. Copy the embed code from YouTube (Share > Embed), paste it into a Code Block, and wrap it in a responsive container div. This lets you control aspect ratio, autoplay settings, and other parameters that the native Video Block does not expose.
Embedding Custom HTML Tables
Squarespace does not include a native table block. To add a data table, create the HTML table markup (or use an online table generator), paste it into a Code Block, and style it with inline CSS or a linked stylesheet. For consistent table styling across your site, add the CSS rules to Design > Custom CSS rather than using inline styles. For broader design customization, our Squarespace design tips guide covers visual consistency strategies.
Best Practices for HTML Embedding in Squarespace
Always use responsive widths. Set embedded iframes and divs to width="100%" or use CSS max-width to ensure they adapt to mobile screens. Fixed-width embeds break on smaller devices.
Test on mobile after embedding. Preview your page on an actual phone - not just the Squarespace mobile preview - to confirm the embedded element renders correctly and does not overflow or overlap other content.
Keep Code Blocks organized. If you embed multiple HTML elements on one page, add an HTML comment at the top of each Code Block describing what it contains. This makes future editing easier when you need to find and update a specific embed.
Validate your HTML before embedding. Malformed HTML - unclosed tags, missing quotes, or broken attributes - can affect surrounding page elements. Paste your code into an HTML validator before adding it to Squarespace.
Do not embed untrusted code. Only embed HTML from sources you trust. Malicious code can steal visitor data, redirect traffic, or inject unwanted content. Verify the source of every embed snippet. For help with Squarespace's code editing tools, our guide to adding custom code to Squarespace covers safe code practices.
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 - missing closing tags or incomplete script references can prevent rendering. Check browser console for JavaScript errors if the embed requires scripts.
Embed Breaks Page Layout
An iframe or div with a fixed width larger than the page container will push content off-screen. Set the width to 100% or wrap the element in a div with overflow: hidden to prevent layout breaks.
Embed Works on Desktop but Not Mobile
Most embedding issues on mobile are caused by fixed dimensions. Replace fixed pixel widths with percentage widths and test on actual mobile devices. For iframes, wrap them in a responsive container div with padding-based aspect ratio control. For mobile optimization strategies, our guide to customizing your Squarespace website covers responsive design fundamentals.
Frequently Asked Questions
How do I embed HTML code in Squarespace?
Do I need a specific Squarespace plan to embed HTML?
Can I embed JavaScript in Squarespace?
What is the difference between Code Blocks and Code Injection in Squarespace?
Why is my embedded HTML not showing in Squarespace?
How do I make embedded HTML responsive on Squarespace?
Can I embed Google Forms in Squarespace?
Embed Anything on Your Squarespace Site
HTML embedding is the key to extending Squarespace beyond its built-in features. Forms, widgets, payment buttons, maps, videos, and custom elements - if it exists as HTML, you can embed it on your Squarespace site. Use Code Blocks for page-specific embeds, Code Injection for site-wide scripts, and always test on mobile before publishing.
The visual editor handles the structure. Your embedded code handles the functionality. Together, they let you build a Squarespace site that does exactly what you need.
* Read the rest of the post and open up an offer