Answered

Hidden variable not updating in iframe url

  • 15 December 2022
  • 5 replies
  • 190 views
C

Hello,

 

We have integrate the form like this: 

 

  <div

    data-tf-sidetab="xxxxxxxxxxxx"

    :data-tf-hidden="`user_id=${user_id}, environment=${env}, looker_id=${looker_id}, page=${page}`"

    data-tf-button-color="#235695"

    :data-tf-button-text="`Give us your opinion ${page}`"

    data-tf-auto-close

  />

 

And we call : //embed.typeform.com/next/embed.js

 

The typeform js script loads correctly and builds the iframe with the first value of ${page} which is page_1.

 

The menu containing the links of the pages is loaded first on the server side and then loads the pages on the client side.

 

We manage to assign the value of the page ${page} = page_2 on click event vuejs but typeform does not take this value into iframe url.

The hiddens values ​ fields are initialized on the first loading of the form and are no longer updated.

 

How to set a new value of hidden variable for typeform without a server-side page reload ?

 

Best regards,

icon

Best answer by mathio 16 December 2022, 11:38

View original

5 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @C4L Could you send the URL where you have the form embedded? Thanks!

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

Hi Liz,

 

Thanks you for your feedback

The url is private and we have need credential to navigate on.

 

But here is the description of the steps:

 

1 - we going on https://url.com/page_1
2 - the website is loaded on browser server side
3 - the form typeform is loaded also

4 - click on “Give us your opinion”

5 - the iframe is created with url and variable hidden page=page_1:

https://form.typeform.com/to/xxxxx?typeform-embed-id=xxxxxx&typeform-embed=popup-side-panel&typeform-source=url.com&typeform-medium=embed-sdk&typeform-medium-version=next#user_id=xxxxx&environment=production&page=page_1

6 - we navigate on the website and click on https://url.com/page_2

7 - the website is loaded client side

8 - we have changed the variable hidden to page=page_2

9 - but the iframe is loaded with the old url and the value (page_1)

 

Can we update hidden variable after the form typeform is loaded side client ?

 

Thanks,

Liz
Rank
Userlevel 7
Badge +5

I think we would need to see the full code on the page to know for sure what is happening, but @mathio do you happen to have any ideas offhand? 

Life is a series of awkward moments separated by snacks.
mathio
Rank
Userlevel 7
Badge +5

Hi, if you update your embed code after the form was rendered it will not be updated automatically.

You can use @typeform/embed-react package that reloads the embedded form on prop change (eg. when hidden fields are updated).

Alternatively you can embed using JavaScript API and build a function to reload the form with new hidden fields. Something like this:

function loadWidget(hidden) {
  window.tf.createWidget('<form-id>', {
    container: document.querySelector('#form'),
    hidden
  })
}

 

I have also noticed you have a colon in front of some of some of the attributes in your embed code, I think that might be a typo.

Liz
Rank
Userlevel 7
Badge +5

Hi @C4L Did mathio’s solution above work? Let us know if you still need help!

Life is a series of awkward moments separated by snacks.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs