Auto focus changes in Embed SDK

  • 19 September 2022
  • 2 replies
  • 115 views

Userlevel 7
Badge +5

Hello friends! 👋

I have noticed the auto focus feature of our Embed SDK is quite a popular topic both here and also on our Github 🚀

Many of you weren't keen on the way auto focus worked. If a typeform was embedded "below the fold" on a web page, it would automatically scroll down to the typeform. I have some good news for you - we've listened to you, and improved this feature. I believe it will make the process of embedding your typeforms even smoother and more straightforward.

 

💡 In short:

  • auto focus is now disabled for widgets (standard embeds) by default

  • no more page jumps for embeds “below the fold”

  • you can enable it again with data-tf-auto-focus / autoFocus: true, for example:
    <div data-tf-widget="HLjqXS5W" data-tf-auto-focus></div>

  • we are exposing focus() method for all embeds so you can focus your typeform programmatically whenever you want (eg. via a button click)

  • I have also prepared an example to give you an idea how to use the new focus() method here: https://tf-widget-focus.glitch.me/

  • If your typeform embed code contains data-tf-disable-auto-focus there is no need to update anything - this option is redundant now, but it is not necessary to remove it and will not affect the functionality


👇 You can read full article on Medium 👇
ttps://mathio28.medium.com/widget-auto-focus-in-embed-sdk-8e0c0584b57


2 replies

Userlevel 3
Badge +3

 

Userlevel 7
Badge +5

Tagging some users that might be interested on this: @daniel @nji @LittleGreenDevelopment @illyb @Seniorpancho 😊

Reply