What’s new in Typeform Embed SDK — 2022 update
In the last few months, we have released a bunch of new features for our Embed SDK. I would like to start a series of articles to showcase all the new features we deliver. (I am also laying the groundwork for the joke when I realize this is the first and only article in this series in a few months 🤣)
So what’s new?
Redirect target
This feature has been requested by some of our customers in our Typeform Community. It pays off to voice your opinions and requests.
You can specify a target for typeform redirects — both redirect on completion and redirect through endings. You can specify the redirect target same as you would for a HTML link as the redirectTarget option (data-tf-redirect-target for HTML embed codes):
- _self to redirect inside the iframe
- _top to redirect in the topmost frame of the tab
- _parent to redirect in parent frame (same as _top unless there are multiple nested iframes)
- _blank to redirect in a new tab (this might be blocked the same way popup are by some browsers)
Automatically resize widget height
Your widget embed can now automatically resize to fit your typeform. This way you are sure there are no additional scrollbars. And if you need to make sure your widget is not too large or too small you can even specify min and max heights.
Automatic resizing is disabled by default. You can use autoResize: “min,max” / data-tf-auto-resize=”min,max” option to enable this feature. You can see a working demo here. Here is a sample embed code:
<div data-tf-widget=”sbEeLvXG” data-tf-auto-resize=”300, 800" />If you would like to handle the height change yourself instead you can pass a function to onHeightChange / data-tf-on-height-change callback. Do you have any cool ideas you want to use this for? Let me know on Twitter @mathio28 or we can discuss it in Embed SDK repo on Github.
Lazy load for widget embeds
We understand initial page load speed is a crucial metric for user experience and SEO. A page that loads faster brings happier customers to your business. Embedding a typeform in your website may add load time on top of your existing scripts and other content — such as analytics, fonts, images, etc.
If your embedded typeform is not at the top of the page but your customers need to scroll down to see it, you can use lazy / data-tf-lazy option. Your typeform widget will not be loaded at page load but only when your customer scrolls down and the widget is displayed.
You can see a live demo of this feature here on CodeSandbox.
It is not necessary to lazy load embeds in modal windows (popups, sliders, side tabs, popovers). Those are by default loaded only when requested — when visitors click on the button to open it (unless you open it automatically on page load).
Keep typeform session in modal embeds
Did you know you can preserve typeform state when the modal window is closed and reopened? Whether you are embedding your typeform as popup, slider, side tab or popover you can use keepSession / data-tf-keep-session option.
When respondents close your modal window the typeform will not be removed from the page but rather just hidden. On next open it will be restored to its previous state and it will resume on the same question where it was closed. Even better, your initial page load speed will not be impacted as the typeform is loaded only once, on the first open event..
Text and SVG as icon
For popover or sidetab embeds you can now use SVG or text (think emojis!) as an icon. No need to upload images anymore (however you can still use image URL if you want).
Play around with emojis:
<div data-tf-sidetab=”HLjqXS5W”
data-tf-button-text=”open sidetab”
data-tf-custom-icon=”😎”
></div>Or use a SVG icon — for example one of the Bootstrap Icons:
const customIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/></svg>`window.tf.createPopover(‘HLjqXS5W’, { customIcon })
MIT License
Our embed library is under MIT license now. While this does not change much for you as a user of our library it might help your company when evaluating software license of your 3rd party libraries. Read more about the license at Snyk.
Our thanks goes to Evan Lynch for helping out with updating the license in all our packages.
Nonce for Content-Security-Policy headers
A big thank you goes to Dominic Scheirlinck for adding support for Webpack nonce. This makes our @typeform/embed-react library compatible with CSP headers to make your site safer against cross-site scripting attacks.
Which feature is your favorite? Are you missing any features? Let me know on Twitter @mathio28 or request it in our Embed SDK repo on Github.
