On Sunday mornings, I used to log into Webflow and manually update the number of subscribers to the AATT newsletter. You would think, with a livestream called “Automate All the Things,” that I would have this automated. I do now, thanks to Finsweet’s CTO Alex Iglesias (@alexiglesias_me). A legend for his Javascript skills, you may already be familiar with Alex’s work on the Finsweet Extension, Cookie Consent, and Attributes. In this stream, he showed me how to use Pipedream with the Convertkit API to display the latest subscriber count every time someone lands on the site.
Since the number of newsletter subscribers is always changing, we want live data. Storing the subscriber count in the Webflow database would still require regularly updating one of my Webflow Collections.
This is another great stream for learning how to work with APIs. In this livestream, we work with two different APIs: We first fetch external data from ConvertKit. Then, we manipulate the DOM to display information on a page served by Webflow.
This stream is also an opportunity to learn about Pipedream. Similar to Zapier and Make (formerly known as Integromat), low code tool Pipedream shows you information that other offerings don’t display.
Alex also shows us Stackblitz, an online code editor.
We use the following tools and services in this stream:
Not shown: ConvertKit and Pipedream were connected to one another prior to the stream’s start.
There are two ways to solve this problem: a simple way and a more advanced way. In this stream, we take the simple route.
At the end of the stream, we discuss what a more robust implementation would entail.
APIs can be either public or private.
Public APIs make sure that API keys and other confidential information remains protected and can’t be seen by looking at the code via the browser’s console log.
In our case, Convertkit’s API is private. Since we don’t want to expose our API keys, email addresses of our subscribers, or other sensitive information, we need a middle layer. One approach would be for us to write our own API. Alternatively, we could use Pipedream.
In Pipedream, we created a workflow that….
Once the steps are configured, the workflow was deployed.
Using the endpoint created in the prior step, it was time to create the Javascript that would be added to Webflow to fetch (get) the subscriber count. Since Webflow does not have a built-in custom code checker, we used Stackblitz to easily create a development environment and write and initially test the code we would need.
We started by writing an async function and storing the returned value as a variable, which was then converted to JSON. With the stored value, it was then time to interact with the front-end code to display the subscriber count. This was done by adding code to replace a div with a new value. While I initially named the div to be “subscriberDivId,” I later changed it to “subscriberCount.” (I’m bad at naming.)
In our Webflow project, the first step was to add an ID to the element where our subscriber count should be displayed.
We then copied the code from Stackblitz to our Webflow page by opening our page in the Designer and going to Page Settings. If the code had been more extensive, we could have called an external script instead.
With code in place, it was time to save and publish our work to test it. (And to enjoy a confetti drop.)
Now that our foundation was set, it was time to make a few minor adjustments to the Javascript so that data can be fetched from our endpoint while the page is loading. This involves checking to see if the DOM has loaded. If it’s ready, get the data. If not, wait until it’s ready.
The changes also meant that our custom code needed to be in the head instead of the closing body tag.
The script works as written for now, but has deficiencies. Here are ways to improve the script:
Do you display data from third party sources in Webflow? Let me know what you build! Be sure to subscribe to the newsletter or YouTube channel for future episodes on displaying external data on Webflow sites.
.svg){kind=icon}
