Invoke an API on button click

[citystructure]

Hi,

I am trying to invoke a simple GET api on button click. What is the cleanest way to do that in webflow? I cannot find a way to add custom code or api call in the button settings.

[jasondark]

In Webflow, give your button an ID. Then you can make reference to this in your script. Something like this:

const button = document.getElementById('button-id');

button.addEventListener('click', function () {
    fetch('https://whicheverapi.com/path/id')
        .then(function (result) {
            console.log(result);
        })
        .catch(function (err) {
            console.error(err);
        });
});

You can also reference Webflow elements by css classes, element type, data tags or any other regular HTML selector.

[ThoughtHarvest (Zen)]

Hi,

I’m trying to trigger a webhook on button click by creating a button in Webflow.
The webhook sends form input details to my Airtable database.

I already have the webhook address needed
and also understand that the refferenced code needs to include the button ID.

Where would the code @jasondark suggest have to be placed?
Before the head tag or the body tag of the page?
Would I need to replace : “https://whicheverapi.com/path/id’” with my webhook address?

Any thoughts?

[memetican (Michael Wells)]

@jasondark 's example is for a GET request. Many webhooks require a POST, with a body. You can do that using jQuery’s POST or AJAX features, something like;

$.ajax({
   type: 'post',
   url: 'https://whicheverapi.com/path/id',
   data: $('#myForm').serialize(),
   success: function(response) {
      $('#DisplayDiv').html(response);
   }
});

Be aware that your Webhook will need to be accessible directly from a browser client. Airtable’s API does not support such requests directly, however you could do something similar using a Zapier webhook that posts to your Airtable account.

You’ll have to adapt for your needs and your endpoint, but here’s the basic approach I’d run with;

[ChrisDrit]

Here’s another approach…

If you don’t mind using a POST request (versus the GET request mentioned by OP).

Benefits:

• No coding.
• No Make, Integromat, or Zapier.
• Use a native Webflow form button.
• Simple & straightforward.

Steps:

Fire up Airtable and create a new Base:

Select the “Automations” tab:

Tap the “+ Add trigger” button:

Choose the Webhook option:

This creates a Webhook directly within Airtable and gives you a URL to submit your Webflow form to. Skipping the need for Integromat, Make, or Zapier.

Grab the Webhook URL:

Open up Webflow, create a Native form, remove all the fields and just leave the form button.

Paste your copied Airtable Webhook URL into the “Action” field of your Webflow form.

Make sure to select “POST” (versus GET) as it won’t work otherwise.

Publish your Webflow site and open it up:

Tap your fancy new Form button then flip back over to Airtable:

Tap the “Test trigger” button.

Worked!

You can see the green success message (screenshot above).

Next…

Tap the “+ Add action” button and select “Create record” from the options listed:

Select your Airtable Base:

Tap “+ Choose field” and since you only have 1 in this test Base, choose that:

If you submitted some form fields (or hidden form fields) you could choose which one(s) to populate your various Airtable fields, but since I didn’t in this quickie example, I just typed in a simple message:

Turn on the automation:

Back to your live site:

Tap your submit button and:

Bam!

Without any code you just submitted a form button from Webflow directly into Airtable.

If you need to get fancier, just put Make.com in-between the two services

Here’s the Webflow preview link if you’d like to checkout the set up for yourself.