Widget auto focus in Embed SDK
There are a lot of questions in Typeform Community and comments on Github about the auto-focus functionality of our Embed SDK. Let me explain recent changes to the autofocus functionality and show some examples of how to use it.
Before: Auto focus embedded typeforms by default
For a long time, the default setting for the auto focus feature was “enabled”. This means whenever your respondent landed on a page with an embedded typeform (or opened one in a popup) they could start interacting with it right away.
The default setting had one unfortunate side-effect. If you put your typeform as a standard embed “below the fold” of your page it would scroll down to your typeform. It could even look like the typeform is more important than your website. This default behavior could be disabled by adding data-tf-disable-auto-focus attribute to your embed code snippet.
💡 Note: Widget, standard and inline embed all refer to the same embed type. It is a typeform embedded inline in a webpage. It is displayed among other content of the website such as text and images.
An alternative to this embed type is embedding as one of the popup types — popup, popover, side tab, slider — you can preview all embed types in our demo repository.
Now: Changes to auto focus
There are no changes for typeforms embedded as any of the popups. Those typeforms are usually displayed based on user activity and take a prominent place on the screen. When a typeform is loaded it will focus automatically to allow your respondents to interact with the typeform they just opened. This behavior has not changed.
Typeforms embedded as a widget (standard embed) will no longer auto-focus by default. This change aligns with our “respondent first” principle, and we believe that a default auto-focus behavior paints a picture that we’re more important than your website. As you are embedding in your own website, it should be your choice to skip other content on the page (or not). Therefore the autofocus feature is disabled for typeforms embedded as widgets.
We are also removing the related data-tf-disable-auto-focus / disableAutoFocus option from the embed SDK since it is disabled by default (and it had no effect on typeforms embedded as popups). In case your embed code already contains the data-tf-disable-auto-focus / disableAutoFocus option it is not necessary to remove it if you don’t feel like updating your embed code. It does not affect the functionality.
How to focus your typeform
We have added 2 options for you to focus your embedded typeforms programmatically (see this related pull request).
Enable auto focus
You can enable auto focus for your typeforms embedded as a widget. You will get the same functionality as the previous default — the form will be focused automatically on page load (and might cause the page to “jump” if it is located below the fold, if that is what you desire).
Just add data-tf-auto-focus to your embed code snippet that you copied from your share page:
<div data-tf-widget="HLjqXS5W" data-tf-auto-focus></div>Or if you are using JavaScript API to embed your typeform, you can set autoFocus: true property in the config object:
window.tf.createWidget('HLjqXS5W', {
container: document.querySelector('#wrapper'),
autoFocus: true,
})Focus manually
We have also exposed focus() method for each embedded typeform when using the JavaScript API. You can focus your typeform any time you want by calling the method in your code.
const { focus } = window.tf.createWidget('HLjqXS5W', {
container: document.querySelector('#wrapper')
})// you can call the focus() method anywhere in your code
// eg. on a button click
document.querySelector('button#focus').onclick = () => {
focus()
}
💡 Did you know we also expose other functions from the createWidget() method? You can also refresh() or unmount() your widget. Popup-type embeds can also open(), close() or toggle() programmatically.
What other functionality would you like to see exposed from the Embed SDK? Let me know on Twitter @mathio28 if you have any suggestions.
Real-world example
On a single-page website, you can embed your contact typeform “below the fold”. When visitors scroll down to the contact section of your page (eg. by clicking the link in main menu) you can use the focus() method to focus the typeform that just scrolled into view.
See the Glitch example below on how this works:
Do you see any other applications for the new focus() method?
Would you like to see the option to enable or disable auto focus on the share page when building your embed code snippet?
Let me know on Twitter @mathio28 or in the Embed SDK Github repository.
