How we built a Webflow mini-game for our clients

At the end of each year, we send gifts to our clients to show them some love for the holidays. Usually, it’s a goodie bag filled with candy and other winter essentials.

But this year we realized what a big carbon footprint this operation leaves behind. International shipping, not-all-recyclable packaging — plus, our clients tipped us off that they’re kinda sick of all the stuff companies send them.

So last month, we went in the totally opposite direction. We sent our clients on a tree hunt in a Webflow mini-game. The higher they score, the more trees we plant IRL.

They loved it — we’ve planted 920 trees (watch out, Mr. Beast)! To celebrate, I thought I’d show you the behind-the-scenes of how I built the game in Webflow.

And if you haven’t already, go ahead and try to find all the 10 trees yourself! (We’re not gonna be able to plant them too, though.)

What we’re building

Fabian and Szymon designed a 90s-themed desktop operating system — with lo-fi UI, pixelated fonts and poor-quality GIFs playing in the background. Besides looking old-school, the system ships with a few features.

Playlist

A collecting of our all-time favorite Xmas songs, curated by Patryk (our Project Manager). But instead of just putting a link to the Spotify playlist, it’s playing from a custom audio player.

Wishes

Domi (our Memelord Shitposter) shot video wishes for our clients with a 90s compression filter to match the vibe of the OS. Like the playlist, it plays in a custom video player. A transcript is also attached for those who prefer to read.

Guest Book

Clients can share their wishes to everyone using holidayOS. After publishing, they’re publicly visible in the Guest Book.

Tree Hunt

And finally, the main attraction! We hid 10 trees all around the system. Some are easy to spot — they’re directly on the desktop. But others require you to really squint your eyes and explore all the nooks and crannies. We’re not gonna tell you where they are — don’t want to spoil the fun!

Tools

Webflow

This shouldn’t surprise anyone. Webflow is our favorite no-code tool and it’s perfect for projects like these. It’s fast, easy to use and it generates an efficient code.

I used it not only to build the UI, but also to develop the back-end part of the website. That was possible because, luckily, I got into the beta of Webflow Logic. This allowed me to connect holidayOS with Posadzimy.pl API and send emails with a certificate using the same tool.

JavaScript

You can go pretty far with just no-code tools. But sometimes, to get where you want, you have to use the good ol’ JavaScript. In this case, I had to write scripts for features like the tree counter, the media players and the current date capture.

Posadzimy.pl

Posadzimy.pl is a Polish organization that plants trees on behalf of the companies that donated the money. I used their API to automate the process. Their team was super helpful — they even agreed to customize the look & feel of the certificate they issue so that it matches the design of holidayOS.

Airtable

In order to check if someone is trying to resubmit their trees, I set up a database. At first, I wanted to use Supabase, but unfortunately, I couldn’t connect it to Webflow. Therefore, I settled for Airtable.

Sendgrid

I used Sendgrid to send the confirmations and certificates. The configuration was super simple, but I had to use Zapier to unlock some use cases.

Zapier

With Zapier I created 2 automations. One for transferring data from Webflow to Sendgrid and the other for uploading clients’ wishes from the Guest Book to tonik’s Slack. Call it an extra, but it felt so wholesome to see their wishes right before we were off for the holidays.

ChatGPT

It was when I was working on holidayOS when the ChatGPT was the only thing people were talking about (at least on Twitter). I used it (occasionally) when I felt stuck or wanted to see if there’s a better alternative to my code.

The most notable example of my collaboration with the AI is when I already wrote the function for handling the video player, but someone suggested adding the option to rewind the video by dragging the progress bar. It was a good idea, but I didn’t have enough time to recreate the function from scratch. So I asked ChatGPT to expand it with the additional feature — and it worked first time!

Stack Overflow

Imagine not using Stack Overflow at work.

CodeSandbox

I used CodeSandbox not necessarily to get others’ snippets, but to host my scripts and import them to Webflow from there. This way, I didn’t have to publish the website to preview the changes I’ve done in the code.

Thoughts on the process

Counting trees

The hardest part of the job was figuring out how to count the trees that the hunters found. Eventually, I managed to keep the counter in the memory so that the number persisted even if the user closed the browser, but it was challenging — especially in Webflow.

Webflow Logic

It was the first time I’ve used this feature and I didn’t fully know its limits at first. I had high hopes, and it did allow me to build the back-end, but I think there’s a lot to improve. Mainly, around connecting to other APIs. I couldn’t get the responses from some tools because Webflow didn’t yet support their format. Hope they’ll catch up soon!

But all in all, Webflow Logic saved me so much time and worked good enough for this use case — I’m relieved that I didn’t have to figure it all out in another tool.

Building front-end

Even though holidayOS doesn’t look like a typical website, it wasn’t so difficult to build its front-end. Sure, the UI doesn’t look remotely similar to the typical SaaS websites I develop on my daily basis, but it still works like one. And, wow — I said that already and I’m gonna say that again — Webflow is so good at what it does.

Coding in JavaScript

If you know the basics and can google things, writing your own scripts to build more advanced interactions is not as scary as it sounds. With just a little hacking, you can overcome the limits of no-code tools and achieve similar results as if you were coding in React all along. Go watch Ryszard’s talk about what it means to be a no-code developer to get a more holistic perspective on that topic.