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

You can use the Code Block to add custom code to a page, blog post, sidebar, or footer. The Code Block is a good option if you want to embed third-party widgets or customize a page beyond what's possible with other blocks. You can also use the Code Block to display code snippets.

The Code Block renders HTML and Markdown.

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

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: The Code Block has a 400 KB limit, which is around 300,000 characters.

Tip: CSS and JavaScript display as text by default. To add them to a Code Block, 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 the Code Block automatically formats 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.

Troubleshooting

Your code also 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.

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?
30 out of 82 found this helpful
Using the Code Block