Add HTML Snippet to Squarespace

Services like Autopilot Convert require adding HTML code to your website. The Convert HTML snippet is a single line of HTML with an image (<img>) element. This should typically be placed on all pages on a website. The easiest way to do this is by adding the snippet to the site-wide footer. (If you don't have a footer but do have a navigation menu, the snippet could also be placed in navigation or a site-wide header.)‍These instructions cover adding a snippet to the footer on a Wordpress website.

These instructions cover adding a snippet to the footer on a Squarespace website.

‍

Adding an HTML Snippet to Squarespace Footer

‍

1. Using the Built-in Footer Editor (Recommended)

Most Squarespace templates come with a built-in footer that you can edit using the page editor.

Steps:

1. Log into Squarespace and go to your website dashboard.

2. Click on “Pages”, then scroll down to “Footer” (this is available on most templates).

3. Edit the Footer:

• Click inside the footer area.

• Add text, images, buttons, or social links.

• You can also use blocks like “Newsletter Signup,” “Navigation Links,” etc.

4. Save your changes and preview the footer across your site.

🔹 This method is the easiest and works with all Squarespace templates.

2. Adding a Footer Using a Code Block

If you need a custom HTML footer, you can use a Code Block inside the built-in footer.

Steps:

1. Go to the Footer section in the Squarespace editor.

2. Click “Add Block” → Select “Code”.

3. Paste your custom HTML, such as:

</div>

document.getElementById("year").textContent = new Date().getFullYear();

</script>

4. Click “Save” to apply the changes.

🔹 This is useful if you need a custom-styled footer.

3. Adding a Footer Using Site-Wide Code Injection (Advanced)

If you need global control over your footer across all pages, you can use the Code Injection feature (available on Squarespace Business & Commerce plans).

Steps:

1. Go to Settings → Advanced → Code Injection.

2. In the Footer section, add your custom HTML & CSS:

</footer>

document.getElementById("year").textContent = new Date().getFullYear();

</script>

<style>

.custom-footer {

background: #333;

color: white;

text-align: center;

padding: 10px;

}

</style>

3. Click “Save” and check your site.

🔹 This method is best for adding fully custom footers.

4. Using a Floating Sticky Footer

If you want your footer to stay visible while scrolling, add this CSS in Design → Custom CSS:

footer {

position: fixed;

bottom: 0;

width: 100%;

background-color: black;

color: white;

text-align: center;

padding: 10px;

}

🔹 This is useful for creating a persistent call-to-action (e.g., newsletter signup or contact info).

‍

Which Method Should You Use?

✅ Built-in Footer Editor: Best for drag-and-drop customization

✅ Code Block: Best for custom HTML footers inside the default footer

✅ Code Injection: Best for site-wide footers on all pages

✅ CSS Sticky Footer: Best for a floating footer

‍