How to Integrate Applications

2024/10/10

How to integrate Webflow with Google Sheets to add entries to Google Sheets when an order is placed in Webflow

t.yasuda

When running an online store, you might feel that streamlining order management is a crucial challenge.
However, some of you may find that it currently takes a lot of time to manage orders, and you are not able to streamline it as you would like.
In such cases, it is recommended to integrate Webflow with Google Sheets. By integrating Webflow with Google Sheets, you can automate the addition of orders.
This automation can eliminate the hassle of manual data entry and is expected to improve operational efficiency.
This article provides a detailed introduction on how to easily integrate Webflow with Google Sheets using Yoom.
No programming knowledge is required, so you can start easily today.

Benefits of Integrating Webflow with Google Sheets

1. Streamlining Order Management

When running an online store, manually managing order data can be time-consuming. It might be fine to manage information manually during times of few orders or off-peak periods, but that's not the case during busy periods.
By integrating Webflow with Google Sheets, data is automatically added to Google Sheets every time an order occurs. This eliminates the hassle of data entry and allows for accurate data management. Especially when there are a large number of orders, this automation allows for efficient order processing. Once the time and effort spent on order management are resolved, you can focus on other important tasks.

2. Smooth Sharing of Accurate Data

When operating an online store with multiple staff members, it becomes important to quickly share accurate information among staff. If you can automate the addition of orders by integrating Webflow with Google Sheets, you might be able to reduce the time spent sharing information with staff.
Additionally, it can prevent input errors that are likely to occur during manual data entry, ensuring that incorrect information is not shared among staff.
This can lead to faster inventory management and customer service, contributing to the acceleration of your business.

Here, we will introduce the setup procedure using Yoom's template.

[What is Yoom]

How to Create a Workflow to Integrate Webflow and Google Sheets

Let's actually integrate Webflow and Google Sheets using Yoom.
This workflow is "Add to Google Sheets when an order is placed on Webflow."

  1. Connect Webflow and Google Sheets with My Apps in Yoom
  2. Set up an app trigger in Webflow
  3. Configure settings to add records in Google Sheets

You can integrate them in the above three steps. No difficult knowledge is required, so let's copy the template and proceed with the setup together.

Step 1: Integrate Webflow and Google Sheets with My Apps

First, connect Yoom with Webflow and Google Sheets.

Integrating Webflow with Yoom

(1) After logging into Yoom, click "+ New Connection" from the "My Apps" menu on the left.

__wf_reserved_inherit

(2) Enter "Webflow" in the search box, and when the search results are displayed, click on it.

__wf_reserved_inherit

(3) Enter the account name as desired.
For the access token, as per the instructions, log into Webflow, obtain the API key, and enter it.
Note that when integrating Webflow, pay attention to the permission settings as described in the instructions.

__wf_reserved_inherit

(4) When the screen changes and "My App has been registered" is displayed as shown below, the integration is complete.

__wf_reserved_inherit
Integrating Google Sheets with Yoom

(1) Similarly, for integrating with Google Sheets, click "+ New Registration", enter "Google Sheets" in the search box, and click on the search result.

__wf_reserved_inherit

(2) A screen like the one below will be displayed, click "Sign in with Google".
You will also need to grant permissions.

__wf_reserved_inherit

Once the app integration is complete, Webflow and Google Sheets will be displayed in the My Apps list, confirming the integration is complete.

__wf_reserved_inherit

ステップ2:Webflowでトリガーを設定

(1)「マイプロジェクト」からコピーしたテンプレート「【コピー】Webflowで注文が発生したらGoogleスプレッドシートに追加する」をクリックします。

(2)フローの「新規注文が発生したら」をクリックします。


(3)下記のようなページが表示されるので、トリガーアクションが「新規注文が発生したら」になっていること、アカウント情報が正しいことを確認し、「次へ」をクリックします。

(4)サイトIDを候補から選択して「テスト」をクリックします。エラーが発生しなかったら「保存する」をクリックします。

