A little help with a script to trigger a webhook

Hi!

I’m also interested to this!

Welcome to the community, @Matt1! And welcome back, @Jonathan_Blair-Joly! :grinning_face_with_big_eyes:

The bare-bones pieces you need are the webhook URL and the fetch call to it. Here’s an example with an Integromat webhook call:

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx";
await fetch(url);

If you want to pass anything to it, append it to the URL. For example, I use a webhook to call an Integromat scenario to generate a PDF version of the invoice for a specific record, and save it back into the record’s attachment field. When I click the button in a button field on the invoice record, it calls this script, and passes the ID of the record in the webhook like this:

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx?recordID=";
let table = base.getTable("Invoices");
let view = table.getView("Outstanding: Actions");

let record = await input.recordAsync("Pick a record", view);
await fetch(url + record.id);

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx";
await fetch(url);

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx?recordID=";
let table = base.getTable("Invoices");
let view = table.getView("Outstanding: Actions");

let record = await input.recordAsync("Pick a record", view);
await fetch(url + record.id);

Awesome!

Thank you @Justin_Barrett, I’ll integrate this with the new automation feature.

Thanks again!

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx";
await fetch(url);

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx?recordID=";
let table = base.getTable("Invoices");
let view = table.getView("Outstanding: Actions");

let record = await input.recordAsync("Pick a record", view);
await fetch(url + record.id);

@Justin_Barrett

First example worked perfectly.

For the second one with the record id append to the url, I got that error :

ERROR

TypeError: input.recordAsync is not a function
at main on line 5

Do I need to replace “Pick a record” with something? What about taking any record within a specific view or all records within a specific view?

The input.recordAsync method only works when you click a button in a button field to trigger a script in the scripting block. Your earlier note didn’t mention going the automation route. For that, you’ll need to add an input variable to your script action step, passing in the record ID of the triggering record from the trigger step. Let’s say you named that input variable recordID. That would then be available via input.config(). Here’s my earlier example tweaked to work for an automation:

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx?recordID=";
let config = input.config();
await fetch(url + config.recordID);

Sorry, I forgot to answer your follow-up question:

The automation system works using a triggering record, either a new one added to a table, or a record entering a specific view via a filter. If you want the automation’s script to run on a collection of records, that’s doable, but you’ll need to modify your script to search for the records you want, and also come up with a trigger mechanism that makes sense for your use case. You haven’t shared details about your base design, so I can’t offer any specific suggestions on that front.

This is great. thanks so much!!

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx?recordID=";
let config = input.config();
await fetch(url + config.recordID);

@Justin_Barrett

That’s exactly what I need!

Thank you so much.

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx?recordID=";
let config = input.config();
await fetch(url + config.recordID);

@Justin_Barrett How would I pass multiple input variables in the URL and via config…?

Welcome to the community, @Sonja_Askarjan! :grinning_face_with_big_eyes: Adding more input variables to the script is done via the built-in system on the left side of the script editor.

To add those to the URL, append them one at a time after the root URL. As you see in my example above, the first argument must be prefaced by a question mark (?). All arguments after that must be prefaced by an ampersand (&). Also, the argument values must be URL-encoded, which can be done in the script with the encodeURI function (or, alternately, adding formula fields to your base to encode the data using Airtable’s ENCODE_URL_COMPONENT() function).

For example, say that I added two more input variables named companyName and companyEmail to the input variables section. Adding support for those to the example above, it could look like this:

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx?recordID=";
let config = input.config();
await fetch(url + config.recordID + "&companyName=" + encodeURI(config.companyName) + "&companyEmail=" + encodeURI(config.companyEmail));

So I too am trying to do something similar…

I have a ZAP webhook that sends an email via Outlook. My current method of “firing” the webhook is a BUTTON = Open URL. the Value of the Button = an AT Field = Formula (Concat, URL + values). when i click the BUTTON, i get a new tab that open in Chrome that i have to close every time i click the button… its annoying! i have a different Webhook that i use and the trigger is AUTOMATION = record updated = run script… this all runs behind the scenes and does not bother me! How can make the Button = run script = use fetch url with the supplied “FULL URL = my concat url formula” to “fetch” the webhook?

I tried using the above method, but get errors…
let url = “https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx?recordID=”;
let config = input.config();
await fetch(url + config.recordID);

any thoughts or guidance would be greatly appriciated.

Here are some good resources to help.

