website logo
🔭Overview
▶️Demos
🛠️Developer's guide
🧰Custom Actions
🔧Integrations
Navigate through spaces
🔭Overview
▶️Demos
🛠️Developer's guide
🧰Custom Actions
🔧Integrations
⌘K
💪Demo - creating your first process flow💪🏼
📜How to integrate with JIRA to create a ticket and receive confirmation email to sender
📜How to create an order confirmation process
📜Demo - Typeform + Procesio +Airtable
📜Webflow + PROCESIO + Airtable integration
📜Demo - sending criteria based alerts to contacts from an excel workbook
📜How to integrate with UIPath robots
📜How to extract e-mail addresses from websites
📜SenseTask OCR integration + notifications
📜Automate employee requets
📜FTP to FTP transfer
📜HubSpot contacts analytics
Docs powered by archbee 
16min

Webflow + PROCESIO + Airtable integration

To automate repetitive departmental tasks in your organization, Procesio can be the glue that holds everything together bringing together functionalities from different platforms to automate your workload and saving your team time.

In this example we will go through the implementation of a tool that could complement your hiring process with the aid of Webflow and Airtable. We will assume that you already have Airtable and Webflow accounts.

We will use Webflow for the creation of a form on your website that will send data regarding the results of the interviewing process and the interviewee contacts into a table in Airtable.

Airtable

Step 1. We will create the table meant to receive the data.

Document image

Step 2. Generate the Api key from your Airtable account.

Document image

Procesio

Step 1. From the Credential manager create the connection intended to be used for Airtable.

Document image

Replace the Test endpoint with a Get endpoint from your project found here. Replace api_key with your api_key, that you can find here.

Step 2. Create the process that will add data to Airtable.

Document image

Step 3. In this process we will use the following variables: 

  • Mandatory input variables:
    • Name
    • Email
    • Phone
    • Notes
  • Optional output variables:
    • status
    • body
Document image

Step 4. For this process we will use the connection we just created with the Post verb and the Create Applicants records API provided by Airtable and add the necessary Query Params and body data. You will use the variables in the body section to send the data dynamically.

Document image
JSON
|



Step 5. Save and Validate the project.

Step 6. Save the ID of your project for use it in the code you will add to Webflow. You can find it in the Process designer under its name or in the last part of the URL while inside the project

Document image
Document image

Webflow

Step 1. Create your new application/ website from the Webflow dashboard

Step 2. Add a form on one of the pages.

Document image

Step 3. From the left side of your Dashboard select Pages, and click the widget of the page containing your form to Edit page settings.

Step 4. In the Before body tag section you have the option to enter your code to manage the process you just created in Procesio.

  • Here you will store the data entered in the form in variables that will be forwarded to Procesio
  • Authenticate to Procesio
  • Use the API calls provided here, in this case we will use the /launch endpoint.

The snippet of code used in Webflow can be found here.

Updated 10 Mar 2022
Did this page help you?
Yes
No
UP NEXT
Demo - sending criteria based alerts to contacts from an excel workbook
Docs powered by archbee 
TABLE OF CONTENTS
Airtable
Procesio
Webflow