WebflowとNotionを連携して、Webflowで注文が発生したらNotionに追加する方法

WebflowとNotionの連携フローの作り方

まずはじめにYoomの公式サイトにアクセスし、アカウント作成をお願いします。
既にアカウント登録済みの方はログインしてください。
Yoomのアカウント発行ページ

ステップ1：WebflowとNotionをマイアプリ連携

1)Yoomのアカウントにログインしたら、使用するアプリを登録します。
「マイアプリ」をクリックし、「新規接続」を選択してください。

2)登録したいアプリを選択し、アプリごとに使用するアカウントでログインしてください。
1つ目のアプリが登録できたら、もう一度「新規接続」をクリックして、2つ目のアプリを登録します。

3)登録ができるとマイアプリにアイコンが表示されます。
登録した2つのアプリのアイコンが表示されたか確認してください。

‍

今回は、【Webflowで注文が発生したらNotionに追加する】というフローを作成します。
作成の流れは以下の通りです。

・テンプレートをコピー

・Webflowで「新規注文が発生したら」というトリガーを作成します。

・その後、Notionで「レコードを追加」というアクションを設定します。

・最後にトリガーが起動するようにONにします。

※なお、このフローはWebflowの情報をNotionへ追加するため、事前にWebflowの情報に対応するレコードを作成する必要があります。必要項目を作成したレコードの準備をお願いします。

ステップ2： テンプレートの選択とコピー

1)上記のテンプレートを開き、「このテンプレートを試してみる」のアイコンをクリックします。

2) 以下のような表示が出てきます。

右に「！」が表示されているアイコンを順番にクリックし、オペレーションの設定を行います。
タイトルや詳細は、クリックすると編集可能ですので、適宜変更してください。

ステップ3：トリガーを設定

「アプリトリガー　新規注文が発生したら」をクリックします。

ステップ4：Webflowのアクションを設定

1) アクションは「新規注文が発生したら」を選択して、「次へ」をクリックします。

2) サイトIDを入力します。
アプリが連携されていると、候補から選択できます。
入力が完了したら「テスト」をクリックし、テスト成功後「保存」します。

3)Webhookイベントを送信して、テストをクリックし、テスト成功後「保存」します。

ステップ5：Notionのアクションを設定

‍
1) フローに戻り、「データベースを操作する　レコードを追加する」のアイコンをクリックします。

2) アクションは「レコードを追加する」を選択し、データベースIDを入力します。
入力ができたら、「次へ」をクリックします。
データベースIDのエラー表示についてはこちらを参考にしてください。
Notionの各IDに関するよくあるエラーと確認方法 | Yoomヘルプセンター (intercom.help)

3) 追加するレコードの値を入力します。
アプリが連携出来ているとWebflowのアウトプット情報を活用して入力できます。
必要に応じて候補から選択し、入力が完了したら「保存」します。

これで【Webflowで注文が発生したらNotionに追加する】というフローが完成です。

‍

ステップ6: テストと確認

 最後まで設定すると以下のような表示が出てくるので、「トリガーをON」をクリックします。
フローボットを起動し、正しく作動するか確認してください。

今回使用したテンプレートはこちら

Webflow・Notionを使ったその他の自動化例

他にもYoomには、WebflowやNotionを使った自動化のテンプレートがあるのでご紹介します。
自動化を試みたい業務内容や、現在利用しているアプリとの組み合わせに応じて、テンプレートを活用してください。

1.Webflowでコレクションのアイテムが作成されたらNotionに追加する
Webflowでコレクションのアイテムが作成されるとNotionに自動的に追加できます。
WebflowからNotionへのデータ連携が自動化されるため、手動による作業が不要となり、効率的なコンテンツ管理が見込めます。
また、Notionへのデータ連携が自動化されることで、常に最新の情報をチームメンバーが確認でき、業務をスムーズに進めることも期待できます。

2. Webflowのフォームが送信されたらNotionに追加する
Webflowから送信されたフォーム内容をNotionに自動的に追加できます。
Webflowのダッシュボードに都度ログインしてフォーム内容を転記する作業が不要となるため、業務の効率化が期待できます。
また、手入力によるヒューマンエラー発生防止が見込め、情報の正確性向上にもつながります。
さらに、Notionにフォーム内容が自動で追加されることで、顧客対応のプロセスをスムーズに進められることも見込めます。

3.Notionデータベースの情報でMicrosoft Excelで見積書を作成し、メールを送信する
Microsoft ExcelのテンプレートにNotionの情報を自動追加して見積書を作成し、メールで取引先に送付することができます。
見積書送付までの一連の流れを自動化することで、作業にかかっていた時間と手間を大幅に削減し、業務効率の向上が期待できます。
手入力に起こりがちな重複や漏れ、入力ミスの防止も見込め、データの正確性向上も見込めます。

まとめ

Webflowで注文が発生した際にNotionへ自動的にデータを追加することで、手動入力の手間が省け、業務効率の向上が期待できます。
また、連携によって2つのアプリのデータ管理が一元化できるようになり、ツール間を行き来することなく、スムーズな情報共有も見込めます。
効率化されたことにより、他の業務へ充てる時間の確保も見込め、チーム全体の生産性向上にもつながりそうですね。
さらにYoomを使えば、初心者でも簡単にアプリの連携設定が可能です。

このブログを参考に、ぜひ自社の業務改善に役立ててください！