WeWeb Zapier Integration: Automate Workflows with REST API

Log in to Zapier at zapier.com and click the orange 'Create Zap' button in the top left. In the Trigger step, search for 'Webhooks by Zapier' and select it. Under 'Trigger Event', choose 'Catch Hook' — this creates a unique URL that Zapier listens to. Click 'Continue'. On the next screen, Zapier shows your unique webhook URL — it looks like `https://hooks.zapier.com/hooks/catch/1234567/abcdefg`. Copy this URL. You will paste it into WeWeb in the next step. Leave this Zapier tab open — you will need to return to it to test the connection.

Switch back to your WeWeb editor. Click the plug icon in the left sidebar to open the Plugins panel. Under 'Data sources', find 'REST API' and click Add if it is not already installed. No configuration is required at the plugin level — the REST API plugin simply enables REST API collections and the REST API Request workflow action. Once installed, you will see it listed under your data sources. If you already have REST API installed from a previous integration, skip this step.

Navigate to the page with your form or button trigger. Select the element that starts the automation (typically a form's submit button or a standalone action button). In the right sidebar, click the Workflows tab (lightning bolt icon). Find the workflow triggered 'On click' or 'On submit' for a Form Container. If no workflow exists, click 'Add workflow'. Inside the workflow editor, click the '+' button to add a new action step. In the action search, type 'REST API' and select 'REST API Request'. In the action configuration, set Method to 'POST'. Paste your Zapier Catch Hook URL in the URL field.

In the REST API Request action body editor, click the 'Body' tab and select 'JSON' format. Click 'Add key' to add fields to your payload. For each field, give it a name (this becomes the field name in Zapier) and click the plug icon on the value side to open the formula editor — bind it to your WeWeb data. For a form: bind `name` to `formContainer.formData.name`, `email` to `formContainer.formData.email`, `message` to `formContainer.formData.message`. Add a `submitted_at` field and bind it to a Custom JavaScript action result that generates a timestamp. Add a `source_page` field bound to `wwPage.name`. Every key-value pair you add here becomes a field that Zapier can use in subsequent steps to route to Gmail, HubSpot, Slack, etc.

1// JSON body for REST API Request action → Zapier Catch Hook
2// Injection point: Workflow → REST API Request → Body (JSON)
3// Values in {{ }} are formula editor bindings (reference your actual variable names)
4{
5  "event": "form_submission",
6  "name": "{{formContainer.formData.name}}",
7  "email": "{{formContainer.formData.email}}",
8  "message": "{{formContainer.formData.message}}",
9  "phone": "{{formContainer.formData.phone}}",
10  "source_page": "{{wwPage.name}}",
11  "submitted_at": "{{variables.currentTimestamp}}",
12  "user_id": "{{plugins['supabase-auth'].user.id}}"
13}

Before completing the Zap, test the connection to confirm data flows correctly. In WeWeb, trigger your workflow by interacting with the element (click the button or submit the form with test data). Switch to your Zapier browser tab. Zapier should now show 'We found a request!' with a preview of the data it received — your JSON fields will appear as a list of key-value pairs. If Zapier doesn't detect the request within 60 seconds, check: 1) the URL in your WeWeb action matches the Zapier URL exactly, 2) the REST API Request action is actually reached in the workflow (check for upstream branching conditions), 3) there are no CORS errors in browser dev tools Network tab. After confirming the data looks correct in Zapier, click 'Continue' in the Zapier setup.

In Zapier, click 'Continue' after confirming the webhook data. Now configure the Action step — what Zapier does with the data from WeWeb. Common patterns for WeWeb apps: click 'Gmail' → 'Send Email' and map the `email` field from WeWeb to 'To', the `name` field to the email body; click 'HubSpot' → 'Create Contact' and map `email`, `name`, and `phone` fields; click 'Slack' → 'Send Channel Message' and compose a message using the WeWeb fields; click 'Airtable' → 'Create Record' and map each WeWeb field to the correct Airtable column. Complete the action configuration, click 'Test action' to confirm it works end-to-end, then click 'Publish Zap' to make it live.

Return to your WeWeb workflow and improve the user experience around the Zapier call. After the REST API Request action, add a 'Branching' action. In the condition, check if the previous action succeeded (use formula `actions[N].status >= 200 && actions[N].status < 300` where N is the index of your REST API Request). In the 'Yes' (success) branch, add actions to show a success message: set a page variable `submissionSuccess` to true, which triggers conditional visibility of a success banner on the page. In the 'No' (error) branch, set an error variable and display an error message to the user. Also add a reset of the form data variable if you want to clear the form after successful submission.