8 ways we've made our widget even better
I just wrote a technical post, about how I solved one of the last remaining problems facing our Widget V2.
With that done, I thought I'd write a few reasons why I think it's a really great addition to Tito.
1 - Speed
The new widget is fast. Everything loads async so it doesn’t block your page. We will be able to optimise it further, but for now it's much zippier than the previous widget, particularly if you have multiple instances of buttons or widgets on your page, where previously we would load one iframe per instance, there's just one shared iframe now, or indeed no iframe if you use...
2 - Inline mode
Inline mode is a new mode on the V2 widget that lets you load everything into the main frame of your page, and not in an iframe. Combining this with the ability to disable our CSS and you can completely customise the look and feel of the entire widget from scratch. If you so please.
3 - Plugins
I posted on Twitter about the difficulties of implementing reliable tracking on Tito over the years. Widget V2 plugins solve this. On principle, as a company, we don't want to run any of Google’s or Facebook’s code on our servers, but the beauty of the widget is that it’s embedded on your site.
Here's a link to a gist of the source code of our gtm Google Tag Manager plugin. You can see how simple it is and how little work it's actually doing. That's because Tag Manager will already be installed on your site, and the plugin just needs to hook in to it. Plugins are doing what plugins should do: providing additional functionality to those who want it, at little to no maintenance cost for us. Beautiful.
The really great benefit here for tracking is that this is best-in-class and how tracking if you need it should be done. The user never leaves your site, so you get the data exactly as you would if you implemented a completely custom checkout, without losing attribution, domain. No compromises. Magic!
4 - Permalinks
Up to now, even though our Widget V1 and our hosted checkout both shared the same code, only the hosted page got permalinks, because we weren't able to change the URLs on third-party pages the same way we were doing on our hosted pages. V2 solves this by adding a query param tito to your URLS, so you end up with a URL like this:
https://example.org/?tito=/example-account/example-event/en/registrations/new
You can actually start an order in one browser, copy the URL into another browser and everything just works. Magic!
5 - Dynamic links without JS
Another really cool feature of the new widget is that you can open it with a regular a tag and no JS. To get to the above URL, for example, which would start a new registration flow, you would just create a link:
<a href="#/tito/example-account/example-event/en/registrations/new">Click me!</a>
(swapping the ?tito= for #/tito ) ... this allows you to open a new checkout flow for any Tito event from just a regular link.
6 - Dynamic attributes in the URL
This is so cool. Once the widget is installed, you can actually pass attributes to it via URL params. e.g. if you have a Tito release with a slug ticket, you can specify that the widget on the page only shows that ticket in the URL, e.g. https://example.org/?releases=ticket and you can actually pass in multiple. This also works for discount_code, source and even prefill if you want to fill in name and email.
7 - Callbacks
Callbacks are really simple but they allow so much extra functionality, and indeed I used callbacks to make the analytics plugins. But they could be used for so much more, such as changing the content behind the widget to a custom thank you screen, or adding an additional element to the screen, or firing a message to a custom server to send a custom email. So much possibility with such a simple but powerful feature.
If you want to see all this in action, I made a video which you can watch below. And of course, if you don't already use Tito, getting started is super easy. Sign up at ti.to, read or watch our getting started guide, and be selling tickets in no time at all.
8 - Internationalisation
You can set the widget to show the checkout in any one of ~17 languages. See our documentation for details on this and everything else in this post!