Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using Code Blocks

You can use Code Blocks to add custom code to a page, blog post, sidebar, or footer. 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 display code snippets or render HTML and Markdown.

To learn more about choosing the best block for custom content, visit Embed Blocks vs. Code Blocks.

On all plans, Code Blocks support HTML, plain text, Markdown, and CSS code surrounded by <style></style> tags.

Adding JavaScript or iframes to Code Blocks is a Premium feature available in Business and Commerce plans.

Watch a video

Step 1 - Add the Code Block

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Select Code from the menu.
  4. For more detailed steps, visit Adding blocks

Step 2 - Add code

If you're displaying content with the Code Block, ensure that HTML or Markdown is selected in the drop-down menu.

Then enter or paste the code into the box and remove the <p>Hello, World!</p> placeholder. To paste the code, copy the code, then click in the box and press Ctrl  + V (Windows) or Command + V (Mac).

Note: Code Blocks have a 400 KB limit, which is around 300,000 characters.

Tip: CSS and JavaScript display as text by default. To add them to Code Blocks, choose the HTML drop-down and add tags. Surround CSS code with <style></style> tags and surround JavaScript with <script></script> tags.

Step 3 - Display source (optional) 

If you're using the Code Block to display code, check Display Source.

This is useful for showing examples of code, since Code Blocks automatically format code snippets for readability, making it a better option than the Text Block.

Note: Display Source is always checked for the CSS, JavaScript, and Plain Text options.

Step 4 - Save

Click Apply to publish your changes.

Preview embedded code

As a security measure, sometimes your code won't appear when you're logged in, even if visitors can see it. If you can't see code that you added to a Code Block, you can Preview in Safe Mode to view the embedded item.


  • Code Blocks have a 400 KB limit, which is around 300,000 characters.
  • Your code might not render if you've added it to a page within an Index. To test, remove the page from the Index within the Pages panel and log out of your site.
  • Ajax loading can cause issues with custom code. To test, disable Ajax to see if you still experience the issue.

If you're still having trouble viewing the code, we recommend reaching out to the source (for example, the service where you received a code snippet for a widget) as they're most familiar with the way it’s supposed to work.

Note: Third-party customization falls outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting of custom code. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Third-party customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:
Was this article helpful?
85 out of 237 found this helpful