How to integrate Webflow with Google Sheets to automatically centralize collection information in Google Sheets

Webflow is being adopted by many companies because it allows the creation of high-quality websites without code. Centralizing information in Google Sheets makes data management and sharing easier and more convenient. However, the traditional process had the challenge of taking time for manual data entry and updates.

Therefore, we developed a flow bot to automate this process. This automation solution resolves previous challenges and streamlines operations. We also explain how to set it up without programming, so please read to the end.

Two Benefits of Integrating Webflow and Google Sheets

From the perspective of designers and back-office staff, we considered how this automation can improve work efficiency.

Benefit 1: Streamlining Content Management

When you create collection items in Webflow, item IDs, site IDs, collection IDs, etc., are automatically recorded in Google Sheets. This allows for clear management of which site or collection the items are linked to, ensuring smooth project progress. Additionally, designers no longer have to manually enter data, allowing them to focus on design work. The ability to automate without code is a significant advantage as it allows work to proceed without relying on engineers.

Benefit 2: Simplified Archive Management

With data automatically transcribed into Google Sheets, the back office can share data in real-time and easily manage archives. For example, information such as whether an item is archived or the last published date is recorded, allowing you to see at a glance which content is currently active and which is archived. This streamlines site updates and report creation, facilitating smooth operations.

What is Yoom?

Yoom is a next-generation automation tool designed for those who want to streamline their daily administrative tasks and improve work efficiency! API integrations can be challenging for non-engineers, but Yoom eliminates the need for technical expertise or complex coding, allowing you to manage apps intuitively in one place with ease.

Sign Up for Yoom Here – Quick and Easy in Just 30 Seconds!

From here, we will explain how to create automation using Yoom's template to "add items to Google Sheets when a collection item is created in Webflow."

Try it with the free plan! Please proceed to register first ♪

＞Register for free on Yoom

How to Create a Flow for Integrating Webflow and Google Sheets

Things to Prepare in Advance

Here are the items needed for the integration process.

Webflow

Access Token
- Select the target site in the Webflow dashboard.
- Proceed to "Site Settings" and click "Apps & Integrations."
- Issue an API token in the "API Access" tab.
- When issuing the API token, set "Read and Write" permissions for "CMS" and "Sites."

Google Sheets

Login information for the Google account to be integrated
Google Sheets
- Prepare a sheet to add Webflow information. The first row will be the header, link it with the output items extracted from Webflow, and enter the items in each column.
- Set a unique key as it becomes difficult for the system to judge if there are duplicate item names. If there are duplicate item names, setting them as "Item 1," "Item 2," etc., in sequence makes it easier to understand.

Step 1: Register My Apps

First, register the app to be integrated with Yoom. Log in to the Yoom workspace, and click the new connection button from My Apps in the menu bar.

A list of apps that can be connected with Yoom will be displayed. Search for the app to be connected from the search window at the top and proceed with registering My Apps.

Webflow

Search for "Webflow" and click the app name that appears. This screen will be displayed.

Enter any string (such as an email address) for the account name and the value obtained from Webflow for the access token, then click the add button.

Google Sheets

Search for "Google Sheets" and click the app name that appears. When this screen is displayed, proceed with the integration from the sign-in button to the Google account.

A screen to log in to the Google account will be displayed. Enter your email address and password.

Once logged in, proceed to grant permissions.

Once permissions are granted, the My Apps registration is complete.

Step 2: Copy Yoom's Template to My Project

Click this banner. The template will be copied to "My Project" in the Yoom workspace.

The template will be copied to my project.

Click the title within the red frame to navigate to the settings screen.

Step 3: App Trigger "When a Collection Item is Created"

Click the first process. Set up the integration with the relevant site in Webflow and configure the output to be extracted.

(1/3) Select the Integration Account and Action

The following are pre-configured, so no action is required.

Title
Database App
Account information for integration with Webflow
Execution Action

→ Click Next

(2/3) API Connection Settings for App Trigger

Set the Site ID. Click the edit field to open a dropdown and display the options. Selecting one will automatically quote the ID.
Alternatively, you can obtain it using the following method.

In the Webflow dashboard, select the target site.
Proceed to "Site Settings" and open the "General" tab.
Scroll down the page to find the "Site ID" displayed, where you can check and copy it.

→ Click Test → Success

→ Click Next

(3/3) API Connection Settings for App Trigger

What is a Webhook Event
- It occurs when a collection item is created (or updated) in Webflow.

→ Click Test → Success. In this output setting, you can retrieve the relevant items.

→ Click Save

Step 4: Operate the Database "Add Record"

Here, you will link with Google Sheets and associate the information to be added.

(1/2) Select the Integration Account and Action

The following are pre-configured, so no action is required.

Title
Database App
Account information for integration with Google Sheets
Execution Action

◆ Database Integration

Spreadsheet ID
- Click the edit field to pick up candidate sheets from the linked Google account. Selecting the relevant sheet will quote the ID.

Spreadsheet Tab Name
- Click the edit field to pick up candidate tab names from the linked Google account. Selecting the relevant tab will quote the ID.
Table Range
- Set it in the format "A1:G30". This time, since the table range is A to L, I entered A1:L1.

→ Click Next!

(2/2) Detailed Settings for Database Operations

The headers of the linked sheet will be extracted. I have reflected the first and second output items in the headers. Here, we will link the output.

Click the edit field to open a dropdown and display the previously extracted output as candidates. Selecting one will automatically embed the quote code.

→ Click Test → Success

→ Click Save!

Step 6: Turn the App Trigger [ON]

Once all processes are set, a completion screen will pop up.

Turn the Trigger [ON] to complete the setup.

The integration work is now complete! The integration was completed in a short time without using programming. Here is the template used.

Make the Most of It! 3 More Automation Options with Webflow and Google Sheets

Webflow and Google Sheets offer many other automation templates.

1. Automatically Add Form Submissions to Google Sheets

When a form is submitted in Webflow, its content is automatically added to Google Sheets. This eliminates the need for manual input, making data management and sharing smoother.

2. Automatically Manage Webflow Order Information with Google Sheets

Orders placed on Webflow are automatically added to Google Sheets. This eliminates the need for manual data entry, streamlining inventory and order management.

3. Automatically Manage Webflow Content with Notion

Collections created in Webflow are automatically added to Notion, eliminating the need for manual data migration. The latest information is always reflected, allowing for smooth management within the team.

Summary

By automating the integration of Webflow and Google Sheets introduced this time, you can significantly reduce the effort required for traditional manual tasks and expect to improve the work efficiency of the entire team. Designers will experience smoother content management and project progress, while the back office will be able to grasp the archive and publication status in real-time. Furthermore, since it can be set up without code, it is a major attraction that it can be introduced immediately without programming knowledge. Please refer to the Flowbot setup method and make use of this automation to achieve optimization of your operations.

See you again!