Add HTML, Markdown, CSS, and more to customize your site beyond its built-in features.

Use code blocks to add custom code to a page, blog post, sidebar, footer, or other content area. Code blocks are good options if you want to embed third-party widgets or customize pages beyond what's possible with other blocks. You can also use code blocks to render HTML and Markdown or display code snippets. Learn more about customizing your site with custom code.

Also try: Customize parts of your site with code injection

Note:

Custom code might break your site’s appearance or behavior, especially on mobile devices. Our support team can’t help you add custom code to your site or troubleshoot issues that arise from using it. We recommend these resources for more help:

1. The Squarespace forum
2. A Squarespace Expert

Video: Adding a code block to your page (7.0)

This one-minute video walks through adding a code block, choosing a code type, and displaying code as text for version 7.0.

Add a code block

Code blocks have a 400 KB limit, or about 300,000 characters.

To add a code block to a page or blog post:

1. Edit a page or post.
2. Hover over the section and click Add block or + to open the block menu, then click Code.
3. Open the block editor by clicking the pencil icon on the block.
4. Add your code in the text field.
5. If you're using the code block to display code snippets, switch the Display Source toggle on.

Render CSS or JavaScript in a code block

To add JavaScript or an iframe to a code block, your site needs to be on the Core, Plus, or Advanced plan. Learn more about what each plan includes.

Code blocks set to CSS or JavaScript display your code as text instead of rendering it. To render CSS or JavaScript, select HTML in the Mode menu, then wrap CSS in <style></style> tags and JavaScript in <script></script> tags.

Display code as text instead of rendering it

Code blocks format code snippets for readability, so they work better than text blocks for showing examples of code. To display your code as text, switch the Display Source toggle on. In code blocks set to CSS, JavaScript, or Plain Text, Display Source is always switched on.

Why doesn't my code appear while I’m logged in?

As a security measure, your code sometimes doesn't appear while you're logged in, even when visitors can view it. To view the embedded item, click Preview in Safe Mode.

Why isn't my code rendering on my site?

Custom code might not render if you added it to a page in an index page, or if Ajax loading is on. To test both causes:

1. Open the Pages panel.
2. Remove the page from the index page.
3. Log out of your site and check the page.
4. If your code still doesn't render, disable Ajax loading, then check the page again.

If your code still doesn't work, contact the service that gave you the code, because they know how their code is meant to work.

My code block wont let me edit my site

If a code block stops you from editing your site, disable scripts in preview, then edit or remove the code.