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.
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.)
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.