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 Adding custom code to your site.
On all plans, Code Blocks support plain text, HTML, Markdown, and CSS code surrounded by <style></style> tags.
Watch a video
Add a Code Block
To add a Code Block:
- Edit a page or post, click an insert point, and click Code from the menu. For help, visit Adding content with blocks.
- Add your code in the text field.
- If you're using the Code Block to display code snippets, switch the Display Source toggle on.
If you're using the Code Block to render code, ensure you select HTML or Markdown in the Type menu.
Enter or paste the code into the text field. To paste code, copy the code, then click into the field and press Ctrl + V (Windows) or Command + V (Mac).
Note: Code Blocks have a 400 KB limit, which is around 300,000 characters.
If you're using the Code Block to display code snippets, switch the Display Source toggle on.
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.
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.
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: Code-based 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. Code-based 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:
- Learn best practices for adding custom code.
- Read our general guide on code-based customizations.
- Visit the Squarespace Forum, our customer and developer forum.
- Hire a Squarespace Expert to help build custom code for your site.
- To learn more about getting personalized technical support or building a custom solution for your business, visit squarespace.com/select.