Your event

Widgets

Put your tickets on your own website, in your own design.

You paste two lines of code into a page you already have, and a widget appears there in your own design, served from your account's own web address. It shows only on websites you've approved.

People buy through the widget without leaving your page. If they pay on Stripe’s own page or with PayPal, the widget sends them there to pay and brings them back to your page afterwards, with the widget open on their order. If they don't finish paying, they come back to the payment step with the same order.

If something goes wrong while somebody is buying, the widget shows what happened with Close and, where it helps, Try again.

Once somebody opens their tickets, each step has Open the full page at the bottom. It opens the same step on your event page in their own tab, with the same order. To hide it, turn off Show “Open the full page” on the widget’s page. Without it, somebody can only finish buying in the widget.

When a widget lists only certain ticket types, you can turn on Let people see every ticket type on sale on its page. An All ticket types link then shows under its tickets. It opens every ticket type on sale in the widget, and anything someone has picked stays picked.

Get tickets appears once somebody picks a ticket. When your widget has more than one ticket type, the button stays at the bottom of the screen while the widget is in view. On a phone it’s as wide as the screen. When a widget has only one ticket type to choose, it starts with one ticket picked.

When the event has codes that can be used, the widget shows a promotion code box under its tickets, above Get tickets. A code someone applies there comes off their order. Someone who doesn't enter a code there can still enter one on the next step. To hide the box, turn off Show the promotion code field on the widget's page. It goes from every step in the widget and stays on your event page. Codes still work from the link on each code's page.

When the tickets someone picks have nothing to add, like an add-on or a donation, the widget goes on to the next step of buying them.

On a phone, the button that takes someone to the next step is in the same place at the bottom of every step.

Anyone whose device is set to reduce motion sees a fade instead.

Back on the payment step goes to the buyer’s details with everything they gave filled in, so they can change them before they pay. It’s the same order, with the same reference. Back again goes to the tickets they picked, to change those.

On a big screen, your tickets open in one column with Get tickets under them. From the next step the widget is as wide as your event page, with the order beside the questions the way your event page has them, and it stays that wide through the confirmation. On a phone or a narrow window it’s one column.

A ticket on the confirmation opens inside the widget, with Back to the order. The receipt, the printable ticket, wallet passes and Get directions open in a new tab.

The preview on a widget’s page shows your changes as you make them, under How it will look on your page. Your website keeps the widget as it was until you press Save.

What a widget shows

Under Details it shows in More settings, you can put a banner and the event’s name, date and venue above its tickets. Each one is off until you turn it on. They show on the list of tickets, not on the steps after it.

For the banner, choose The event’s banner to use the one on your event page, or A picture of its own to upload one for this widget. We support PNG and JPEG up to 10 MB, shown at its own shape. The date is in the event’s time zone, and the venue’s address opens a map in a new tab.

Ticket descriptions show under each ticket. Turn off Show each ticket’s description to hide them in this widget.

Your own CSS styles your widgets as well as your event page, on every step. See Write your own CSS.

Collect emails

To collect email addresses before tickets go on sale, choose Collect emails on the widget’s page and write what people agree to under What people agree to. Visitors enter their email address and confirm it from a link we email them. An address nobody confirms within 48 hours is removed.

Everyone who confirms is listed on Mailing list in your event’s sidebar, newest first.

Download gives you the list as a spreadsheet. Send email, under Actions, starts a message to everyone on it. Each email ends with a link to stop updates.

When you’re ready to sell tickets, switch the widget to Sell tickets. The same code and approved websites stay in place, and everyone who signed up stays on Mailing list. A sign-up doesn’t create an order or hold a ticket.

Analytics

Switch on Send activity to your analytics on the widget's page and the widget sends its own events to whatever tracking your website already has. There's nothing to paste and no ID to find. It works with the tools already on the page: Google Tag Manager, Google Analytics, Meta Pixel, Plausible, Fathom and Matomo. If none of those is there, nothing happens.

Four events go out:

• tito_widget_view when the widget appears on the page
• tito_widget_open when somebody opens it, on button-shape widgets or from your own button
• tito_widget_checkout when somebody presses Get tickets, with a count of how many
• purchase when somebody completes an order inside the widget

purchase is the standard ecommerce event, so Google Analytics counts it as revenue. It has the order reference, the total, the currency and what was bought, and nothing about who bought it. If they pay on Stripe’s page or with PayPal, purchase goes out when they come back to your page. The figures show up in that tool, not in Tito.

Some websites hold their tracking back until a visitor first clicks, taps or scrolls, usually because a speed plugin such as WP Rocket delays it. The widget looks again after that first interaction and when somebody starts buying. Tracking that loads late still gets tito_widget_view, a little after the widget appeared, and the rest of the events as they happen.

Once the switch is on, the widget's page tells you what we found on your website. If a visitor's first click is what loads your tracking, it shows there once a visitor has clicked. If you want the numbers and have no analytics yet, install one of the six above the way its own instructions describe. There's nothing to change on the widget.

Open a widget from a button

A button or link on your site can open a widget over the page. Put the first of the widget's two lines on the page, and have your button call tito("widget.open", "your-widget") with the name after embed= in the second line.

If someone clicks your button before the widget loads, add window.tito = window.tito || function () { (tito.q = tito.q || []).push(arguments); }; in a script above your buttons.

Open a widget with the buyer's details

If your website asks for someone's details on its own form, your code can pass them to the widget so nobody types them twice. Call tito("widget.create", "your-widget", { … }) with any of these:

