How to inject javascript into my Squarespace website

1. Inject JavaScript into Squarespace

You can add JavaScript to your Squarespace site by using Code Injection. Here’s how:

Method 1: Inject JavaScript Site-wide

• Go to your Squarespace dashboard.
• Click on Settings → Advanced → Code Injection.
• You will see sections for Header and Footer.
• Add your JavaScript inside <script> tags in the Footer section (recommended for site speed).
• Example:

<script>
  function myFunction() {
      alert("Hello World!");
  }
</script>

• Save your changes.

Method 2: Add JavaScript to a Specific Page

• Go to the page where you want to add the custom code.
• In the page editor, add a Code Block where you want to place the JavaScript.
• Inside the Code Block, add your JavaScript between <script> tags

Hey there! 👋

I’ve not used Squarespace in a while but as far as I can tell bes on their docs here this shold be doable:

https://support.squarespace.com/hc/en-us/articles/205815908-Using-code-injection#

You should be able to:

1. Add a Code Block:

   • Navigate to the page where you want to add the JavaScript.
   • Click the “+” icon to add a new block.
   • Select “Code” from the block options.

2. Insert Your HTML and JavaScript:

   • In the Code Block, switch to HTML mode.
   • You can now add your custom HTML and JavaScript.

Here’s a simple example where clicking a button loads the content of a file into a div on your page:

<!-- Your HTML -->
<button onclick="loadFile()">Click to Load Content</button>
<div id="content"></div>

<!-- Your JavaScript -->
<script>
  function loadFile() {
    fetch('https://your-site.squarespace.com/s/yourfile.txt')
      .then(response => response.text())
      .then(data => {
        document.getElementById('content').innerHTML = data;
      })
      .catch(error => console.error('Error loading file:', error));
  }
</script>

• Button: When you click the button, it triggers the loadFile() function.
• JavaScript: The fetch() function grabs the content from a file (like a .txt file) and then loads that content into the div with the ID content.

You’ll need to make sure the file you want to load is hosted somewhere accessible:

1. Upload the File:

   • Head over to Settings > Files in your Squarespace dashboard.
   • Upload your file, and grab the URL provided by Squarespace.

2. Update the JavaScript:

   • Replace 'https://your-site.squarespace.com/s/yourfile.txt' in the fetch() function with the URL of your uploaded file.

After you’ve added the code, save your changes and preview the page. When you click the button, it should load the content from the file right into your page.

Let me know how it goes.

- Bobby