In this tutorial, I’ll show you how to set up webhooks by Zapier to send information to a third-party service and how to integrate them into your JAMstack site using Netlify Functions. This combination allows you to quickly and easily create dynamic functionality on your JAMstack site and create services that do things existing APIs may not even support.
The Cloud Function will call the Zapier webhook, and the webhook – a paid feature of Zapier – is set up to perform an insertion of the data into a Google Spreadsheet.
const axios = require('axios');
exports.handler = async (event, context, callback) => {
try {
if(!event.body) {
return {
statusCode: 500,
body: 'Name and email are required.'
};
}
const body = JSON.parse(event.body);
const email = body.email;
const fullName = body.fullName;
if(!email) {
return {
statusCode: 500,
body: 'email parameter required'
};
}
if(!fullName) {
return {
statusCode: 500,
body: 'name parameter required'
};
}
return axios({
method: 'post',
url: 'https://hooks.zapier.com/hooks/catch/2422393/otw0s6l/',
data:{
'email':email,
'fullName':fullName
}
}).then(res => {
console.log(res);
return {
statusCode:200,
body: JSON.stringify(res.data)
}
})
.catch(err => {
return { statusCode: 200, body: JSON.stringify(err.response.data.errors[0]) };
});
} catch (err) {[]
return { statusCode: 500, body: err.toString() };
}
};
JAMstack API with Netlify Functions and Zapier Webhooks, Part 1 →
Project Code (GitHub) →