I stumbled upon Humaan’s ↗ (Perth based digital agency) site while looking for some website design inspiration. The site beautifully designed with lovely little animations, great typography and colours, but what caught my attention was the dynamic weather information in the footer. And this wasn’t weirdly plugged in iframe widget.
I had no idea how they did it (surprise, I’m a designer), but I wanted to figure out a way to do the same on my Webflow site.
My first requirement was for it to look neat and nicely integrated. And not some plugin which had its own formatting. One way (at least based on my limited knowledge of things) of having dynamic information on the front end is through Webflow CMS. I’ve been using it to keep a log of my coffee beans, add blog items, and also my project case studies. In the specific case of coffee beans, I only show the latest item of the collection on the site. So, if I could find a way to automatically update a collection item, that would allow me to neatly integrate the weather information.
Now, to find weather information. I know there are plenty of weather APIs out of there. But do I know how to work with them? No. So, I needed a no-to-minimal code solution. After some research (aka googling), I found that Zapier has a Webflow integration wherein it can update information in a collection automagically. To top this, Zapier has its own weather trigger. This was it! I reckon I have my solution.
Let’s put this thing together now. At this stage, I have to clarify that I set some restrictions for myself. One actually, I wanted to achieve this with the free version of Zapier as it is an experiment.
Setting up Zapier
This was pretty straightforward to start. I created a new Zap with “Today’s Forecast” as the trigger. This is Zapier’s trigger that runs at around 7am everyday for any coordinates you plug in to the trigger settings.
This produces an output which looks like:
In this output, there are two things I was after, the temperature and the weather icon. Temperature is easy, I picked the temperatureHigh variable. But the icon information is in a text format - which meant, either Zapier or Webflow had to link this to a set of icons and pick the right one based on the data.
Connecting to Webflow
I set up a basic CMS with just one item called “latest” in which the data would get overwritten everyday.
My first Zap, connected the trigger to a Webflow collection and I simply update the “latest” and the only record by mapping the output variables to right fields I set up. Translating the weather icon on Zapier’s end would mean my Zap goes beyond two steps, and that would make it paid feature. So scratch that. Next option was to set up a new collection on Webflow with the icon names and actual icons, so I can do a quick lookup using a reference field of the icon text and return an actual weather icon (more about reference fields here ↗). Great! This should work right? In theory, yes, but in practice, no. The reason is complicated because of the way Webflow creates IDs which meant Zapier cannot update a reference field.
Airtable to the rescue
I figured I needed a temporary space between Zapier’s weather output and Webflow’s CMS which could translate my weather icons. Airtable was the perfect option. I set up a look up table with weather icons on there and added a column which translates the output’s text information to a proper icon.
My final set up
Zap 1 - weather data to Airtable
- Zapier triggers wether data every morning at 7 and send it to Airtable.
- Airtable creates a new record of the day’s weather information.
- Airtable translates and formats Zapier data.
Zap 2 - Airtable to Webflow item
- As soon as new record is added on Airtable, this Zap is triggered.
- It sends the temperature and the weather icon emoji to Webflow.
- The “latest” weather CMS item gets updated.
- Tada! 🎉
- Scroll to the bottom to see it in action.
Once you have your collection item updated, simply use a CMS collection list to add the dynamic weather information on to the front end. Everything you need to know about dynamic content on Webflow is here ↗.
If you use Zapier’s paid plan, you won’t need Airtable in between and you could do this whole thing in one Zap and possibly schedule it to run multiple times a day. But hey, this works for free and is under Zapier’s task limit.
I hope you found it useful. I am sure there are way more efficient ways to do this. Hit me up on twitter ↗ for a chat or if anything here was unclear.