Website Weather Widget using a Google Sheet
Show today's weather on your website.
In this short tutorial we're going to show you how to create a Live weather widget on your website using a Google Sheet spreadsheet.
1. Create and populate your Spreadsheet
This spreadsheet will hold the weather data we're going to display on the webpage. If you need to edit anything data-wise, this will be where you'll do it.
To create your own spreadsheet containing live weather data, follow this tutorial on MixedAnalytics.com. If you'd like to do that later, use our example spreadsheet link below to proceed.
Example weather data spreadsheet link: https://docs.google.com/spreadsheets/d/1ZqFi0HTFFshwaSGaNL4lkAMT_FJ3izQSBXxaqXCzYGY/edit#gid=0
As you can see it contains today's weather information for London.
Our goal is to get this displayed on our website in a small attractive widget, as shown below.
On to the next step.
2. Create Spreadsheet API
Using sheet2api, Create your Spreadsheet API by pasting the spreadsheet link from the previous step into the form.
Click Create 🚀. Your new Spreadsheet API will be listed on the next page.
Great, on to the next step.
3. Create our webpage & weather widget
Create a file called index.html with the below contents.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>.card-text, .card-title { text-shadow: 1px 1px #333;}</style>
</head>
<body>
<div class="container">
<h1>Today's Website Weather Widget using a Spreadsheet</h1>
<br/>
<div data-spreadsheet-api="<YOUR_API_URL_HERE>">
<div class="card bg-dark text-white" style="width: 500px; height: 250px; background: url({{ Image }}); background-size: cover; ">
<div class="card-img-overlay">
<h5 class="card-title"><b>City: {{ Location }}</b></h5>
<p class="card-text"><b>Min: {{ Min Temp }}℃</b></p>
<p class="card-text"><b>Max: {{ Max Temp }}℃</b></p>
<p class="card-text"><b>🌅 Sunrise: {{ Sunrise }}</b></p>
<p class="card-text"><b>🌇 Sunset: {{ Sunset }}</b></p>
</div>
</div>
<br/>
</div>
<script src="https://sheet2api.com/v1/template.js"></script>
</div>
</body>
</html>
Now in that file replace <YOUR_API_URL_HERE> with the URL to your spreadsheet
API (from Step 2).
Save that file and open it up in your web browser. You should now see the weather data and images from your Spreadsheet via your sheet2api API!
When your Spreadsheet gets updated with weather data, so will your webpage, automatically! 🤖
Useful Links
It's as easy as that 🎉.
If you need help, please feel free to send a message via the contact page.