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

When you receive a lot of emails every day, it can be quite a hassle to save files to Dropbox each time.
Moreover, many people might have experienced the struggle of missing a file save or saving a file in the wrong folder, making it difficult to find later.

In this article, we will introduce a method to automatically save files received in Gmail to Dropbox!

By using no-code tools, you can easily set up automation between Gmail and Dropbox.
You can start using it right away, so be sure to give it a try!

Recommended for

Those who want to automatically upload files attached to Gmail to Dropbox
Those who want to integrate Gmail and Dropbox to facilitate smooth file sharing within the team
Those who want to prevent the loss of attachments and ensure proper document storage

For those who want to try it immediately

In this article, we will introduce the integration method using the no-code tool "Yoom".

No complicated settings or operations are required, and even non-engineers can easily achieve it.

You can start right away using the template below, so please give it a try!

Webflow allows companies to create high-quality websites without coding, which is why many businesses are adopting it. Centralizing information in Google Sheets makes data management and sharing easier and more convenient. However, traditional methods have the challenge of being time-consuming due to manual data entry and updates.

To address this, we have developed a Flowbot 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 with Google Sheets

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

Benefit 1: Streamlining Content Management

When creating 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 items are linked to, facilitating smooth project progress. Additionally, designers are freed from the hassle of manual data entry, 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, making it easy to see at a glance which content is currently active and which is archived. This facilitates smooth site updates and report creation, ensuring operations run smoothly.

[What is Yoom]

Here, we explain how to create automation using Yoom's template for "adding 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 Yoom for free

How to Create a Flow for Integrating Webflow with Google Sheets

Things to Prepare in Advance

Here are the items needed for the integration process.

Webflow

Access Token
- In the Webflow dashboard, select the target site.
- Proceed to "Site Settings" and click "Apps & Integrations."
- In the "API Access" tab, generate an API token.
- When generating the API token, set the "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, linked to the output items extracted from Webflow, with items entered in each column.
- Set unique keys to avoid confusion if there are duplicate item names. If there are duplicate item names, it is easier to understand if you set them as "Item 1," "Item 2," and so on in sequence.

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 by clicking the sign-in button for the Google account.

A screen to log in to your 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 on the title within the red frame to transition to the settings screen.

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

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

(1/3) Select 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 candidates. 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) on Webflow.

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

→ Click Save

Step 4: Operate the Database "Add Record"

Here, you will link with Google Sheets and associate the additional information.

(1/2) Select 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, and candidate sheets from the linked Google account will be picked up. Selecting the relevant sheet will quote the ID.

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

→ Click Next!

(2/2) Detailed Settings for Database Operation

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

Click the edit field, and a dropdown will open displaying the previously extracted outputs 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 up, 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 for this time.

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 contents are 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 generated in Webflow are automatically added to Google Sheets. This eliminates the need for manual entry and streamlines 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

The automated integration of Webflow and Google Sheets introduced this time can significantly reduce the effort required for traditional manual tasks, and is expected to improve the overall work efficiency of the 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.

Well, see you again!