• name and email, like name: "Alex Rivera", email: "alex@example.com"
• answers, your event's questions by their Export name, like answers: { company: "Example Ltd", job_title: "Head of Events" }. The Export name is on each question's own page. An answer goes on the order and on the buyer's own ticket, wherever your event asks that question, and a name your event doesn't ask is ignored.
• billing, the company details for the invoice: company, country as a two-letter code, vat_number, address, city, postcode, region and po_reference. The widget ticks I’m booking for a company or organization and fills in the company details.

The widget opens with the tickets picked and the details filled in. Add quantities the same way as with widget.open, like "q-early-bird": 2. A widget with only one ticket type starts with one ticket picked. The widget's own page shows this code for that widget, under To fill in a buyer’s details.

Under Details from your website on the widget's page, choose what happens next:

• Go straight to payment takes the buyer on to paying once nothing your event asks for is missing.
• Show them their details first shows the buyer the filled-in form, and they continue to payment themselves.

If your event asks anything your website didn't send, like a required question or agreeing to your terms, the widget stops there with everything else filled in.

Call it from your form's own button. Called any other way, such as when the page loads, the widget opens without the buyer's details. For free tickets, the widget fills in the details and the buyer confirms them.

Moving from Tito Pro

When your account moves from Tito Pro, each Pro widget that sells tickets to the public becomes a widget here and keeps its Pro widget code. Widgets for an invitation list, widgets that need a promotion code or an approved email address, and widgets switched off in Pro don't come across. The buttons on your website keep working with the code they already have, including tito("init", …), tito("widget.open", …), data-tito-button links and data-tito-q-… quantities. tito("widget.open", "…", { "q-early-bird": 2 }) opens a widget with quantities picked too, the same way data-tito-q-… does.

If your website loads Pro's widget from your own domain, like https://registration.example.com/widget.js, contact Tito support to connect that domain to your account. Once the domain points here, your website loads the widget from the latest version of Tito and nothing on the website changes. If it loads it from a Tito address, change that one script address to the one in the first line of any widget's code.

If your website has its own order form that sent buyers to Tito Pro's checkout, it keeps working. Point the form at your ticket address, then the event's name, then /orders. Buyers land on the checkout with their name and email already filled in. From a website you've approved, they go straight on to payment.

The widgets appear on your website once you've approved it. Add your website to the list before the move and they appear from the first visit. See Approve the website your tickets appear on.

Plugins and your own tracking code

The widget plugins from Tito Classic work with your widget as they are. That's ga4.js, gtm.js, gtag.js, google_analytics.js, facebook.js, linkedin.js and trialfire.js from js-plugins.tito.io.

Tito Classic loaded them from the end of its own script address, like js.tito.io/v2/with/ga4. With your widget, add a script tag for each plugin you use, like <script src="https://js-plugins.tito.io/ga4.js" async></script>. Put the window.tito line from the section above before them.

Your own code can listen for the same moments with tito("on:registration:finished", function (registration) { … }). This works whether Send activity to your analytics is on or off. There are three moments:

• on:widget:loaded when the widget appears on your page, or first opens from your own button
• on:registration:started, or on:started, when somebody presses Get tickets
• on:registration:finished, or on:finished, when somebody completes an order inside the widget

Code that starts listening after the order finished still hears it, once, as soon as it listens. The same goes for on:widget:loaded once the widget is showing. on:registration:started reaches only code that was already listening when Get tickets was pressed. Reloading the page starts again with nothing heard.

The registration your code gets has:

• line_items, each with id, release_slug, title, price before tax, quantity and currency
• total, tax and currency
• event.title, event.slug, account.name, account.slug and source
• for a finished order, slug and reference, which are both your account's name and the order reference, like your-account-X7K2QF, and receipt.total and receipt.tax
• for a finished order, when Share the buyer’s name and email address with scripts on your website is on for the widget, name, first_name, last_name and email, which are the buyer’s. Code that starts listening after the order finished doesn't get these.

For a started registration, the widget sends only the displayed price before discounts. It sends no buyer details or answers. discount_code is empty.

Every script on your page that’s listening when the order finishes gets the buyer’s name and email address, including any tag your tag manager loads. The attendees’ names and email addresses aren’t sent.

With the setting on, a purchase also leaves an empty <div class="tito-share"></div> on your page when the widget closes, after the widget or after your own button if that’s what opened it. Tito Classic’s widget had a share box with that class, and sharing tools like InGo’s look for it and put their own widget inside.

Good to know

• Paid ticket types stay out of the widget until payments are connected, the same as the event page. Free tickets still show.
• The section appears in your sidebar once a widget has shown up on a website you approved. Add it from All features to have it there while you build one.
• To try a widget before it goes live, turn on test mode. Widgets there shows each widget's test mode code, and anyone who registers through it makes a test order. See Try things out in test mode.
• A button puts a real button on your page. It takes your own site's type, and any styling rule you already have for buttons applies to it.
• A Tito Pro button that adds a promotion code opens the widget without the code. The code can still be entered at checkout.
• Use either Send activity to your analytics or the ga4.js plugin, not both.
• Code that a speed plugin such as WP Rocket holds back until a visitor clicks still hears the finished order when it runs.
• Opening the widget moves the keyboard into it, and the rest of your page stops taking keystrokes while it's up. Your page stays in view behind it. Escape, Back or a click on your page around it closes it, asking first once tickets are picked. Leaving the widget at the payment step puts the tickets back on sale straight away.