With iOS 14, iPhone users finally got a taste of the sweet, sweet widget life anyone who’s used an Android phone in the last decade was already familiar with. I’ve shied away from most of the early widget apps and largely avoided using most widgets in general (and maybe you should, too!). It is not 2009 and I’m not using that original Motorola Droid. But Scriptable, an app from developer Simon Støvring, might be changing my mind.
Scriptable allows you to set up cool Siri automations in iOS using Javascript, but with the advent of widgets, it also allows you to run scripts directly on the home screen—which means I can finally have that transparent weather and calendar widget I’d prefer instead of a big box that obscures my wallpaper.
If you’re like me and most of your coding experience is limited to HTML or making the car in the TI-83 racing game look like a wiener, then Scriptable’s myriad of scripts may seem daunting at first. Fortunately, most of the scripts I’ve come across have incredible instructions in the script themselves, and Scriptable automatically color codes things so you know what should and shouldn’t be replaced.
One Github user has already put together a great list of widgets and scripts you can run, including one that finally lets you see what’s playing on Sonos without opening the app. And on Github and Reddit there are plenty of people who can help guide you if you run a script and run into errors.
But one of the best Scriptable widgets I’ve found actually requires two scripts, so I thought I’d detail my own handy guide here to walk you through using it so you too can have a beautiful big weather widget that doesn’t hide your beautiful big wallpaper.
Both scripts are from developer Max Zeryck. The first one, Widget-Blur, solves one of the most annoying issues with iOS widgets—they don’t support background blurs or transparencies. Widget-Blur uses a screenshot of your wallpaper to produce a background image that perfectly matches the restrictions of iOS’s widgets, essentially making the widget background appear transparent. You’ll need this if you want to use his other widget, Weather Cal, and have a see-through background.
To get started, you’ll need to open the above link on your phone. You’ll see 807 lines of code. Copy all of them and then open the Scriptable app, tap the blue plus sign in the top right corner, and paste the script in. At this point you can also rename the script so you don’t get it confused with others. To do so, just tap the name at the top and rename it whatever you’d like. When it’s all sorted, you can hit the Play button in the bottom right corner. After that, the script will walk you through things, including going into “wiggle mode” on the home screen to take a screenshot. When it’s all done you’ll have a widget-ready pic stored in your photo album.
Now it’s time to get the Weather Cal widget itself and set it up. You can get the script two ways: either by copy and pasting it from Github or choosing the Weather Cal Widget Builder from the Gallery section in Scriptable. I did the latter to avoid copy-pasting errors.
Once you have the script loaded, you have some work to do. Weather Cal is incredibly customizable, but it can be daunting if you’re not used to coding. That’s OK! It’s really easy, I swear.
First, you’ll need an API key from OpenWeather to power the weather side of the widget. API keys are currently free from OpenWeather, so sign up for one and wait for it to be delivered to your inbox.
Back in the script, you’ll need to paste the API key in between the two quotation marks on line 8. If you can’t see line numbers for the code, go back to the list of scripts in Scriptable and hit the Settings button in the top left corner. Then choose Editor and toggle on Show Line Numbers.
For me, the most difficult part of the entire set-up is pasting the API key into the script. Editing scripts and typing on your phone screen don’t exactly mix. I moved the cursor by holding down the space bar and then created a big gap between quotation marks so I had enough room to touch the screen until the Paste prompt appeared.
Once the API key is in, it’s just a matter of adjusting any other settings for the widget you’d like. You can choose Fahrenheit or Celsius, dictate which calendars are visible, and even change the type of font used. Zeryck did a great job documenting what every line of code does so it’s easy to tweak things. He even warns you about which code to not touch if you’re less familiar with Javascript.
Once you’re done making changes, hit the Play button to run the script for the first time. This step is absolutely crucial. If you try to run the script directly from the widget first, it won’t be able to get permission from iOS to check for you location. Run it directly in the Scriptable app first to avoid that.
Afterward, add the Scriptable widget to your home screen, choose the Weather Cal script, and enjoy having widgets that don’t feel like you’re about a decade behind the times.