Calling APIs inside SquareSpace

Square space is a no code platform. You are constrained by what it provides. Let’s consider you are developing a website to display your favorite books. You want to dynamically query a URL and display the data in your website. There isn’t a straightforward way to do this now. In this tutorial I will explain how you can do this.

Goto square space, and add a new page. Once there, go and add a code snippet as below.

Next, you would need to select the HTML option. Uncheck the checkbox display source. This is very important. Else it will display the javascript code as plain text.

Now comes the fun part. Here I am using a random API to display the data.

<p id="demo"></p>
<script>
document.addEventListener('DOMContentLoaded', function() {
  fetch("https://site.api.espn.com/apis/site/v2/sports/football/college-football/news", {
    "method": "GET"
})
.then(response => response.json())
.then(data => {
    document.getElementById("demo").innerHTML = data["header"];
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            if (key === "articles") {
                // display data here
            }
        }
    }
    console.log(data);
})
.catch(err => {
    console.log(err);
});
}, false);
</script>

As you can see in the above code snippet, I am using JS to display the data from the endpoint. You can copy this code into square space to display the data.

Leave a Reply

Your email address will not be published. Required fields are marked *