Display data from a specific cell in google sheet on a page.

Site URL: http://www.musicfornyc.org

I'd like to display data from a specific cell in a google sheet and use a code block to display it. For example, I want to be able to show a total dollar amount raised via donations and sales from our site.

What you want is doable. Although a bit involved. In general and in its simplest form you need a Google sheet that is public. The Google sheet id and a Google API Key set up to access the Google Sheets API.

Then in a code block you'd do something like the following. I'm using Javascript/jQuery here.

<div id="specific-cell-from-google-sheet">

  </div>
  
<script>

  ( ( ) => {
  
    const googleApiKey = '[enter google api key]';
    
    const googleSheetId = '[enter google sheet id]';
    
    const googleSheetName = 'Sheet1';
    
    const googleSheetRange = 'A1';
    
    const googleSheetsApiUrl = 'https://sheets.googleapis.com/v4/spreadsheets';
    
    const url = googleSheetsApiUrl +
    
      '/' +
      
      googleSheetId +
      
      '/values/' +
      
      googleSheetName +
      
      '!' +
      
      googleSheetRange;
      
    $.getJSON ( url, { key : googleApiKey }, function ( data ) {
    
      $( '#specific-cell-from-google-sheet' ).text ( data.values [ 0 ] );
      
      } );
      
    } ) ( );
    
  </script>

These are not instructions about how to do something specific but a guide on one way a particular goal might be reached.

There is voluminous information on the web about the elements involved.

You can publish the spreadsheet in html format and use ajax to fetch for its data, using a javascript snippet