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.
Watch a video
Step 1 - Add the Code Block
- Open a page or post editor.
- Click an Insert Point or the +.
- Select Code from the menu.
- 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.
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.
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: