Hidden variable not updating in iframe url | Community

Answered

Hidden variable not updating in iframe url

2 years ago
December 15, 2022
5 replies
229 views

C4L
Explorer
1 reply

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,

Best answer by mathio-tf

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.

Forum|alt.badge.img

+5

Liz
Tech Community Advocate
14946 replies
2 years ago
December 15, 2022

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

Life is a series of awkward moments separated by snacks.

C4L
Author
Explorer
1 reply
2 years ago
December 15, 2022

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,

Forum|alt.badge.img

+5

Liz
Tech Community Advocate
14946 replies
2 years ago
December 15, 2022

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.

Forum|alt.badge.img

+5

mathio-tf
Typeform
888 replies
Answer
2 years ago
December 16, 2022

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.

Forum|alt.badge.img

+5

Liz
Tech Community Advocate
14946 replies
2 years ago
December 27, 2022

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