This guide introduces using Frontly's webhook action with workflow automation tools like Make, Zapier, Pabbly, and Latenode.
Note: While this article cover the basics, webhooks can involve more technical setup. For more complex workflows, we encourage users to research further to expand beyond the scope shared here.
Benefits of Frontly’s Webhook Action
Frontly’s webhook action provides a streamlined way to connect your app’s data with various SaaS tools. Integrating a workflow automation platform like Make amplifies these benefits by enabling you to:
Send data from Frontly to external tools - For example, instantly add user-submitted data to a CRM.
Sync data back to Frontly - If your workflow tool can send a direct webhook response, you can bring that data back into Frontly to update your data sources, such as Google Sheets, Airtable, or Supabase.
Automate notifications and updates - Integrate with team communication tools or other systems to keep your team informed in real-time.
Setting Up the Webhook Action in Frontly
To start the webhook action in Frontly, you’ll first need to set up an action sequence. This can be done by selecting one of the available custom action triggers—read this article for the full list of custom actions and possible triggers.
Once you’re in the action flow setup, click into the action selector to locate the 'Webhook' action. Here, you’ll find all the settings you need to configure the webhook.
The following fields are available to customize your webhook action:
Method: Choose between the following methods:
POST: Sends data from Frontly to an endpoint. Commonly used for creating or updating data (e.g., submitting a form).
GET: Retrieves data from an endpoint. Typically used for fetching existing information (e.g., checking order status).
Run Location: This setting specifies where the webhook will execute.
Front-End: Runs the webhook action on the client side (user's browser). Suitable for actions that don't require secure data handling or sensitive information, as it can be exposed to a technical end user.Back-End: Runs the webhook action on the server side. Ideal for more secure operations, as it’s hidden from the user and can handle sensitive data more safely.
URL: Enter the endpoint URL here. This is where Frontly will send the webhook data. This could be an endpoint for a tool like Make, Zapier, or even a custom server.
Headers: Add any custom headers needed by the receiving service. Headers can include authentication tokens, content types, or other required metadata to ensure secure and correct communication with the endpoint.
Body: Use key-value pairs to define the data payload for the webhook. Here, you specify the exact data from the Frontly form or app that you want to send to the external endpoint.
Custom Body JSON (Advanced): If the receiving endpoint requires a complex JSON structure, you can enter it directly here. This field is especially useful for more advanced configurations.
Wait For Response: Enable this if you want Frontly to wait for a response from the webhook endpoint before continuing with any further actions. This is helpful if you need to use the response data in your app.
Wait For Realtime Webhook: Use this if the webhook needs to pause Frontly’s workflow until it receives a real-time response. This option is often useful when the process depends on immediate feedback from the external service. More information on the realtime webhook can be explored here.
Run Conditions: Define any conditions that must be met for the webhook to trigger. This allows you to control when the webhook action will fire based on your criteria.
Scenario: Using Frontly, Make, and Linear to Track Feature Requests
At Frontly, we’ve streamlined our internal processes to ensure every feature request or bug report is logged and actionable in Linear. Read on to learn how we do it!
Public Roadmap Form
Linear
We have a Product Roadmap Form built in Frontly to collect feature requests and bug reports from our users. Once a form is submitted:
A webhook sends the submission data to Make, where it’s processed automatically.
Make then creates a task in Linear, updating our feature request board in real time.
This workflow ensures every request is captured, categorized, and visible to our team without any manual intervention. It’s a simple but powerful setup that saves us time and keeps us organized.
In this guide, we’ll walk you through creating a similar workflow for your own projects, showing you how to connect Frontly, Make, and Linear to track submissions and automate task management.
Step 1: Set Up the Webhook in Make
Log into Make and create a new scenario.
Add a Module by selecting Webhooks > Custom Webhook.
Create a New Webhook in Make:
Name your webhook (e.g., "Frontly to Linear Task").
Make will provide a Webhook URL. Copy this URL as you’ll need it for Frontly.
Step 2: Configure the Webhook Action in Frontly
In Frontly, go to the form block where users will submit their requests (e.g., a bug report or task request).
Open the Action Flow for the form submission.
Select the Webhook Action:
Set Method to POST.
Set Run Location to Back-End for security.
Paste the Webhook URL from Make into the URL field.
Under Body, add key-value pairs to define the data you want to send to Make. For example:
title: {{form.name}}
description: {{form.description}}
type: {{form.type}}
Step 3: Set Up the Linear Module in Make
In your Make scenario, add another module by selecting Linear > Create Issue.
Connect Your Linear Account to Make if you haven’t already.
Map Data from the Webhook:
Map the title, description, and type fields from the Frontly form to the corresponding fields in Linear.
You can still set static values, like assigning the issue to a specific team or project.
Step 4: Test the Workflow
Click “Run Once” in Make to test the scenario.
Submit the Form in Frontly to trigger the webhook.
Check Linear to confirm that a new issue is created with the submitted data. Correct any issues that surface if it has not.
Step 5: Enable the Scenario in Make
If everything works as expected, return to Make and turn on the scenario to enable it permanently.
From now on, each time a user submits the form in Frontly, a new Linear issue will automatically be created.
Troubleshooting Tips for Common Issues
If you’re experiencing issues connecting your Frontly webhook workflow, here are some general troubleshooting tips that can be applied to most workflow automation tools and the SaaS platforms you’re trying to connect to:
Data Not Reaching the Destination
Verify Webhook URL: Ensure the webhook URL entered in Frontly matches the one provided by your automation tool. Even minor errors can prevent the connection from working.
Check Logs: Review the execution logs in your automation platform to identify any errors or issues in the data transfer.
Missing or Incomplete Data
Ensure Proper Field Mapping: Double-check that all required fields from Frontly are mapped correctly in the automation tool to match the destination system’s expected input.
Match Field Types: Verify that the data types sent from Frontly (e.g., text, numbers) align with the expected types in the destination platform.
Review Key Names: Confirm that the key names in Frontly’s webhook body match what the automation or SaaS tool expects.
Webhook Not Triggering
Test the Trigger in Frontly: Make sure the webhook action is properly configured in the action flow and test the trigger to ensure it fires correctly.
Check Automation Settings: Ensure the automation tool is set to receive data from the webhook and is actively monitoring for incoming events.
Data Formatting Issues
Validate JSON Body: If you’re using a custom JSON body in Frontly, validate the JSON to ensure it’s correctly structured and adheres to the receiving platform’s requirements.
Adjust Payload Structure: Confirm that the payload sent by Frontly matches the structure expected by the destination tool, including required fields or nested data.
Authentication Errors
Check API Tokens: If the destination tool requires authentication, ensure that any required API keys or tokens are included in the headers or query parameters.
Update Credentials: Confirm that any provided credentials (e.g., API tokens) are valid and have the necessary permissions to access or modify data in the destination tool.
Conclusion
Automation is a real game-changer for scaling your workflows, and Frontly is here to help you achieve it! The flexibility of Frontly’s webhook action means you can automate a wide range of tasks— from tracking submissions to syncing data or triggering notifications, depending on your needs. Take the time to explore different workflows and integrations to see how you can maximize productivity and improve your operations.
Looking for more tips and tricks to set up your first workflow automation task in Frontly? Connect with our Support team or reach out to our Discord community over at #technical.
Happy automating!