Connecting the Webflow API to Google Sheets

Webflow is a no code web design tool used for visual web design. It can be used for designing responsive websites, landing pages, eCommerce sites, blogs, and more. We can use the Webflow API to import data from Webflow into Google Sheets. In this tutorial, I’ll show you how to connect the Webflow API to Google Sheets in 6 steps:

  1. Install the Apipheny add-on
  2. Create a Webflow API app
  3. Obtain an access token
  4. Choose a Webflow API endpoint
  5. Enter your Webflow API request into Apipheny
  6. Run the Webflow API request

Step 1.) Install and open the Apipheny add-on in Google Sheets

To pull data from the Webflow API to Google Sheets, first install and open the Apipheny Google Sheets add-on.

Apipheny is a no-code API integrator for Google Sheets that you can use to make unlimited API requests, connect to unlimited APIs, save API requests, schedule API requests, and more. 

1. Install Apipheny by opening the following link on desktop and then clicking the Install button on the page: https://apipheny.io/install

2. After you’ve installed Apipheny, open a Google Sheet and then click on the Add-Ons or Extensions option in the top menu. In the menu, you should see Apipheny. Click Apipheny > Import API to open the Apipheny sidebar in your Google Sheets.

Opening the Apipheny add-on in Google Sheets

Step 2.) Register an API app

After logging into your Webflow account, go to Account => Account Settings, then click the Integrations tab:

Account settings - Integrations tab
Account settings – Integrations tab

Scroll down until you find the My Applications section and click the + Register New Application button:

My Applications section
My Applications section

Complete all the fields and then click the Create button:

Create a new app
Create a new app

Your app will then be created:

Your newly created app
Your newly created app

Step 3.) Obtain an access token

Click the View Details button corresponding to the app you’ve just created:

Application's details
Application’s details

Among the app’s details, you’ll find the client id and the client secret. Copy and paste these values to a safe location, because you’ll need them in the next steps:

App credentials
App credentials

Next, in your browser’s address bar, enter the following link:

https://webflow.com/oauth/authorize/?client_id=https://webflow.com/oauth/authorize/?client_id=CLIENT_ID&response_type=code

Don’t forget to replace the CLIENT_ID with the value you previously obtained from the app details. You will be asked to grant an account access permission for your app. Click the Authorize Application button:

Request for Permission
Request for Permission

A code will be displayed in your browser’s address bar, at the end of the redirect URI that you provided for your application:

Code displayed in browser
Code displayed in browser

Copy this code to a safe location, because you’ll need it later as well. It’s important to use this code to obtain an access token in a short period of time (within at most 5 minutes). After that, the code will expire and you’ll need to redo the steps to obtain another one.

To get your API access token, open up a command prompt window (for Windows OS) or a terminal (for Mac OS) and enter in the following command:

curl https://api.webflow.com/oauth/access_token -d client_id="CLIENT_ID" -d client_secret="CLIENT_SECRET" -d code="YOUR_CODE" -d grant_type="authorization_code"

Don’t forget to replace the values (CLIENT_ID, CLIENT_SECRET and YOUR_CODE) with their actual values. These are the same values you’ve obtained in the previous steps.

Note: For Mac OS you may need to use single quotes ( ' ) instead of double quotes ( " ).

After running the command, your access token will then be displayed in the response:

Access token in a terminal window
Access token in a terminal window

Step 4.) Choose a Webflow API Endpoint URL

In this section, we’ll show you how to browse the Webflow API documentation to find an API URL and endpoint that retrieves the information you need. If you already know your URL, or you want to use the same example URL as us, just skip to Step 5.

First, open the Webflow API documentation page: https://developers.webflow.com/#cms-api-reference

The menu on the left contains a list of categories for the Webflow API endpoints:

Webflow API documentation page
Webflow API documentation page

If you click on an API category, for example Domains, a list of that category’s endpoints will be displayed:

API Categories
API Categories

An example endpoint from the Domains category is List Domains, which returns a list of all custom domains added to the given site. The URL for this endpoint is:

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

If you use this URL, don’t forget to replace site_id with a real value.

Each endpoint’s documentation contains a descriptive title, a paragraph describing the endpoint’s purpose, the request description with the required parameters, followed by a response format section. In a distinct section on the right, you will see the endpoint’s HTTP method (GET) and URL, as well as an example response:

List Domains endpoint documentation
List Domains endpoint documentation

All API calls to Webflow should be made to the https://api.webflow.com/ base domain. All endpoints should be appended to this base URL.

Step 5.) Enter your Webflow API request into Apipheny

Now, to get your Webflow data in your Google Sheet, go back to your Google Sheet and make sure that you’ve installed the Apipheny add-on and you have it opened to the “Import” tab. In the Import Tab of Apipheny, enter the following details into the add-on:

Method: At the top of the Apipheny sidebar, select the HTTP method (GET or POST) required by your Webflow API endpoint. For this example, we are using the “GET” method.

API URL: In Step 4, we explained how you can find the Webflow API endpoint that you need. Now copy your complete Webflow API URL into the Apipheny add-on, in the field that says API URL Path (JSON / CSV), followed by any GET parameters required for your query (if applicable).

For this example, we are using the List Sites endpoint that returns a list of all sites the provided access token is able to access. The URL for this specific endpoint is:

https://api.webflow.com/sites

If you’re following the same example as us, just copy and paste the above URL into Apipheny where it says “API URL”.

Headers: In the Headers section of the Apipheny add-on, add two rows with the following keys and values:

Header 1
Key:
Authorization
Value:
Bearer your_token

Header 2
Key:
accept-version
Value:
1.0.0

For the first header, just copy and paste “Authorization” into Apipheny, where it says “Key”. And copy and paste Bearer your_token into Apipheny, where is says “Value”. But make sure to replace your_token with the same value of the token that you’ve generated previously, in Step 3. Leave a literal space between “Bearer” and your token.

Here’s what your Webflow API request should look like when entered into Apipheny, if you’re following the same example as us:

Webflow API request entered into Apipheny
Webflow API request entered into Apipheny

Step 6.) Run the Webflow API Request in Your Google Sheet

The last step is to click the Run button at the bottom of the Apipheny add-on and then your Webflow data will be imported into your Google Sheets. Congratulations!

Webflow data imported into Google Sheets
Webflow data imported into Google Sheets

After making a successful request to the Webflow API, try querying a different Webflow API endpoint, or try using one of the more advanced features in the Apipheny add-on, such as:

  • Save and schedule your Webflow API request
  • Make a POST request to the Webflow API (if available)
  • Use the custom =APIPHENY() function to call the Webflow API request inside your spreadsheet
  • Create a Webflow API request by referencing the value of a cell in the API URL with three curly braces eg. {{{Sheet1!A1}}}

Related Posts