WebHook (Instant)
Last updated
Last updated
In this video we will talk about webhooks in Easyflow.
Webhooks are one way that apps can send automated messages or information to other apps. For example, It's how PayPal tells your accounting app when your clients pay you, how Twilio routes phone calls to your number, and how WooCommerce can notify you about new orders in Slack.
Assuming a potential customer has submitted a contact form on our website. Your goal is to store every form submission in a Google Sheet, so that you can easily manage them all in one place.
As you can see, we have the "Contacts Form" built using "Webflow", and we have the "Google Sheet". Let's see how we can automate that.
The first step is to create a new flow. We will give it the title "Send Submitted Contact to Google Sheets".
From the designer canvas, drag and drop the Webhook connector from the built-ins connectors panel. Then choose the "Webhook" operations and copy the "Webhook URL".
Don't forget to click Apply and set your "Webhook" as a starting point.
The next step is to configure the copied webhook provided by Easyflow in your "Webflow" account on "Form submission". Let’s see how.
Let's submit a "Contact form" and test whether Easyflow received the information from the webhook.
From Easyflow designer canvas, click on the Real Time button located on the bottom of the page. The real-time panel will display the most recent data and execution activities for your workflow.
As you can see in the logs, the data was submitted via the "Contact form" received by Easyflow.
Next, we need to add a "Google Sheet" step and link it with the "Webhook" step. This will allow us to send the received webhook information to "Google Sheets".
From the Google Sheet connector, choose and configure the "Add a Row" operation. As part of this configuration, we need to set up a connection to "Google Sheets", specify the Spreadsheet Id and the range. In the data text box, we need to map the columns with the ones received by the Webhook. In total we will map 5 columns: Department, Full name, Job position, email and date.
Let's submit a new contact form and see if the data will go to "Google Sheets".
As we can see, the data went to "Google Sheets" as expected.
The Execution History feature in the Visual Designer lets you view logs and activity data to help debug issues.
Thank you for watching this video.
Please feel free to contact us if you have any questions.
