Answered

Retrieving Webhook API Responses in Embedded React Survey

  • 15 August 2023
  • 6 replies
  • 446 views
T

Hello! Firstly, apologies if this has been asked before. I have searched for a possible solution but haven’t found what I’m looking for. I am new to Typeform and am considering using it for a survey based webapp. My question is:

Is it possible to retrieve the results (within React) of the response of a custom Webhook API?

This is roughly what I’d like to build if possible.

I’ve read the callbacks and is see there’s an onSubmit, but I don’t see one for Webhook responses.

Ultimately, what is the best way to retrieve the python server response’s payload from react? Can it be done with just the Custom Webhook API Call? If so, how can it be stored in react state?

Thank you!

icon

Best answer by mathio 16 August 2023, 10:53

View original

6 replies

Liz
Rank
Userlevel 7
Badge +5

Tagging @mathio here to help you out! 

Life is a series of awkward moments separated by snacks.
T

Thanks for tagging! Alternatively, after sleeping on it and reading this. Is it better practice to:

Submit the form to TypeForm, store the responseId from onSubmit callaback, request the form responses with the responseId by calling TypeForm API. Once I’ve gotten the responses, call my Python Server directly from React with the form responses, get the results, etc. etc.?

Thus circumventing the Custom WebHook? Here’s my mockup if helpful

 

T

Double posted, and am unable to delete the duplicate.

mathio
Rank
Userlevel 7
Badge +5

Hello @TryingToBuildBeautifully (nice nick name 😅),

thank you for your question and very nice diagrams to explain your question - BTW what tool did you use to draw those?

 

Your second proposed approach seems feasible. However make sure to build a proxy to communicate with Typeform API as you don’t want to expose your personal token in the frontend. You could even make the Typeform API request to retrieve responses from your Python server to make sure there is only single API request from frontend (and your Typeform personal token is kept safe on the backend).

 

If you would like to avoid piping the data through frontend React app, you could use websockets for communication between your webhook and React app.

There is a similar implementation in Node.js (JavaScript server) using Socket.io here: https://glitch.com/~tf-webhook-receiver-fastify

How it works:

  • frontend app connects to a websocket and waits for data
  • backend has a webhook endpoint that is waiting for responses from a typeform
  • whenever the endpoint receives data, it also uses websocket to send data to frontend app

Let me know if you have any questions.

T

Thanks! I used draw.io. It’s free and pretty powerful.

Thanks for the response, I think everything makes sense. Understood on exposing the Typeform key when making the survey results request.

I think the websockets example is the best option; with the Typeform Custom webhook API, retrieving the results in react seems unnecessary when I really care about the Python Server’s output. I will read up on webhooks and use your JS example. Just to double check, I think this is what the simplified flow would look like?

 

mathio
Rank
Userlevel 7
Badge +5

Yes, this looks correct.

Your React app needs to open the socket connection. It can be closed by either side.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs