I’m facing an issue with handling a webhook response in Webflow and dynamically displaying a PDF report. Here’s the scenario:
I have a form on my Webflow website where users submit some data.
Upon form submission, I make an API call to API Gateway. What happens in the backend is the following
The payload is saved into a dynamo table
A lambda function is triggered to do the job
Once the lambda function is done, it updated the item in the dynamo table (setting a field for pdfUrl, etc…) and send a response to the webhook URL it initially got.
I would like to give that webhook response to Webflow somehow, but I am not sure how this could be achieved. Another solution would be to poll the API gateway GET endpoint that would fetch an item from the DB. When the item has a pdfUrl != “”, I can take this as the result. I would like to avoid doing this, as it would probably generate a lot of traffic into my GET endpoint.
Here is some code for context.
form.addEventListener('submit', (event) => {
event.preventDefault();
const name = document.getElementById('field').value;
console.log('Name:', name);
if (uploadedFileData) {
const payload = {
fileData: uploadedFileData,
webhookUrl: myWebhook,
name: name
};
fetch('API_GATEWAY_URL', {
method: 'POST',
body: JSON.stringify(payload)
})
.then(response => {
// listen to what the lambda function sends to the webhook url...?
// Extract the pdfUrl from the response
const pdfUrl = ???
// Display the PDF in the adobe-dc-view div
var adobeDCView = new AdobeDC.View({clientId: "......", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { location: { url: pdfUrl }},
metaData: { fileName: "Previewed File" }
}, { embedMode: "SIZED_CONTAINER", showDownloadPDF: false, showPrintPDF: false, showFullScreen: false });
})
.catch(error => {
console.error('Error:', error);
});
} else {
console.log('No file uploaded.');
}
});
Why not simply call the Webflow API from your lambda function?
I do some similar work with lambda, but I insert Make (Integromat) into the workflow. When I get a response from AWS, I just use Make to inject whatever is in that response, into the Webflow CMS via the API.
It’s super simple and removes a ton of complexity.
Here’s a screencast of mine using a similar setup:
It uses lambda to authenticate with Memberstack. It’s not exactly what you’re doing, but close enough to get you what you need.
Thank you, @ChrisDrit. Your answer did not solve all my problems, but it gave me some ideas. The problem I have using Make webhooks is the fact that the backend takes up to 5 minutes. I think I would run into timeout problems. What I am doing now is polling the GET endpoint until the job is finished, and update the UI accordingly. Now the most pressing issue is user verification on the server side. In your code, you have something like
const token = MemberStack.getToken() || '';
This gives me a Uncaught ReferenceError: MemberStack is not defined at <anonymous>:1:15, which I did not manage to solve. Do you have suggestions on this point?
Most likely due to your file sizes, mine take less than 1 second. You can speed that up by not passing the file through Make. Dig into the AWS docs to understand how to do that.
If those don’t work for you, you’ll need to slightly alter the approach to get it working. I haven’t heard of anyone bumping into issues with that so I’m assuming it’s doable.