Import Webflow Data to Google Sheets

In this guide, we will walk step by step through pulling data out of the Webflow API into Sheets, using the API Connector add-on for Sheets. Webflow is a web design tool, CMS (Content Management System), and hosting platform all-in-one. Their API consists of an intuitive data model that is built up around 3 hierarchical resource types which include sites, collections, and items. In this article, we will focus on the endpoint related to collections and their respective items.

From their documentation:

Collections in Webflow are groupings of Items and define the schema or structure of the custom data stored in those Items. A Webflow site can have multiple attached Collections. A Collection’s fields define the structure of the Items within it.

Webflow Documentation

CONTENTS

• Before You Begin
• Part 1: Get your Webflow API Key
• Part 2: Get your Site ID
• Part 3: Pull Webflow Collections Data into Sheets
• Part 4: Get your Collection Schema
• Part 5: Get Items from a Collection
• Part 6: More Example API URLs

BEFORE YOU BEGIN

Click here to install the API Connector add-on from the Google Marketplace.

PART 1: GET YOUR WEBFLOW API KEY

Let’s start by getting an API key. Navigate to your site’s dashboard and open Settings and go to the section Integrations, followed by API Access.

Scroll down until you find the API Access section, and go ahead and generate that bad boy!

PART 2: GET YOUR SITE ID

Let’s head over to the documentation and get setup with some data to pull in. On my Content Management System (CMS), I started a new collection to store my “Projects” to showcase to clients. To start with, we need to get our site ID. This can be accomplished with the following URL found in the documentation:

https://api.webflow.com/sites

With /sites being the endpoint that returns all of our sites hosted on Webflow.

Copy the above API URL into the API Connector sidebar along with the following key: value pairs as your headers:

You should end up with a sidebar that looks roughly like this:

Go ahead and fetch that data. The first column returned will be your site ID.

PART 3: PULL WEBFLOW COLLECTIONS DATA INTO SHEETS

Next, you will need to get your all collections in your site to pin point one you would like to further analyze. You can get this dones via the following URL found in the documentation:

https://api.webflow.com/sites/:site_id/collections

With /sites/:site_id/collections being the endpoint that returns all of our collections hosted on the particular site.

Copy the above API URL into the API Connector sidebar, being sure to fill in :site_id with your corresponding site_id from before, along with the following key: value pairs as your headers, just like in the previous step:

Run your request just like in the previous step. You should end up with data that looks like this:

Go ahead and copy that Collection ID.

PART 4: GET YOUR COLLECTION SCHEMA

Finally, we can get the schema of our desired collection. Use the following URL to access your specific collection:

https://api.webflow.com/collections/:collection_id

With /collections/:collection_id being the endpoint that returns our entire collection scehma (in this case, I want to get the “Projects” Collection)

Copy the above API URL into the API Connector sidebar, being sure to fill in :collection_id with your corresponding collection_id from the last step, along with the key: value pairs from before as your headers, just like in the previous steps and run your request. You should end up with data like this:

There you have it! A full Collection pulled into Sheets.

PART 5: GET ITEMS FROM A COLLECTION

Your website’s collection should (hopefully) have several or more items using that collection’s schema. You may want to return and aggregate all of these items for analysis. Indeed, there is an endpoint for that and I’ll walk you through how to get that data!

Use the exact same API URL as before but append /items on the end.

https://api.webflow.com/collections/:collection_id/items

Keep your headers the same as in the previous steps. When you run the API you should get back a list of the items in your collection!

PART 6: MORE EXAMPLE API URLS

From here, you can continue to get more granular data from your different structures inside the CMS (Items, Fields, etc). In their documentation, they have a diagram that summarizes the hierarchy of levels nicely:

Some more useful endpoints include those with Ecommerce functionality on their Webflow site. These would be accessing and updating items and orders. Here are a few examples you can try:

Return all products

https://api.webflow.com/sites/:site_id/products

Get all pending orders

https://api.webflow.com/sites/:site_id/orders?status=pending