Hi helpful people
I am currently using a webhook to trigger a make.com flow when a button is clicked. But the code to handle the repsonse is not working. I believe it is because the webhook is a make.com webhook, and the 200 response is sent to make.com and not webflow, but i am not sure, not that great in webhooks. Here is the code, any help would be appreciated.
document.addEventListener(‘DOMContentLoaded’, function() {
const form = document.getElementById(‘wf-form-onboarding’);
const submitButton = document.getElementById(‘webhook-button-trigger’);
const loadingAnimation = document.getElementById(‘loading-shimmer’);
const aiOutput = document.getElementById(‘ai-output’);
form.addEventListener('change', updateTotalCredits);
function updateTotalCredits() {
// Get all checkboxes with a specific class, adjust as needed
const checkboxes = document.querySelectorAll(‘.ms-checkbox-copytype’);
// Calculate total credits based on selected checkboxes
let totalCredits = 0;
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
totalCredits += parseInt(checkbox.value, 10);
}
});
// Update the value of the hidden input
document.getElementById('total-credits').value = totalCredits;
}
submitButton.addEventListener('click', function(event) {
event.preventDefault();
loadingAnimation.style.display = 'block';
aiOutput.style.display = 'none';
const formData = new FormData(form);
fetch('https://api.webflow.com/v2/sites/652563972f183e3ee67f2c82/webhooks', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({ data: Object.fromEntries(formData) }),
})
.then(response => response.json())
.then(data => {
console.log(data);
if (response.status === 201) {
aiOutput.style.disply = 'block';
loadingAnimation.style.display = 'hide';
} else {
aiOutput.style.disply = 'hide';
loadingAnimation.style.display = 'hide';
}
})
.catch(error => {
// Handle errors
console.error(error);
});
});
});