Do you want to display content from a Google Sheet on your website? This can be a simple way to update public-facing data without needing to change any website code. We can accomplish this in a couple of different ways outlined below:

Basic

The simplest way to embed Google Sheets data onto your webpage is to use Google’s “Publish Sheet” option. This option is the easiest and fastest to use but comes at a loss of customization.

1. Create a new Google Sheet (or you can use a previously created sheet)
2. Go to File > Publish to the Web
   
3. Switch to the “Embed” tab and click “Publish”
   
4. Copy the code from the text box to your webpage
   
5. The end result is an embedded table on your webpage
   

 

Advanced

A more advanced method (which allows for greater customization) of embedding Sheet data on your webpage is to get the data using the Google Sheets API and JavaScript.

Documentation:

• Authorize Requests >Acquiring and using an API key
• Using API Keys
• Managing API Keys
• Google Sheets API

1. Create an API Key
   1. Create a Project (If you do not already have one)
      1. Click Create Project
         
      2. Give the project a name and create
         
      3. Enable the Sheets API for the project
         1. “Go to Enabled APIs & Services”
            
         2. Click “+ Enable APIs and Services
         3. Search for Sheets
         4. Open the API that comes up and click the Enable button
   2. Create the API key
      1. Go to “Create Credentials” > “API Key”
         
      2. Copy the key you just created for later
   3. Restrict the API Key
      1. Click “Restrict Key” after creating the key
         
      2. Under “API Restrictions” choose Restrict Key and choose the Google Sheets API (If you do not see the Sheets API listed see step 3 under Create a Project above)
      3. Save
2. Create a new Google Sheet
3. Share your Google Sheet (with the public)
   1. Go to File > Share > Share with Others
      
   2. Set the sheet so anyone with the link can view
      
4. Create the API URL
   1. The basic URL you will need ishttps://sheets.googleapis.com/v4/spreadsheets/SHEET_ID/values/%27SHEET_NAME%27?alt=json&key=API_KEY&callback=displayContentSHEET_ID: This is part of the sheet url (it is the part between /d/ and /edit)
      In a link like https://docs.google.com/spreadsheets/d/17gZDMe7ysPbHVzzn_EeC8xReytHkVE/edit#gid=0 the SHEET ID is 17gZDMe7ysPbHVzzn_EeC8xReytHkVE
      SHEET_NAME: This is the name of the sheet the data is on (default is Sheet1)
      API_KEY: This is the API key you created above
5. Setup the JavaScript
   If you already know how to parse JSON with Javascript then the URL created above in step 4 is a link to a JSON response with a callback to a javascript function called displayContent. Otherwise, you can use the following code:

   
   <script type='text/javascript'>
   	//the displayContent function will be executed after we "fetch" the contents of a spreadsheet. The json parameter holds the spreadsheet's data
   
   	function displayContent(json) {
   		console.log(json)
   		//start an html table and write out our headers. You can have more or less headers. You will want one per column
   		var pre_html = '<table id = "my-table"><thead>\
   		<th>Col 0</th>\
   		<th>Col 1</th>\
   		<th>Col 2</th>\
   		</thead><tbody>';
   		//Create an empty string to hold the HTML. We will put table data here.
   		var actual_html = '';
   		//After we grab the table, close the HTML table.
   		var post_html = '</tbody></table>'
   		//figure out how many rows our spreadsheet has
   		var len = json.values.length
   		//loop through the spreadsheet, gathering data
   		for (var i = 1; i < len; i++) {
   			//for each row, add the following to actual HTML, grabbing it as a list, and then joining the list together as one long string.
   			actual_html += [
   			'<tr><td>', 
   			json.values[i][0], // sheet header  = Col 1 (columns are numebred and start at 0)
   			'</td><td>', 
   			json.values[i][1], // sheet header  = Col 2
   			'</td><td>', 
   			json.values[i][2], // sheet header  = Col 3
   			
   			/*
   			If you want to add more columns you can add them following this syntax
   			
   			'</td><td>', 
   			json.values[i][4], // sheet header  = Col 4
   			
   			*/
   			
   			'</td><td></td>',
   			'</tr>'
   			].join('');  
   		
   		
   	}
   	//put all three of our HTML strings into our div we made at the top of the page
   	document.getElementById('table-container').innerHTML = pre_html + actual_html + post_html
   
   }   
   
   </script>
   
   <!-- this is where the above function puts the table-->
   <div id='table-container' class="datatable-nosearch"></div>
   
   <!-- the link you made in step 4 Create the API URL above goes here -->
   <script src="https://sheets.googleapis.com/v4/spreadsheets/SHEET_ID/values/%27SHEET_NAME%27?alt=json&key=API_KEY&amp;callback=displayContent" type="text/javascript">
   	//Grab the data from our google spreadsheet, using the callback to call the function we just created 
   </script>