embed icon indicating copy to clipboard operation
embed copied to clipboard

React `Widget` component does not properly transition from welcome to the next form

Open Aerophite opened this issue 1 year ago • 1 comments

@typeform/embed: "^5.1.0" @typeform/embed-react: "^4.1.0"

I've recently made updates to not use the Popover component and instead now use the Widget component. Most everything has worked out fine but I've noticed that now that I'm using Widget, the fade out of the welcome page and then the slide up of the next form doesn't really work (but did when using Popover).

Example with Popover (correct):

https://github.com/user-attachments/assets/9cc1175e-8a91-4428-b161-aea445bbd246

Example with Widget (incorrect):

https://github.com/user-attachments/assets/6962fa0e-9bb4-4529-bb5a-dc4694cd5216


When looking at the iFrame src (i.e. the https://form.typeform.com/... url), the only difference between these two implementations is the query string parameter typeform-embed. When using Popover it is typeform-embed=popup-popover. When using Widget it is typeform-embed=embed-widget.

I've also noticed that removing the typeform-embed query string parameter entirely will result in the correct transition behavior.

Note that if you take the iFrame src, paste it in your browser window to just view the form outside of an iFrame, you can see still see the messed up transition behavior. This leads me to believe it's not anything specific to my page, but actually something within Typeform itself.


I'd rather not have to do something hacky to remove that query string parameter. Is there something specific that I need to send to the Widget component to make it transition correctly?

Aerophite avatar Aug 29 '24 19:08 Aerophite

Hello @Aerophite, you are right there seems to be a visual bug in widget embeds for forms with welcome screen. I have passed this to the team in charge.

mathio avatar Aug 30 '24 11:08 mathio

It also seems that the Welcome screen isn't the correct height (when using the inline embed, with the prop autoHeight). It looks like it doesn't take the height of the floating navigation bar into account.

When I remove the welcome screen, this issue dissappears.

Image

LennartJKlein avatar Aug 11 '25 09:08 LennartJKlein