How to integrate Webflow with SPIRAL to automatically accumulate data in SPIRAL when a collection is added

マイプロジェクトにテンプレートがコピーされます。

赤枠内のタイトルをクリックで設定画面に遷移します。

ステップ3　アプリトリガー「コレクションのアイテムが作成されたら」

プロセスの1つ目をクリックします。Webflowで該当のサイトとの連携と、抽出するアウトプットを設定します。

(1/3)連携アカウントとアクションを選択

以下はあらかじめ設定済みのため操作は不要です。

• タイトル
• データベースのアプリ
• Webflowと連携するアカウント情報
• 実行アクション

→次へをクリック

(2/3)アプリトリガーのAPI接続設定

サイトIDを設定します。編集欄をクリックするとプルダウンが開き、候補が表示されます。選択すると自動でIDが引用されます。もしくは、下記の方法でも取得できます。

• Webflowのダッシュボードで、対象のサイトを選択します。
• 「Site Settings」に進み、「General」タブを開きます。
• ページをスクロールしていくと、「Site ID」が表示されているので、そこから確認・コピーすることができます。

→テストをクリック　→成功

→次へをクリックします

(3/3)アプリトリガーのAPI接続設定

• Webhookイベントとは…
  • Webflow上でコレクションアイテムが作成される（または更新される）と、発生します。

→テストをクリック　→成功　アウトプットではこちらの項目は取得できます。

→保存するをクリック

ステップ4　データベースを操作する「レコードを登録」

プロセスの2つ目をクリックします。ここでは、SPIRAL内のアプリ・データベース連携と追加する情報の紐付けを行います。

(1/2)連携アカウントとアクションを選択

以下はあらかじめ設定済みのため操作は不要です。

• タイトル
• データベースのアプリ
• SPIRALと連携するアカウント情報
• 実行アクション

→次へをクリック

(2/2)API接続設定

‍

編集欄をクリックすると、プルダウンが開き先ほど抽出したアウトプットが候補として表示されます。選択すると、引用コードが自動で埋め込まれます。

• アプリID
  • 編集欄をクリックするとプルダウンが開き、候補が表示されます。選択するとIDが引用されます。また、下記の方法でも取得できます。
  • SPIRALの管理画面から、上部メニューの「アプリ管理」または「アプリケーション管理」を選択します。アプリの一覧が表示されるので、対象のアプリを選択すると、アプリIDは詳細ページ内やURLの末尾に表示されます。
• データベースID
  • 編集欄をクリックするとプルダウンが開き、候補が表示されます。選択するとIDが引用されます。また、下記の方法でも取得できます。
  • SPIRALの管理画面で、「データベース管理」にアクセスします。アプリに紐づけられているデータベースの一覧が表示されますので、対象となるデータベースを選択します。データベース詳細ページや、データベースを開いた際に、データベースIDが確認できます。これもURLの末尾に表示されることが多いです。

◆レコード情報

• フィールドの識別名
  • データベース内で管理されているフィールド（項目）が表示されます。この一覧の中から、追加したい情報がどのフィールドに対応するか確認します。
  • 各フィールドには「識別名」または「フィールド名」として、データベースで使用されるフィールドの名称が表示されます。これがフィールドの識別名です。
    フィールドの識別名はSPIRALのデータベース内でユニークなIDとして扱われており、Webflowからのデータをどのフィールドにマッピングするかを指定する際に必要です。
• 値
  • 編集欄をクリックすると、プルダウンが開きWebflowのアウトプットが表示されます。レコード追加する項目を選択すると引用コードが埋め込まれます。

• レコード情報追加ボタンをクリックすると、引用するコードのエリアが追加されます。

• 必要な項目を全て埋め込みます。

→テストをクリック　→成功

→保存するをクリック！

ステップ5　アプリトリガーを【ON】にする

全てのプロセスが設定完了すると、コンプリート画面がポップアップされます。

トリガーを【ON】にすると、設定完了です。

こちらで連携作業は完了です！<span class="mark-yellow">プログラミング不要で、短時間で連携ができました。</span>今回のテンプレートはこちらです。

Make the Most of It! Webflow and SPIRAL: 3 Other Automation Picks

Webflow and SPIRAL offer a variety of other automation templates.

1. Automatically Add Orders from Webflow to SPIRAL for Efficiency

This flow automatically adds orders from Webflow to SPIRAL. This eliminates the need for manual order information entry, reducing errors. You can quickly grasp order details, allowing subsequent tasks to proceed smoothly.

2. Automatically Register Webflow Form Information to SPIRAL

This is a flow where, when a Webflow form is submitted, it is automatically added to SPIRAL. This eliminates the need for manual work, saving time and effort. Since customer information is immediately reflected, an improvement in response speed can also be expected.

3. Automatic Folder Creation in Google Drive with SPIRAL Registration

When a client is registered in SPIRAL, a folder is automatically created in Google Drive. This eliminates the need for manual folder creation, saving time. Centralized file management is expected to improve operational efficiency.

Summary

By integrating Webflow and SPIRAL, the automation of previously manual data update tasks leads to problem-solving. In particular, since integration is possible without code, it can be easily implemented without programming knowledge, making it useful across various departments.

The marketing team can update information in real-time and quickly reflect it in the market, making schedule management more efficient. On the other hand, for IT administrators, centralized data management becomes possible, maintaining data integrity and improving work efficiency.

In this way, the introduction of Flowbot, which offers significant benefits to both departments, will lead to improved operational efficiency and reliability.
Please take advantage of the easily configurable automation flow.

See you again!