How to scrape data into Webflow to create a job board
Webflow is a super powerful no-code tool for building websites, but how easy would it be to turn it into a job board, that updates automatically, all without writing code?
Pretty easy it turns out. By combining Simplescraper (a tool that turns websites into APIs), Parabola (a tool that transforms data) and Webflow we can get a job board up and running in no time.
In this guide we'll walk through scraping data from the popular jobs website Indeed.com and listing the jobs on a webflow website. Once we set up the workflow, the website will list the latest jobs automatically each day.
No CSV import, no code, no hassle—just a stream of jobs that can act as the foundation for building your very own niche job board. Let's get started!
What we're going to need
One Simplescraper account - to get job data from websites of our choice
One Parabola account - to connect the job data to Webflow
One Webflow account - to host and display your job board website
About 20 minutes of your time
What we're going to do
- Scrape job data from Indeed.com using Simplescraper
- Setup our webpage in webflow so that it can import and display those jobs
- Link Simplescraper to Webflow using Parabola which acts as a bridge between these two apps. So the data is pulled from Simplescraper and pushed to Webflow via Parabola
- Schedule Parabola to call Simplescraper whenever we want the newest jobs, for example every morning or every few days
- Display the jobs in a website using Webflow
And here's how our finished product will look: https://simplescraperjobs.webflow.io/
On to the first step.
Setting up Webflow to display job data
Webflow is a service that allows you to create websites without code
Although it seems like this step should come later, we'll do this first so that Parabola knows where in Webflow to send the jobs data when we connect the two apps together.
So, in Webflow, create a new project or edit an existing project and add a collection that will store our jobs. Within the collection, name the fields that we want to create. As we're creating a job board we'll add job title, job description and company fields. We'll map the data from Simplescraper to these fields in a later step.
You can preview the Webflow website we're using here to see how it's designed. If you're new to creating collections in Webflow then check out this intro guide or go deeper with this course which covers collections in detail.
Now that we've created a collection to store our data in Webflow, let's populate it with jobs.
Scraping job listings with Simplescraper
Simplescraper is a service that allows you to turn any website into structured data and query that data like an API.
This means that we can request live data from any website - like a jobs website - on demand.
Sign up at simplescraper.io and then navigate to the dashboard and click 'Recipe store' in the sidebar. Scroll down and select the Indeed jobs template and then click 'use in new recipe'.
The default URL to be scraped is https://www.indeed.com/jobs?q=javascript&sort=date however you can change the query to extract different types of jobs. For example try https://www.indeed.com/jobs?q=marketing&sort=date to scrape marketing jobs.
Once we've selected the URL that we want to use, save the recipe and click run. Simplescraper will scrape the jobs from Indeed.com and display the results after a few seconds.
On the results page click on the API tab and copy the URL. If we navigate to that URL we'll see our job data. And if we add "&run_now=true" to the end of the URL, Simplescraper will scrape Indeed.com in realtime and return fresh data. We'll use this in the next step.
Tip: If you'd rather extract jobs from websites other than Indeed.com then install the Simplescraper extension which allows you to extract data from any website on the web.
Passing scraped jobs through Parabola
Parabola is a service that allows you to import data, transform it, and export it to a destination of your choice
In Parabola create a new flow and search for API import and add that step to our flow. Double click the step and do the following:
- Paste the URL we got from Simplescraper in the previous step into the API Endpoint URL field (and make sure that "&run_now=true" is appended to the end of the URL)
- Set the request type to GET
- Set the Authentication to None
- Set the Top Level Key to data
Click 'show updated results' and we should see the job listings appear after a few seconds. Easy.
Now let's add a second step to send the data to Webflow. Search for Webflow CMS export and add that step to our flow. Double click the step and do the following:
- Click authorize and follow the steps to authorize Webflow
- Once authorized, map the data properties from Simplescraper to the ID's in the Webflow collection we created earlier
- In the dropdown select "these items will be live" so that whenever Parabola calls Simplescraper for jobs, they're immediately published in the live version of your Webflow website
Click 'show updated results' to confirm that the data looks correct and then publish the flow and click run.
And that's it - the jobs have passed from Simplescraper, through Parabola, and out to Webflow. On to the next step.
Displaying jobs in Webflow
If all went smoothly, our job data should be sitting in Webflow's CMS waiting to be displayed. To display the data on our webpage, do the following:
- In the sidebar click 'Add elements' and drag 'Collection list' from the CMS section on to the page. This acts as the container for any data in our Webflow CMS
- Now drag a text block on to the Collection list, click on it and when the popup appears choose 'get text from Jobs Indeed'. From the dropdown choose Job title and like magic, the list of jobs should be displayed
- Repeat this for the job description, job link and any other data that we wish to display
- When we're finished, hit publish and our jobs website is live
And we're done. In three steps and about 20 minutes we've created an auto-updating job board that looks something like this.
With the basics of scraping data into Webflow mastered, why stop at job boards? Try scraping Airbnb listings, local events, stock prices, sports results etc. to create unique content for personal use, for your team, or to build an audience around. With a little imagination, a dash of scraping, and some dragging and dropping, anything's possible.
If you have questions about any part of this guide, find us on Twitter and on chat at simplescraper.io.
Happy building!