Updating Zapier webhook URL through custom scripting

Other Questions Zapier
1

I need help modifying the request URL in Zapier by appending query parameters from form data. I’m trying to take values from the input_fields and add them as URL parameters to bundle.request.url.

Here’s the bundle structure I’m working with:

{
  "credentials": {
    "domain": "myapp", 
    "token": "abc123"
  }, 
  "request": {
    "files": {}, 
    "url": "https://myapp.api.service.com/v2/task?&method=create", 
    "headers": {
      "Content-Type": "application/json; charset=utf-8", 
      "Accept": "application/json"
    }, 
    "params": {
      "token": "abc123"
    }, 
    "data": "{\"priority\": \"HIGH\", \"title\": \"New Task\"}", 
    "method": "POST"
  }, 
  "input_fields": {
    "priority": "HIGH", 
    "title": "New Task"
  }
}

I wrote this code based on Zapier documentation:

var ZapierHook = {
    task_before_request: function(bundle) {
        console.log(bundle.request.input_fields["priority"]);
        bundle.request.url = "https://myapp.api.service.com/v2/task?method=create";
        bundle.request.params = $.param(bundle.request.input_fields);
        console.log(bundle.request.params);
        return bundle.request;
    }
};

But I get this error:

TypeError: Cannot read property 'jquery' of undefined

I’m not very experienced with JavaScript so I’m stuck. The final URL should be:

https://myapp.api.service.com/v2/task?method=create&title=New%20Task&priority=HIGH&token=abc123
2

You’re referencing bundle.request.input_fields but the data is actually in bundle.input_fields (no request part). Also, $.param doesn’t work in Zapier’s environment. Here’s the fix:

var ZapierHook = {
    task_before_request: function(bundle) {
        var baseUrl = "https://myapp.api.service.com/v2/task?method=create";
        var queryParams = [];
        
        // Add input fields as parameters
        for (var key in bundle.input_fields) {
            queryParams.push(key + '=' + encodeURIComponent(bundle.input_fields[key]));
        }
        
        // Add existing params like token
        if (bundle.request.params) {
            for (var param in bundle.request.params) {
                queryParams.push(param + '=' + encodeURIComponent(bundle.request.params[param]));
            }
        }
        
        bundle.request.url = baseUrl + '&' + queryParams.join('&');
        return bundle.request;
    }
};

This builds the query string manually and grabs the input fields from the right place in the bundle.

3

you’re trying to use jquery’s $.param but zapier doesn’t have jquery in that context. use urlsearchparams instead, or build the query string manually: object.keys(bundle.input_fields).map(key => key + ‘=’ + encodeURIComponent(bundle.input_fields[key])).join(‘&’)

4

jQuery isn’t available in Zapier’s scripting environment, so $.param() won’t work. I hit this same wall when I started with Zapier webhooks. What saved me was using JavaScript’s native URL constructor - way cleaner than building query strings manually:

var ZapierHook = {
    task_before_request: function(bundle) {
        var url = new URL("https://myapp.api.service.com/v2/task");
        url.searchParams.set("method", "create");
        
        // Add input fields as URL parameters
        for (var key in bundle.input_fields) {
            url.searchParams.set(key, bundle.input_fields[key]);
        }
        
        // Add existing params like token
        if (bundle.request.params) {
            for (var param in bundle.request.params) {
                url.searchParams.set(param, bundle.request.params[param]);
            }
        }
        
        bundle.request.url = url.toString();
        return bundle.request;
    }
};

Handles URL encoding automatically and way more readable than string concatenation.