search

Typeform / embed

Library to embed Typeforms in your website
https://typeform.com/developers/embed/
MIT License
284 stars 123 forks source link

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

Open Aerophite opened 2 months ago

Aerophite commented 2 months ago

@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?

mathio commented 2 months ago

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.