Skip to main content
Answered

React embed: keepSection prop doesn't work

  • 27 May 2024
  • 6 replies
  • 59 views

I'm using the @typeform/embed-react library to integrate a typeform quiz into my webapp.

I have a list of items and each item opens a typeform modal on click. Each item renders a different embed component instance with a specific formId and different hidden fields.
 

I would like the modal to always open from the beginning and for the answers to an unfinished quiz not to persist. In the documentation I saw that there is the keepSection prop, but I tried to use it and it didn't work.
 

I tried using different components, from what I read in the documentation the Widget doesn't accept this prop, so I tried, for example, PopupButton and others, but they all continued to persist.
 

Ideally, each individual typeform modal should maintain its own responses, but not persisting responses from an unfinished form is enough.

6 replies

Grace
Rank
Userlevel 7
Badge +5

Hi @santanajoao welcome to the community 😊

Tagging in @mathio and @picsoung to see if they can help with your question! 

If cauliflower can become pizza, you my friend can do anything
mathio
Rank
Userlevel 7
Badge +5

Hello @santanajoao , I think you have a typo there. The name of the prop is keepSession.

S

Sorry, @mathio . You’re right. I wrote it wrong in the question, but in the code I used keepSession.

Have you ever used this prop? Did it work correctly? It’s not working here.

S

Giving more details here:

I’m using the @typeform/embed-react library to integrate a Typeform quiz into my web app. I have a list of items, where each item has different data. Each item opens a Typeform modal when clicked. For each item, a different embed component instance is rendered with a specific formId and hidden fields. These hidden fields include this item data. This information is unique to each item and is used by the form to conditionally show different questions.

I would like the modal to always open from the beginning, and for the answers to an unfinished quiz not to persist. According to the documentation, the keepSession prop should achieve this, but when I tried to use it, the previous response data remained when opening a different form. I didn’t receive any error messages, so I’m not sure why it’s not working.

I also tried using different components, such as PopupButton, since the Widget component doesn’t accept the keepSession prop according to the documentation. However, all of these components continued to persist the responses.

Ideally, I would like each individual Typeform modal to remember the responses if the user closes and reopens it. For example, if I open modal 1 and answer some questions, close it, then open modal 2, I expect modal 2 to be without responses, i.e., the responses from modal 1 should not appear in modal 2 as if I were opening the same modal and continuing to answer. If I answer some questions in modal 2, close it, and return to modal 1, I would like the responses I gave to modal 1 to reappear. However, for me, it is enough that when closing any modal, the responses are not remembered and just restart with empty fields.

Any suggestions would be greatly appreciated. I hope these additional details help clarify my situation. If you need more details, I would be happy to provide them. Thank you!

mathio
Rank
Userlevel 7
Badge +5

By default the iframe the form is rendered in is removed from DOM when the modal window is closed. This makes the form restart from the beginning on modal reopen.

The keepSession prop simply preserves the iframe after modal is closed. When you reopen the modal, it displays the iframe and its content in state as it was when you closed the modal. You can see it in a demo here.

 

I think you might want to disable the autosave feature when creating your form - previous answers are automatically saved and pre-populated from previous session. This is not an embed feature and answers are autosaved by default.

However autosave should work only when you access the same form, not between forms. If you are experiencing this between different forms I think this might be a bug.

S

Thank you @mathio, it worked as I wanted. The responses from the unfinished form stopped persisting when I close and open another form.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs