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

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.

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

On all plans, Code Blocks support plain text, HTML, 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

Add a Code Block

To add a Code Block:

  1. Edit a page or post, click an insert point, and select Code from the menu. For help, visit Adding blocks.
  2. Add your code in the text box.
  3. If you're using the Code Block to display code snippets, check Display Source.
  4. Click Apply to save your changes.

Add code

If you're using the Code Block to render code, ensure you select HTML or Markdown in the drop-down menu.

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

Code Blocks set to CSS or JavaScript display code as text by default. To render CSS or JavaScript in Code Blocks, select HTML from the drop-down menu. Then, for CSS, surround the code with <style> </style> tags. For JavaScript, surround the code with <script> </script> tags.

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

Display source

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

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

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

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 you added to a Code Block, click Preview in Safe Mode to view the embedded item.

Troubleshooting

If you're having issues with Code Blocks, keep in mind:

  • 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 Code Block issues prevent you from editing your site, disable scripts in preview to edit or remove the code.

If you're still having trouble, we recommend reaching out to the source (for example, the service where you received code 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?
87 out of 244 found this helpful