Fetch live data into Webflow with Alex Iglesias

Resources

Transcript

Getting Started with Displaying Live Data on Webflow Sites

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.

Page from the AATT website showing the current subscriber count
Page from the AATT website in the Webflow Designer showing the current subscriber count


Who this video is for and what you’ll learn

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.

How to follow along

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.

Let’s get into it

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.

Step 1: Create an API endpoint in Pipedream (16:44)

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.

Screenshot of ConvertKit's Developer Documentation
ConvertKit's Developer Documentation

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

  1. Listened for an HTTP Request and was set to “Return a custom response from your workflow.”
  2. Created an endpoint
  3. Called ConvertKit
  4. Updated the endpoint to talk to the Subscribers API instead of the Account API
  5. Returned the total subscribers via a “Return HTTP response” step
  6. Created a JSON response with the total number of subscribers

Once the steps are configured, the workflow was deployed.

Screenshot Showing How to Write Javascript in Pipedream to obtain the Subscriber Count
Writing Javascript in Pipedream to obtain the Subscriber Count

Step 2: Creating the Javascript (30:18)

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

Screenshot Showing Our Initial Javascript in Stackblitz
Creating Our Initial Javascript in Stackblitz

Step 3: Adding Our Javascript Code to Webflow (44:10)

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

Screensht Showing Where to Add Javascript in Webflow
Be sure to add opening and closing script tags when pasting in your code.

Bonus Step: Pre-fetching Data As Page Loads (50:17)

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.

Screenshot Showing Updated Javascript Code
Updating Javascript Code in Stackblitz

Additional Tips

The script works as written for now, but has deficiencies. Here are ways to improve the script:

  • Add error handling to the Javascript
  • Enhance security by restricting API calls to the AATT domain by updating the workflow in Pipedream
  • Storing data in Pipedream so that data is cached to prevent running into issues with rate limits set by ConvertKit

Resources

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.

Key takeaways

Similar streams