How To Integrate Webflow & Google Sheets [API Tutorial]

How to connect 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:

Install the Apipheny add-on
Create a Webflow API app
Obtain an access token
Choose a Webflow API endpoint
Enter your Webflow API request into Apipheny
Run the Webflow API request

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

Apipheny is a free API connector for Google Sheets. You can use Apipheny to connect your Google Sheets to API data sources, easily.

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

2.) After you’ve installed Apipheny, open a Google Sheet and then click on the Extensions dropdown in the menu at the top.

In the dropdown list you should see Apipheny. Click Apipheny then click Import API to open the Apipheny sidebar in your Google Sheet.

Tip: you can open a new Google Sheet by entering this URL in your browser: sheet.new

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:

Complete all the fields and then click the Create button:

Your app will then be created:

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:

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

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:

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

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:

Note: If the token/key that you generate has an expiration time, you will need to complete this same process again to get a new token when the old one expires.

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:

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

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/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:

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.

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

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

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

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.