Web Dev Notes

Blog about web development by Robert Dawson

Easy way to include HTML in Squarespace pages


How do you include snippets of HTML code into multiple pages on your Squarespace site?


There are several ways to do this, but one particularly straightforward solution was to add jQuery to the head of every page, create an HTML page to include, and then load part of that page into an empty DOM element. Here are instructions based on what I did. You can use whatever DOM element (e.g., <div> or <p>) and class or id you like.

First, insert jQuery into the <head> of every page.

  1. Click Website Management.
  2. Under Structure, click Website Settings.
  3. Click Code Injection.
  4. In the "Extra Header Code" text field, add:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
  $('#updates').load('/updates/ #content');

<script type="text/javascript">$(function(){$('#updates').load('/updates/ #content');});</script>

Second, create a new HTML page.

  1. Click Website Management.
  2. Under Structure, click Architecture.
  3. Add a new section. I called mine "Hidden from nav."
  4. In this section, click "add page" and make a new HTML page. I called mine "Updates."
  5. Go to that page and add the content you want to display elsewhere.

Third, add an empty DOM element to your target page(s).

  1. Go to a page where you want to display this new HTML page.
  2. Click "edit page" and, in HTML view, add an empty DOM element.
  3. Give that element a class or id, like this:
<div id="updates"></div>

And you're done! It's more than one step (and Squarespace should offer this functionality natively) but it's still easy and quick to implement.

The only small issue I found with this solution is that Squarespace adds another "edit page" link above the included code, which opens the edit window for the page you're on and not the included page. To edit that page, just go to it directly.