WeWeb Webhooks: Outgoing Requests, Automation, and Realtime Data

Open any workflow in WeWeb by selecting an element and clicking its workflow trigger (e.g., a button's 'On click' trigger in the Workflows panel). Click the '+' to add a new action. Scroll down to 'REST API' and select 'REST API Request'. This is the action that sends HTTP requests — including webhooks. In the action configuration panel, set Method to POST. Paste your webhook URL in the URL field (for example, your Zapier Catch Hook URL or your own server's endpoint). Under the Body tab, set the body format to JSON. This single action is the foundation of every outgoing webhook you send from WeWeb.

In the REST API Request action body editor, click the 'Add key-value pair' button or switch to the raw JSON editor. You can bind any field value to WeWeb data sources using the formula editor (the plug icon next to any field). Structure your payload with an event identifier, timestamp, and relevant data. Bind form fields from a Form Container using `formContainer.formData.fieldName`. Reference page variables using the variable name directly. Reference current user data from your auth plugin. Use the formula `new Date().toISOString()` in a Custom JavaScript step before the request to generate the current timestamp and store it in a variable, then reference that variable in the payload.

1// JSON body for the REST API Request action
2// Each value on the right side can be bound using the formula editor
3// Injection point: Workflow → REST API Request → Body (JSON)
4{
5  "event": "form_submission",
6  "source": "weweb_app",
7  "timestamp": "{{variables.currentTimestamp}}",
8  "user": {
9    "id": "{{plugins['supabase-auth'].user.id}}",
10    "email": "{{plugins['supabase-auth'].user.email}}"
11  },
12  "data": {
13    "name": "{{formContainer.formData.name}}",
14    "email": "{{formContainer.formData.email}}",
15    "message": "{{formContainer.formData.message}}",
16    "page": "{{wwPage.name}}"
17  }
18}

After the REST API Request action sends its payload, the response is available to subsequent workflow steps. Reference the response using the formula `actions[N]` where N is the zero-based index of the REST API Request action. For example, if it's the first action, use `actions[0].status` to check the HTTP status code or `actions[0].body` to access the response body. Add a 'Branching' action after the request to handle success and error paths. In the 'If' condition, check `actions[0].status === 200` or `actions[0].status >= 200 && actions[0].status < 300`. In the success branch, show a success toast or navigate to a confirmation page. In the error branch, display an error message. Also click the 'On error' tab in the workflow editor to add a fallback for network failures.

When Stripe, GitHub, or Zapier tries to send a webhook, they POST to a URL and expect a server to answer. WeWeb apps run entirely in the user's browser — there is no server listening at your WeWeb URL. The WeWeb Cloud host serves static files; it does not execute server-side code. This means you cannot create a Stripe webhook that posts to your-app.weweb.app/webhooks and have WeWeb handle it. There is no WeWeb equivalent of a Next.js API route or an Express.js server. This is a fundamental architectural limitation of all frontend-only SPA frameworks. The solution is always to put a backend service in between: Supabase Edge Functions, Xano, a Vercel serverless function, or any backend that can receive the webhook, process it, and then make the processed data available to WeWeb.

The practical workaround for incoming webhooks in WeWeb is: 1) Receive the webhook in a Supabase Edge Function (outside WeWeb), 2) Write the data to a Supabase database table, 3) Subscribe to that table in WeWeb using Supabase Realtime. In Supabase Dashboard (outside WeWeb): create an Edge Function at supabase/functions/webhook-receiver/index.ts, deploy it, and copy its URL. Configure your external service (Stripe, GitHub, etc.) to POST to that Edge Function URL. The Edge Function validates the webhook, processes the payload, and inserts a record into a Supabase table. Back in WeWeb: In the Data panel, set up a Supabase collection on that table with Realtime enabled. Add a workflow with trigger 'On realtime - database change' to react when new records arrive. This entire flow means external systems effectively push data to your WeWeb frontend via the database.

1// Injection point: Supabase Edge Function (outside WeWeb)
2// File: supabase/functions/webhook-receiver/index.ts
3// Deploy via Supabase CLI: supabase functions deploy webhook-receiver
4
5import { serve } from 'https://deno.land/std@0.177.0/http/server.ts';
6import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
7
8serve(async (req: Request) => {
9  if (req.method !== 'POST') {
10    return new Response('Method not allowed', { status: 405 });
11  }
12
13  // Verify webhook signature (example for generic HMAC)
14  const body = await req.text();
15  const signature = req.headers.get('x-webhook-signature') || '';
16
17  // TODO: validate signature using crypto.subtle.verify()
18
19  const payload = JSON.parse(body);
20
21  // Initialize Supabase client with service role key
22  const supabase = createClient(
23    Deno.env.get('SUPABASE_URL') ?? '',
24    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
25  );
26
27  // Write event to database — WeWeb will pick this up via Realtime
28  const { error } = await supabase
29    .from('webhook_events')
30    .insert({
31      event_type: payload.event || 'unknown',
32      payload: payload,
33      received_at: new Date().toISOString()
34    });
35
36  if (error) {
37    return new Response(JSON.stringify({ error: error.message }), {
38      status: 500,
39      headers: { 'Content-Type': 'application/json' }
40    });
41  }
42
43  return new Response(JSON.stringify({ received: true }), {
44    status: 200,
45    headers: { 'Content-Type': 'application/json' }
46  });
47});

If Supabase Realtime is too complex, implement polling: fetch a collection on a regular interval. In the Data panel, select your collection and go to its settings. Enable 'Auto-fetch on interval' (if available) or build a polling workflow manually. For manual polling: create an App-level workflow (Workflows panel → App workflows → New), trigger 'On app load'. Add a 'Fetch collection' action for your data collection. Add a 'Time delay' action set to 30,000 milliseconds (30 seconds). Add another 'Fetch collection' action. Add another 'Time delay'. Wrap the delay-fetch cycle in a loop or duplicate the steps. This is a simple approach but inefficient — it fires regardless of whether data changed. Use Supabase Realtime for production apps with real-time requirements.

WeWeb has one built-in incoming/outgoing webhook: the After Deploy Hook. Go to your project settings by clicking the gear icon at the top of the left sidebar → 'Project Settings'. Scroll to find 'After Deploy Hook'. Enter a URL in the URL field. After every WeWeb publish (from the Publish button top-right), WeWeb will send a GET request to your URL with query parameters: `type` (build type), `version` (version number), `name` (project name), `env` (environment), `built-zip` (URL to built files), `raw-zip` (URL to raw files), `github` (GitHub push URL if sync enabled). Use this to trigger CI/CD pipelines, notify your team via Slack, invalidate a CDN cache, or trigger a Prerender.io recrawl after new content is published.