(5)下のような画面が表示されるので、記載されている手順通りに接続設定をし、「テスト」をクリックします。
エラーが発生しなかったら「保存する」をクリックして、トリガー設定は完了です。

Step 3: Setting Up Record Addition in Google Spreadsheet

(1) Return to the flow and click "Add Record".

__wf_reserved_inherit

(2) A screen like the one below will appear, so check your account information.
Scroll down to find the "Database Integration" section.
Select the corresponding Google Spreadsheet ID and tab name from the options and click "Next".

__wf_reserved_inherit

(3) A screen like the one below will appear, so enter the detailed settings for adding a record.

__wf_reserved_inherit

(4) Click on the input field, and Webflow options will appear as shown below.
Click on the appropriate ones.
Once all fields are filled, click "Test".
If no errors occur, click "Save" to save the settings.

__wf_reserved_inherit

This completes the setup.
Finally, turn on the trigger to activate the flow.

__wf_reserved_inherit

With this, the flow bot to "Add to Google Spreadsheet when an order is placed in Webflow" is complete.

Other Examples of Automation Using Webflow and Google Sheets

There are many other examples of automation using Webflow and Google Sheets at Yoom, so let me introduce a few.

1. Add to Google Sheets When a Webflow Form is Submitted
Checking the dashboard every time a Webflow form is submitted is cumbersome. Additionally, manually adding form content is time-consuming and inefficient. By using this template, you can automatically add Webflow form content to Google Sheets, reducing the time and effort required for your tasks.

2. Add items to Google Sheets when a collection item is created in Webflow
In situations where you frequently need to manage Webflow collections manually, the time and effort required for additional tasks increase, leading to decreased productivity. Additionally, there is a risk of incorrect information being registered due to input errors. By utilizing this template, you can automate the task of adding items to Google Sheets, allowing you to allocate time and effort to other important tasks.

3. Create a ticket in HubSpot when a Webflow form is submitted
Manually issuing tickets from the information provided in the form increases the likelihood of human errors such as input mistakes. By using this template, the form information is automatically transferred, which can help reduce errors. Additionally, you can always obtain the latest customer information, making it easier to respond when inquiries are received from customers.

Summary

By integrating Webflow with Google Sheets, order data management can be automated, which is expected to improve operational efficiency. This not only reduces the time and effort required for manual entry but also helps prevent common input errors. Additionally, automating order data management is expected to facilitate smooth information sharing among staff.
As a result, the operation of the online store may become smoother, contributing to improved customer satisfaction.

The integration introduced in this article can be set up without programming knowledge if you use Yoom. If you are struggling with order management or want to streamline your order management tasks, consider registering for Yoom for free and trying it out. Start now to reduce your workload.

The person who wrote this article
t.yasuda
I have been involved in various office work as a cram school instructor and writer. I've been working a lot on computers, so I'm always on the lookout for information on how to make my work more efficient. I would like to be able to write articles that can be useful to everyone by making full use of the knowledge I have cultivated through my experiences so far and the information I have collected.
Tags
Webflow
Google Sheets
Automatic
Integration
Automation
App integration
No items found.
What is Yoom hyperautomation?
Conventional RPA can only automate simple repetitive tasks, and the setup process was very complicated.
With “hyperautomation,” which combines various technologies such as AI, API, RPA, and OCR, it is possible to automate many tasks that could not be realized until now more easily than before.
Don't Just Connect Apps—Automate Everything
Most tools simply connect one app to another, leaving the complex tasks to you. Yoom goes much further: From document creation and browser automation to OCR and generative AI, Yoom handles it all seamlessly in one platform.

Why settle for basic integrations? Streamline your entire workflow with Yoom’s powerful hyperautomation.
Learn more about Yoom
Helpful Materials
I understand Yoom! 3-piece set of materials
Download materials
Understand in 3 minutes! Yoom service introduction materials
Download materials
Find out by Before After! Yoom Case Study Collection
Download materials
See a list of useful materials