For connecting Airtable to Zapier Webhook : How to Use Zapier Webhooks in Airtable | On2Air

For connecting Airtable to Integromat Webhook: How to Use Integromat Webhooks in Airtable | On2Air

Hi @Justin_Barrett,

This script is now a crucial part of my Airtable/Zapier/Webflow stack. Thank you for sharing!

If you wanted to update all records in a table or a selection of multiple records, rather than just one at a time, what would be your approach?

In other words, if you wanted to click one button and trigger a webhook for all, or multiple, records in airtable, how would you implement that?

Thanks again,
Dean

Hey @Dean_Arnold! That depends on the situation. If I’m just updating a batch of records and it’s something that I can accomplish directly in Airtable using either a Scripting block or an automation that runs a script action, I tend to lean in that direction. :slightly_smiling_face: If I’m tying into other services via Zapier or Integromat (which I hardly ever do any more), my old go-to process was to build a view to isolate the records I wanted to process, then have Integromat collect all records from that view at the start of a scenario. With a button-click as the kickoff point, I might do something similar: first have the script mark all of the records I want to process so that they appear in a specific view, then kick off the webhook call to Integromat, where it would grab all records from that view and un-mark them as it went. Another option might be to pass the record IDs of the records to process as part of the webhook call. Integromat could parse the IDs, collect the records, and process away.

Aside from the part where I talked about using a view that Integromat would pull from, a lot of the other ideas are pure speculation, but my gut says they would probably work. I just haven’t tested them to get more specific with the process.

Right. Simpler than I thought!

I even decided to forego the view.

I just use an Airtable automation that listens for a status update on the record, then runs this script:

let config = input.config();
await fetch(config.Webhook);

Since the Webhook is a formula field I can trigger different zaps depending on the data in the record.

To your point about un-marking. Yes, that is important. Somewhere in your zaps you always want to change the status or filter you are using for the automation or view.

The target system then runs a process that is essentially a simple web server listening for requests, that’s the URL.
A DNS name target.example.com that resolves to a routable IP address, and
A script in /var/scripts/cleanup.sh that you’d like to trigger.

let url = "https://hook.integromat.com/xxxxxxxxxxxxxxxxxxxxxxx?recordID=";
let config = input.config();
await fetch(url + config.recordID);

Hi Justin,

When I tried this script webhook didn’t recognize the recordID. Output comes out like this;

recordID: undefined

How will I solve this?

Thank you for the help!

Welcome to the community, @KMU_Project! :grinning_face_with_big_eyes: Did you create a recordID input variable and assign it to be the record ID of the triggering record?

Thank you for help! It worked!

This could potentially help me avoid the need of creating a ton of views and properly work with Zapier.

I’m creating a script that sends data to Zapier that then posts to various social media apps.

I’m facing an issue when including fields that are attachments (images).

Any recommendations on how to handle this?

Example of what I’m working with:

let config = input.config();

await fetch(url + "&instagramCopy=" + encodeURI(config.instagramCopy) + "&twitterCopy=" + encodeURI(config.twitterCopy) + "&facebookCopy=" + encodeURI(config.facebookCopy) + "&facebookMedia=" + encodeURI(config.facebookMedia));```

It looks like I can get the URL of the file by using a formula like so

Now the question is how to do it with the script so that I don’t have a bunch of columns for media files’ URL only to take that and add it to the script.

Get the cell value of the attachment field. It contains the url of the file. The format is documented here.

So I’ve managed to get this working but have run into a new issue.

When the copy I’m injecting to the webhook contains a hashtag it doesn’t work.

Anybody how to bypass this?

My current code :point_down:

let url = "https://hooks.zapier.com/hooks/catch/xxxxxx/xxxxx/?";
let config = input.config();
let files = config.mediaFiles.split("https").map(x => { return "https"+x }).slice(1)

await fetch(`${url}&instagramCopy=${encodeURI(config.instagramCopy)}&twitterCopy=${encodeURI(config.twitterCopy)}&facebookCopy=${encodeURI(config.facebookCopy)}&pinterestTitle=${encodeURI(config.pinterestTitle)}&pinterestCopy=${encodeURI(config.pinterestCopy)}&facebookMedia=${files[0]}&instagramMedia=${files[1]}&pinterestMedia=${files[2]}`);

Try using encodeURIComponent instead of encodeURI.

That worked! Thank you so much :blush: