Best answer

Can I use URL query parameters in a catch webhook's URL?

  • 19 April 2023
  • 7 replies
  • 1795 views

Userlevel 2
Badge +1

Was just reading this post on the Zapier blog and now I have a question. Would I be able to configure a QR code to point to a Zapier webhook and also include some URL query parameters at the end? And would those values be available later in my Zap?

If so, I could do some neat things. The post mentions collecting data for the Zap by pointing the QR to a form. In my hypothetical use-case, I might already know the scanning individual’s name. Rather than ask for it again, I could pass it via parameter.

icon

Best answer by ericg 19 April 2023, 21:36

View original

This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

7 replies

Userlevel 6
Badge +6

Yes, this is very much possible

Userlevel 2
Badge +1

@jayeshkumarbhatia, is it as simple as adding ?key=value to the end of my webhook and then those values are available for use or is there something else to it?

Userlevel 6
Badge +6

You are correct @ericg 

Userlevel 2
Badge +1

Quick follow up on this. I tested it and it works as expected. Very cool.

New question: the webpage that it resolves to is just a status message. I know this is probably outside the scope of what Zapier does, but if I wanted to trigger the webhook while taking the user to another webpage instead of showing them the status message, what would you tinkerers out there recommend?

I imagine that would be a matter of adding some JavaScript to the page I want to resolve at but don’t want to make things more complicated if any of you have done this another way.

I don’t have a specific project or use case that I am working un. Just dreaming up cool stuff ;-)

Userlevel 2
Badge +1

I know I’m talking to myself at this point, but figured I’d post back here for posterity in case someone in the future is looking to do the same thing.

It seems that the best approach to what I imagine above is to have the QR point to a landing page. Pass query parameters in the URL. Then have some Javascript on the page call the webhook with the same parameters.

I’m not a developer so rather than search through Stack Overflow for guidance on how to build such a script, I asked ChatGPT for a hand. Here’s what it came up with. Tested and works!

To trigger a webhook with query parameters upon page load, you can use JavaScript's window.location.search property to get the query parameters from the current URL and append them to the webhook URL. Here's an example code snippet:

window.addEventListener('load', function() {
// Get the query parameters from the current URL
var queryParams = window.location.search;

// Set the URL for the webhook, appending the query parameters
var webhookUrl = 'https://example.com/webhook' + queryParams;

// Trigger the webhook by making a GET request
var xhr = new XMLHttpRequest();
xhr.open('GET', webhookUrl);
xhr.send();
});

In this example, we're using the load event to ensure that the page has finished loading before triggering the webhook. We're then getting the query parameters from the current URL using window.location.search, which returns a string starting with ? and including all the query parameters in the format key=value. We're then appending the query parameters to the webhook URL and triggering the webhook by making a GET request using XMLHttpRequest.

Note that in a real-world scenario, you'll likely want to handle any errors that may occur when triggering the webhook, and you may also want to include additional headers or payload data in the request.

Was just reading this post on zapier blog and now I have a question. Would I be able to configure a QR code to point to a Zapier webhook and also include some URL query parameters at the end? And would those values be available later in my Zap?

If so, I could do some neat things. The post mentions collecting data for the Zap by pointing the QR to a form. In my hypothetical use-case, I might already know the scanning individual’s name. Rather than ask for it again, I could pass it via parameter.

In your hypothetical use-case, if you already know the scanning individual's name, you can pass it as a parameter in the QR code URL. When the QR code is scanned and the Zap is triggered, the name value can be extracted from the URL query parameters and used within your Zap. This eliminates the need to ask for the name again and allows you to streamline the data collection process. 

Was just reading this post on the Zapier blog and now I have a question. Would I be able to configure a QR code to point to a Zapier webhook and also include some URL query parameters at the end? And would those values be available later in my Zap?

If so, I could do some neat things. The post mentions collecting data for the Zap by pointing the QR to a form. In my hypothetical use-case, I might already know the scanning individual’s name. Rather than ask for it again, I could pass it via parameter.

Hey Dear, 

Yes, you can use URL query parameters in a catch webhook's URL. Query parameters allow you to pass additional information or data along with the URL when making a request to a webhook.

When constructing the webhook URL, you can include query parameters by appending them to the end of the URL using the "?" symbol followed by the parameter name and its value. Multiple query parameters can be separated by the "&" symbol.

Regard, 

Methew