Is it possible to display data from SeatGeek API call on my Squarespace site?

Question

Is it possible to connect to the SeatGeek API to display local event data on a Squarespace site?

The Squarespace API docs all seem directed towards commerce-related goals.

I am familiar with how to connect to the SeatGeek API in the context of a mobile application. But I don't know whether connecting to APIs (other than those listed for commerce) from within a Squarespace is doable.

SeatGeek would be an unofficial integration . I've posted on the squarespace forums with no response, so asking here to see if anyone out there knows about it.

Thanks very much for any help!

Answer 1

Squarespace websites above the "Personal" plan tier support the addition of custom JavaScript via Code Blocks and Code Injection.

Therefore, if SeatGeek supports using their API via JavaScript (and it appears that they do), then you can obtain the data from within your Squarespace website.

Where within your site the code is added and what initialization methods are used will vary on a case-by-case basis. For example, factors include: whether you are using Squarespace 7.0 or 7.1 and whether the template you're using supports AJAX Loading and has it enabled.

However, regardless of where the code is added and the initialization methods used, it looks to me, based on what I see here, that obtaining data from SeatGeek via JavaScript is possible. (Select "JavaScript > XMLHttpRequest" or "JavaScript > Fetch" from the upper-right "Code Snippet" panel where it says "(Node.js) Unirest" by default):

var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
    }
});

xhr.open("GET", "https://seatgeek-seatgeekcom.p.rapidapi.com/events");
xhr.setRequestHeader("x-rapidapi-host", "seatgeek-seatgeekcom.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "SIGN-UP-FOR-KEY");

xhr.send(data);

Or, via fetch:

fetch("https://seatgeek-seatgeekcom.p.rapidapi.com/events", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "seatgeek-seatgeekcom.p.rapidapi.com",
        "x-rapidapi-key": "SIGN-UP-FOR-KEY"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.log(err);
});

While it varies on a case-by-case basis, in most cases you'll want to use the sitewide code injection area vs. code blocks or page-level code injection. Then, on Squarespace 7.0 sites, you'll want to wrap your code in:

window.Squarespace.onInitialize(Y, function() {
  // do stuff here
});

For Squarespace 7.1 sites on the other hand, one would usually wrap the code in:

document.addEventListener('DOMContentLoaded', function() {
  // do stuff here
}, false);

Finally, you'll need to think about how you're outputting the data. You could either add HTML markup via a Code Block in the body of the target page, or add the markup to the page as part of your JavaScript.