How to get webhook response in Webflow and display content dynamically?

Design help Custom code
1

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

  1. The payload is saved into a dynamo table
  2. A lambda function is triggered to do the job
  3. 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.');
  }
});
2

Welcome @Georgian :wave:

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.

Hope that helps!

3

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?

4

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.

That’s for Memberstack v1, I’m assuming your on v2. You’ll have to lookup the new calls here: https://docs.memberstack.com/hc/en-us

I’ve found it to be fairly simple to switch over.

5

Unfortunately, I did not find a way to translate the getToken method to 2.0. It cannot be found in the DOM package. In the React package, there is

import { useAuth } from "@memberstack/react"

const {
  userId,
  status,
  getToken,
  isLoggedIn,
  signOut
} = useAuth();

which would be useful, but I am not sure how to access it in webflow.

6

Looks like these resources talk about switching from v1 to v2:

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.