Purpose:

The following code below can be used to configure a page block that will fetch row from a Google Spreadsheet and display the data. The example here is based on a hands-on museum donor list. This works in SquareSpace 7.1, I’m not sure if it can be adapted to work in 7.0. You can see a working example here.

Steps:

  1. Create a Google Docs spreadsheet, public view on web (see sample below)

  2. Include link to jQuery

  3. Add code javascript functions and css

  4. Create code block on a new, or existing page

Include link to jQuery:

The javascript functions needed require the inclusion of a reference to jQuery. 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

Add code for javascript functions and css

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@3af1806/donor.js"></script>
<link rel='stylesheet' href="https://cdn.jsdelivr.net/gh/grcrane/sq-grcrane@3af1806/donor.css" />

Create code block on a new or existing page

<script>
$( document ).ready(function() {
    // initialize based on current checkboxes
    var file_id = '1Euo2kWx3lMC60XIAE7oUgXjEjoXkktFU3cW3YpZKLKw'; // grcrane319 
    file_id = '1wKXKSAjtqRw1aUQ7jlqY0bnE3ehiMW82RLekVSkQukk';
    do_donor_wall2(file_id);
});
</script>
<h4>Donor Wall</h4>
<div id="donorWall"></div>

Source code:

Javascript: https://github.com/grcrane/sq-grcrane/blob/main/donor.js

CSS: https://github.com/grcrane/sq-grcrane/blob/main/donor.css

Spreadsheet: https://docs.google.com/spreadsheets/d/1wKXKSAjtqRw1aUQ7jlqY0bnE3ehiMW82RLekVSkQukk/edit?usp=sharing