Integrating Webflow with Google Chat Using Pabbly Connect: A Step-by-Step Guide

Learn how to integrate Webflow with Google Chat using Pabbly Connect for automated notifications. Follow this detailed tutorial for seamless automation. Implement the precise methodologies leading organizations use to automate repetitive tasks, illustrated with practical examples designed for immediate application.

Watch Step By Step Video Tutorial Below

1. Accessing Pabbly Connect for Integration

To start the integration process, you need to access Pabbly Connect. Open your browser and search for Pabbly Connect. Once on the site, you will see two options: ‘Sign In’ and ‘Sign Up for Free.’ If you are a new user, click on ‘Sign Up for Free’ to create an account.

As an existing user, click on ‘Sign In’. After signing in, you will see all the applications offered by Pabbly. Click on ‘Access Now’ under Pabbly Connect to enter your dashboard. This is where you will set up the workflow to connect Webflow with Google Chat.

2. Creating a Workflow in Pabbly Connect

Once you are on your Pabbly Connect dashboard, click on the button that says ‘Create Workflow.’ You will be prompted to enter a name for your workflow. Name it something like ‘Notify Team on Google Chat for Webflow Form Submission’ and select the folder where you want to save it. using Pabbly Connect

• Click on ‘Create’ to proceed to the workflow setup.
• This will open the workflow window where you can set your trigger and action.

In the workflow window, select Webflow as your trigger application. Choose the trigger event as ‘Form Submitted’. This means that the workflow will start whenever a new form submission occurs in your Webflow account. Click on ‘Connect’ to establish the connection.

3. Connecting Webflow to Pabbly Connect

To connect Webflow to Pabbly Connect, you will need an API token. Click on ‘Add a New Connection’ and follow the instructions. Log into your Webflow account, navigate to ‘Site Settings,’ and then to ‘Apps and Integrations.’ Here, click on ‘Generate API Token’.

• Name your token appropriately, such as ‘Google Chat’.
• Set permissions for assets, forms, and pages to read and write.
• Generate the token and copy it back to Pabbly Connect.

Paste the token into the provided field in Pabbly Connect and click ‘Save’. You should see a confirmation that the Webflow account is now connected, along with the site ID for your Webflow site.

4. Setting Up Google Chat Notifications

Next, you will set up Google Chat as the action application in your workflow. Search for Google Chat and select it. For the action event, choose ‘Create Message’. Click on ‘Connect’ to set up the connection. using Pabbly Connect

You will need to provide a webhook URL for Google Chat. To get this, open your Google Chat application, navigate to the space where you want notifications, and go to ‘Space Settings’. Click on ‘Add Webhook’ and copy the URL provided.

Paste the webhook URL into Pabbly Connect. Compose the message you want to send, including placeholders for dynamic data.

This will allow your Google Chat to receive real-time notifications whenever a new form submission occurs in Webflow.

5. Testing the Integration

To ensure everything is set up correctly, it’s important to test the integration. Submit a new form in Webflow with sample data. After submission, head back to your Pabbly Connect workflow and click on ‘Save and Send Test Request’. This will trigger the workflow and send a message to Google Chat.

Check your Google Chat space to confirm that the notification appears with the details of the new lead. You should see the message formatted with the lead’s name, phone number, email, and city that you entered in the form.

With this successful test, your integration is now complete! Whenever a new form submission occurs in Webflow, your team will be notified in Google Chat automatically, thanks to Pabbly Connect.

Conclusion

In this tutorial, we explored how to integrate Webflow with Google Chat using Pabbly Connect. By following these detailed steps, you can automate notifications for new form submissions, ensuring your team stays informed and responsive to potential leads.