What’s new in Typeform Embed SDK — 2024 update
Welcome to another article in this series. It has been a very successful series running for over two years now. Yes, this is the 3rd article in the series since I write them every year, but it’s something.
Another year, another yearly update with the latest Embed SDK features. We did not neglect our library last year; on the contrary, we have added quite a few new features for you.
Let’s dive in 👇
Add ref to the onEndingButtonClick payload type
For plans with the “Redirect from ending screen” feature (currently plans Plus and above), the onEndingButtonClickcallback also receives ref along with formId. Therefidentifies the end screen where the button was clicked.
If you have any custom logic in your form that displays different ending screens based on responses in your forms, you can translate this logic to your web app and continue where the embedded typeform left off. You can display different content based on responses without the need to fetch any response from our API.
Allow passing any attributes to the button for popover and sidetab
Since the SDK generates the button for these embed types, we now allow you to pass any HTML attributes to the button for further customization (e.g., to add aria attributes or anything else your website or web app might need).
Like this:
<div
data-tf-sidetab="form-id"
data-tf-button-props="ariaLabel=Button,dataTestid=my-form-button"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>You can find a complete example in the embed SDK repository here.
Accept size with units
Until now, you could have passed all sizes to your embedded typeforms in pixels. When you pass a number by default, we assume the value is in pixels.
Last year, we improved the API, contributing to a better developer experience. Embed options “width” and “height” can be set in any unit now:
- numeric value (integer) — pixels are assumed by default (no change)
- value with units, e.g.
data-tf-height="90vh"
New options for sidetab
We have introduced new customization options (for sidetab only) to further customize your experience.
- buttonTextColor
- buttonTextSize
- buttonWidth
- buttonHeight
- buttonAlign: align button relative to the iframe (top / center / bottom)
- top: position the iframe from the top
- bottom: position iframe from bottom (when top is not provided)
You can now fully customize the displayed sidebar button , including its colors, dimensions, text size, alignment, and position on the page. What do you think? Did we miss anything else you would like to customize?
You can find a demo of a fully customized sidetab embed here:
Add onStarted callback for “submission start” event
The embed SDK exposes many callbacks to react to different form events. For example when the form is loaded we execute onReadycallback. This way you can make sure your JavaScript code is executed after your form loads.
Now we are adding one more event — “submission start” via onStarted callback. The payload exposes responseId as soon as it is generated. You can pair this value with your user session and already have it in your database at the time a response is received by your webhook.
We have added this new feature based on feedback from a customer via Nico. We are open to feedback via multiple channels — customer success team, Github, community or even direct feedback to one of our team members.
<div data-tf-widget="form-id" data-tf-on-started="onStarted">open</button>
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
function onStarted({ formId, responseId }) {
console.log(`form ${formId} started for ${responseId}`)
}
</script>You can find a full example in CodeSandbox here.
Improved redirects
Our SDK is handling redirects better now. We have moved the code for redirect from the form itself into the Embed SDK. This means that redirects with data-tf-redirect-target=”_blank” are less likely to be blocked by popup blockers.
The main reason for this change was the private mode of Safari browser — after redirection your respondents could end up on a website where the query parameters, while still present in the browser address bar, were not accessible via JavaScript. This change makes sure the query parameters are readable. At least for now 🙃
As you can see, the windown.location.searchis empty, however the browser address bar displays an ?email=in query string.
Prefill first question
Did you know you can prefill the first question of your typeform by passing a value in the URL? You can find all details in this help center article.
Now you can use this prefill functionality in embedded forms as well. Just pass the ref value using an option like this:
<div data-tf-widget="form-id" data-tf-preselect="question-ref=answer-ref">open</button>
<script src="//embed.typeform.com/next/embed.js"></script>We have added this new feature based on feedback from a customer in this Typeform Community thread . We are open to feedback via multiple channels and take your suggestions and requests seriously.
New settings for custom launch options
There are two new features in this category:
Do not auto-open after the modal is closed with preventReopenOnClose
By using preventReopenOnCloseoption you can prevent automatically re-opening the typeform with custom launch options after it was close before. This functionality uses a cookie to indicate the form was already closed and will prevent custom launch options to trigger again for the same user.
<button data-tf-popup="form-id" data-tf-prevent-reopen-on-close>open</button>
<script src="//embed.typeform.com/next/embed.js"></script>You can see a fully functioning demo here. To play around with the code, feel free to use this CodeSandbox.
This feature is also available via the share page, in the settings panel on right hand side:
Do not auto-open if there already is a different modal open with respectOpenModals
With respectOpenModal you can prevent modal with custom launch options from opening when the auto-open condition is triggered if there already is a modal open. This will make sure there are not multiple forms open on top of each other. It is useful especially if the same form is triggered via multiple launch options (eg. time and exit) and you don’t want to display the form over the same form already open on the website.
<button data-tf-popup="form-id" data-tf-respect-open-modals>open</button>
<script src="//embed.typeform.com/next/embed.js"></script>Shoutout to UptimeRobot 👋
I am a big fan of UptimeRobot for my personal projects (this is not a sponsored post though). I love their free plan that allows me to monitor some of my more critical side projects or just prevent them from going to sleep while hosted on Heroku 😜
As I was exploring their new UI, I found this familiar button on the side. I was very nicely surprised to learn they are using our Embed SDK to collect feedback from their customers on the new redesigned UI.
Keep up the good work!
Other open source libraries
Did you know we also have two other open-source libraries?
The recently launched, new Typeform Button library, allows you to embed Typeform builder into your web app. It allows you to integrate your customer’s typeforms into your own application — eg. select it to be embedded in a website builder like our Typeform Webflow app does.
The @typeform/api-client library with a handful of new features introduced last year such as automatic pagination for your convenience when retrieving data from Typeform API endpoints.
Cheers to another year full of new features for our Embed SDK 🍻
For random updates related not only to our open-source libraries you can see my Twitter / X account @mathio28.
